انواع کد های رنگ در CSS

در این مقاله به معرفی انواع کد های رنگی در CSS میپردازیم.

همان طور که می دانید CSS برای استایل دهی به قالب سایت مان می باشد. به عبارتی برای دادن استایل به المان های موجود در HTML استفاده می شود. به عنوان مثال برای background-color ، color ، border از رنگ ها استفاده می کنیم. و استفاده از رنگ ها برای زیبایی سایت مان از اهمیت بالایی برخوردار است.

به چند روش می توانیم رنگ ها را تعریف کنیم :

⦁ استفاده از نام رنگ
⦁ HEX (کد هگزادسیمال)
⦁ RGB
⦁ RGBA
⦁ HSL
⦁ HSLA

نام رنگ

شما می توانید از نام رنگ ها برای طراحی وب خود استفاده کنید. مثلا برای استفاده از رنگ آبی از اسم blue استفاده می کنیم.
اسم رنگ ها به حروف بزرگ و کوچک حساس نیست. همان طور که می بینید از اسامی رنگ ها برای استایل دهی به باکس استفاده کردیم.

استفاده از کد رنگ هگزادسیمال (HEX) :

کد هگزادسیمال یا به انگلیسی hexadecimal و مخفف آن HEX می باشد. از سه رنگ قرمز آبی و سبز تشکیل شده است.

RRGGBB#

بازه تعریف این رنگ کد از A تا F و از 0 تا 9 است. نسبت به حروف بزرگ و یا کوچک حساس نیست. در تعریف کد HEX ابتدا باید از علامت شارپ # استفاده کرد. بعد RR نشان دهنده رنگ قرمز، GG نشان دهنده رنگ سبز و BB نشان دهنده رنگ آبی است.

این کد هم از شش رقم و هم از هشت رقم تشکیل شده است. تنها تفاوت آنها در میزان شفافیت شان است. دو رقم آخر در کد هشت رقمی از عدد 0 تا 9 و A تا F برای مشخص کردن میزان شفافیت استفاده می شود. به بخش شفافیت رنگ ها کانال آلفا می گویند. که 00 یعنی به طور کامل شفاف است. FF یعنی رنگ کاملا مات و کدر است.

میتوان برای تعریف رنگ ها، ترکیبی از حروف و اعداد استفاده کرد. نگران نباشید سایت های انلاین tools هستند که می توانید رنگ مورد نظر خود را انتخاب کنید.

این نکته را در نظر بگیرید که نسخه هشت رقمی کد HEX در بیشتر مرورگرها پشتیبانی نمی شود. اگر می خواهید شفافیت رنگ ها را مشخص کنید، از کد rgba استفاده کنید. (در قسمت بعد توضیح می دهیم.)

برای نمایش رنگ سفید از کد زیر استفاده کنید :

ffffff#

برای نمایش رنگ سیاه از کد زیر استفاده کنید :

#000000

ممکن است در بعضی از کد های رنگ شما تنها سه رقم را از 0 تا F ببینید. به عنوان مثال :
خروجی همان رنگ است.

مثالی از کد رنگ HEX هشت رقمی

استفاده از کد رنگ RGB :

کد رنگ RGB از سه پارامتر تشکیل شده است. قرمز، سبز و آبی. هر یک از پارامتر ها از بازه 0 تا 250 هستند. به صورت زیر نوشته می شوند :

rgb(red,green,blue)

برای تولید رنگ سفید مقدار زیر را وارد کنید : rgb(255,0,0)

برای تولید رنگ سیاه مقدار روبرو را وارد کنید : rgb(0,0,0)

برای تولید رنگ سفید همه پارامتر ها را روی 255 تنظیم کنید : rgb(255,255,255)

برای درک بهتر مثال زیر را ببینید :

استفاده از کد رنگ RGBA :

همانند کد رنگ RGB است. با این تفاوت که می توانید در این قسمت میزان شفافیت رنگ خود را مشخص کنید. در دو قسمت قبل گفتیم که برای تعیین میزان شفافیت بهتر است از RGBA استفاده کنید. A کانال آلفا (alpha) است. بازه تعریف شده آن، از 0.0 تا 1.0 است. 1.0 رنگ کامل است و شفافیتی ندارد. 0.0 رنگ بسیار شفاف هست، در حدی که قابل دیدن نیست.

به روش های زیادی می توانیم شفافیت رنگ ها را تعریف کنیم. مثل opacity، transparent و filter . کد رنگ rgba هم یکی از روش های تعیین میزان شفافیت است.

rgb(red,green,blue,alpha)

استفاده از کد رنگ HSL :

HSL هم یکی دیگر از انواع کد های رنگ موجود در CSS است. H مخفف کلمه Hue به معنای رنگ است. بازه مقدار آن از درجه است و از 0 تا 360 تعریف می شود. S مخفف کلمه Saturation به معنای میزان اشباع است. بازه تعریفی آن درصد است. صفر درصد رنگ خاکستری و صد درصد رنگ کامل را نشان می دهد. L مخفف کلمه lightness است. بازه مقداری آن درصد است. 0 درصد سیاه و هر چه به 100 درصد نزدیک می شود، رنگ آن به سفید تغییر می کند.

این نوع کد رنگ را به صورت زیر می نویسند :

hsl(hue,saturation,lightness)

استفاده از کد رنگ HSLA :

همانند کد بالا است. تنها تفاوت آن اضافه شدن کانال آلفا می باشد. در واقع میزان شفافیت رنگ ما را تنظیم می کند. بازه تعریف شده آن، از 0.0 تا 1.0 است. 1.0 رنگ کامل است و شفافیتی ندارد. 0.0 رنگ بسیار شفاف هست، در حدی که قابل دیدن نیست.

hsl(hue,saturation,lightness,alpha)

امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.