انواع سیستم رنگ در CSS

سیستم رنگ در CSS و طراحی سایت ، مفهومی بسیار ساده است اما لازم است تا بعنوان یک طراح ، تمامی حالات ممکن برای کدهای رنگ را بشناسید تا اگر در پروژه‌های مختلف با آنها روبرو شدید ، روش کار هریک را بلد باشید . در حالت کلی خروجی رنگ‌ها در طراحی سایت بسیار نزدیک به هم هستند و هر کد رنگ قابلیت تبدیل به کدرنگ دیگری را دارد .

به عبارتی می‌توانید دقیقا یک رنگ را با چندین کد رنگ مختلف داشته باشید و این انعطاف رنگ‌ها در زبان CSS است . سیستم CSS در حال حاضر از سیستم‌های زیر برای تنظیم رنگ استفاده می‌کند :

HEX
HEXa
RGB
RGBa
hsl
hsla

هریک از این حالت‌ها دارای قوانین خاص خود هستند که اگر درمورد آنها اطلاعات کاملی داشته باشید ، پس مشکلی نخواهید داشت . دراصل کدهای رنگ 3 حالت هستند که HEX و RGB و hsl و پسوند ” a ” در انتهای آنها نشان خواهد داد شفافیت رنگ چقدر تغییر خواهد کرد . این همان پارامتر opacity است و زمانی که این فاکتور وارد کد رنگی مثل HEX شد آن را تبدیل به HEXa خواهد کرد .

سیستم کد رنگ HEX و HEXA

این سیستم براساس اعداد مبنای 16 است . اگر با سیستم اعداد در مبناهای مختلف آشنایی داشته باشید ( دانشجویان رشته کامپیوتر ) حتما اطلاع دارید که اعداد می‌توانند در چندین مبنای مختلف تعریف شوند مثل مبنای 2 ، مبنای 10 و مبنای 16 . تمامی اعداد صحیح را می‌توانیم در این 3 مبنا تبدیل کنیم . برای مثال عدد 4 در مبنای 2 بصورت ” 0100 ” تعریف می‌شود .

در حالت HEX تمامی کد رنگ‌ها بصورت 6 حرف یا رقم یا ترکیبی از هردو هستند . برای مثال کد رنگ ” #eb4f34 ” خروجی زیر را دارد .

اکنون اگر قصد داشته باشید تا به این رنگ یک حالت شیشه‌ای اضافه کنید ، لازم است تا وارد بخش HEXa شوید . در این حالت دو عدد یا حرف دیگر نیز به انتهای کد رنگ اضافه شده و در مجموع 8 حرف یا رقم خواهد شد . برای مثال کد رنگ ” #eb4f34ab ” خروجی زیر را دارد .

دقت کنید که این کد رنگ پشت div را شفاف خواهد کرد و امکان مشاهده المان‌های زیر یا پشت آن فراهم خواهد شد . به عبارتی رنگ شما کمرنگ می‌شود اما این کمرنگ شدن بصورت شیشه‌ای شدن است نه کاهش غلظت رنگ !

سیستم کد رنگ RGB و RGBA

سیستم کد رنگ RGB براساس ترکیب سه رنگ red یا همان قرمز ، رنگ green یا همان سبز و رنگ blue یا همان آبی کار می‌کند . این کد رنگ بصورت زیر است و شما می‌توانید هر آیتم را عددی از 0 تا 255 تنظیم کنید . با نزدیک شدن هر عدد به سمت 255 رنگ شما به سمت سفید متمایل خواهد شد . اگر هر 3 عدد صفر باشد ، رنگ شما مشکی است :

rgb(235, 79, 52);

این کد رنگی که در بالا خدمتتان معرفی شده است دقیقا همان رنگ بالا یعنی ” #eb4f34 ” که اکنون در سیستم RGB بصورت بالا تبدیل شده است . اما اگر قصد داشته باشید تا این کد رنگ را نیز در حالت شفاف داشته باشید یک آیتم چهارم نیز به کد رنگ شما اضافه خواهد شد که بصورت زیر است :

rgba(235, 79, 52, 0.4);

در این بخش نیز آیتم آخر عددی بین 0 و 1 خواهد بود و هر اندازه که به سمت عدد 0 حرکت کنیم ، شفافیت رنگ کمتر خواهد شد و می‌توانیم از واحدهای اعشاری با چند رقم اعشار بین 0 تا 1 استفاده کنیم . این کد رنگ و همچنین کد رنگ HEX ازجمله پرکاربردترین کدرنگ های فعلی در طراحی سایت هستند .

سیستم کد رنگ hsl و hsla

این سیستم رنگ در طراحی سایت به نسبت کد رنگ RGB و HEX جدیدتر است لذا فعلا در سیستم‌های طراحی سایت بخوبی جایگاه خود را پیدا نکرده است . برای استفاده از این دستور باید بصورت زیر کد بزنید :

hsl(9°, 82%, 56%)

این سیستم کد رنگ دارای 3 واحد برای تنظیم رنگ است . واحد h عددی بین 0 تا 360 است . واحد s و واحد L نیز عددی بین 0 تا 100 تنظیم می‌شوند . اگر مقدار h برابر 360 و واحد s و L نیز برابر 100 تنظیم شوند شما رنگ سفید را خواهید داشت و اگر هر سه واحد برابر 0 باشند شما رنگ مشکی را دارید .

اگر قصد داشته باشید تا از این واحد استفاده کنید می‌توانید از تولیدکننده های کد رنگ استفاده کرده و به کمک آنها ، کد رنگ خودتان را در واحد hsl ایجاد کنید . به تصویر زیر دقت کنید که داخل سایت گوگل قابل دسترس است .

کد رنگ ” #eb4f34 ” در حالت کد رنگ hsl بصورت مثال بالا تعریف می‌شود . پس همان رنگ ” #eb4f34 ” را دقیقا با همان طیف رنگ در RGB و hsl نیز داریم . برای کد رنگ hsl نیز حالت شفاف و شیشه‌ای را داریم و قطعا اکنون خودتان نیز مطلع هستید که یک آیتم به 3 آیتم hsl اضافه خواهد شد .

hsla(0, 100%, 50%, 0.2)

دقیقا همانند مثال بالا این کد رنگ در حالت شفاف دارای یک عدد بین 0 تا 1 است . به همین راحتی شما می‌توانید از سیستم‌های رنگ در طراحی قالب با CSS استفاده کنید . درحالت کلی اگر در زمینه طراحی تازه کار هستید بهتر است از واحد HEX استفاده کنید چراکه ساده‌تر است . استفاده از واحدهای hsl برای افراد مبتدی تا سطح متوسط توصیه نمی‌شود .