آموزش CSS – آشنایی با رنگ ها در سی اس اس (CSS) (جلسه ۲۵)

در سی اس اس به طور کلی ۱۴۰ رنگ استاندارد وجود دارد که در ادامه با آن ها آشنا خواهیم شد:

css_pre-defined_colors

در حین استفاده از این رنگ ها به خاطر داشته باشیم که به حروف کوچک و بزرگ نام رنگ ها توجه داشته باشیم.
نکته ای که در مورد این رنگ ها وجود دارد این است که تعداد آن ها محدود بوده و مسلماً رنگ های مد نظر ما را شامل نخواهد شد. برای این منظور از مقادیر Hexadecimal می توان استفاده نمود. به طور کلی این مقادیر شامل سه سری عدد دوتایی است که دو عدد اول نشانگر قرمز، دو عدد دوم نشانگر سبز و دو عدد سوم نشانگر آبی هستند. مقادیری که برای این اعداد می توان در نظر گرفت ۱۶ گزینه است که از صفر تا عدد نه شروع شده سپس از حرف a تا حرف f ادامه می یابند (شاید کمی عجیب به نظر برسد اما با توضیحاتی که در ادامه خواهد آمد به طور حتم این مسئله روشن تر خواهد شد).
اگر جایگاه اول را به عدد صفر اختصاص دهیم، پس عدد نه جایگاه دهم را به خود اختصاص خواهد داد و حرف a جایگاه یازدهم، حرف b جایگاه دوازدهم، حرف c جایگاه سیزدهم، حرف d جایگاه چهاردهم، حرف e جایگاه پانزدهم و در نهایت حرف f جایگاه شانزدهم را به خود اختصاص خواهد داد و این در حالی است که عدد صفر ضعیف ترین مقدار و حرف f قوی ترین مقدار قلمداد می گردد (لازم به ذکر است که در مقادیر Hexadecimal هیچ فرقی مابین حروف بزرگ و کوچک وجود ندارد اما بهتر است که یا حروف بزرگ و یا حروف کوچک را مد نظر قرار داده و در کدهای خود همواره آن را مورد استفاده قرار دهیم).
برای استفاده از مقادیر Hexadecimal همواره می بایست از علامت # استفاده کنیم که در برنامه نویسی اصطلاحاً به آن Pound Sign یا Hash Mark می گویند. حال ترتیب یک رنگ به صورت rrggbb# است. در واقع دو مقدار اول (rr) مسئول نگهداری مقادیر قرمز هستند (حرف r ابتدای Red به معنی “قرمز” است).  اگر مقدار این دو را معادل با ff قرار دهیم این بدان معنا است که می خواهیم رنگ مد نظر ما صد درصد حاوی رنگ دانه های قرمز باشد. مقادیر (gg) مسئول نگهداری رنگ سبز هستند (حرف g ابتدای Green به معنی “سبز” است). فرض کنیم در رنگی که قرار است بسازیم می خواهیم هیچ رنگدانه سبزی وجود نداشته باشد بنابراین مقدار آن را برابر با ۰۰ قرار می دهیم. مقادیر (bb) هم همانطور که از نام آن پیدا است مسئول نگهداری رنگ آبی هستند (حرف b ابتدای کلمه Blue به معنی “آبی” است). مجدد مقدار آن را نیز برابر با ۰۰ قرار می دهیم. به طور کلی رنگ مد نظر ما می بایست به صورت ff0000 # باشد. به طور خلاصه این رنگ حاوی صد درصد رنگ قرمز است و رنگ های سبز و آبی به هیچ وجه در آن استفاده نشده است. برای روشن تر شدن این مطلب کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>CSS Background Property</p>
   </body>
</html>

حال برای تغییر رنگ تگ <p> کدهای سی اس اس زیر را وارد ویرایشگر متن خود می کنیم:

p {
   background-color:#ff0000;
}

هم اکنون اقدام به اجرای فایل خود در مرورگر می نماییم:

css_color_1

می بینیم که رنگ قرمز برای رنگ پس زمینه این پاراگراف در نظر گرفته شده است. برای آنکه کمی بیشتر تمرین کرده باشیم، می خواهیم رنگ سبز ایجاد کنیم. می دانیم که دو مقدار وسطی مرتبط با رنگ سبز هستند پس کد فوق را به صورت ۰۰ff00 # تغییر می دهیم. به عبارت دیگر این رنگ جدید به هیچ وجه دارای رنگدانه های قرمز نخواهد بود اما کاملا حاوی رنگدانه های سبز است و رنگدانه آبی هم ندارد. این کد را داخل سند اچ تی ام ال خود می نویسیم:

p {
   background-color:#00ff00;
}

مجدد مرورگر را به روز رسانی می کنیم:

css_color_2

می بینیم که رنگ پس زمینه به سبز تغییر یافت. حال می خواهیم رنگ پیچیده تری ایجاد کنیم. در واقع می خواهیم رنگ جدید ما کمی رنگدانه قرمز داشته باشد بنابراین دو مقدار اول را معادل با ۴۴ قرار می دهیم و دو عدد مرتبط با رنگ سبز را برابر با ۰۰ قرار می دهیم زیرا قصد داریم رنگ جدید ما عاری از هرگونه رنگدانه سبز باشد و در نهایت عددی مثل ۷۷ را برای رنگ آبی در نظر می گیریم. در واقع رنگ جدید ما به صورت ۴۴۰۰۷۷ # در خواهد آمد. اگر پیش از تست کردن صفحه وب سایت خود بخواهیم رنگ به دست آمده را حدس بزنیم می توانیم به این شکل استدلال کنیم: کمی رنگ قرمز به علاوه کمی بیشتر رنگ آبی مساوی است با رنگ بنفش:

p {
   background-color:#440077;
}

مجدد مرورگر را به روز رسانی می کنیم:

css_color_3

به خاطر سپردن کدهای Hexadecimal کار بسیار پیچیده است چرا که با این روش می توان هزاران رنگ ساخت اما چنانچه به مکانیسم ساخت رنگ با این مقادیر تسلط پیدا کنیم به راحتی می توان رنگ دلخواه خود را ساخت. اما به عنوان یک قانون کلی می توان کد ffffff # را برای رنگ سفید و کد ۰۰۰۰۰۰ # را برای رنگ سیاه به خاطر سپرد. علاوه بر این دانستن این نکته خالی از لطف نیست که هرگاه هر دو مقدار یکی باشند می توان یکی از آنها را نوشت. به عبارت دیگر از آنجا که هر شش گزینه رنگ سفید یکی هستند می توان از هر دو گزینه یکی را به عنوان نماینده در نظر گرفت. بنابراین کد FFF # هیچ فرقی با کد FFFFFF # نمی کند و یا کد FF33DD # هیچ فرقی با کد F3D # نمی کند (به خاطر داشته باشیم که اگر از این شش عدد Hexadecimal از هر سه سری عدد هر دوی آن ها با یکدیگر یکی نباشند نمی توان آن ها را به طور خلاصه نوشت. به عبارت دیگر اگر رنگی به صورت FF23cd # باشد به هیچ وجه نمی توان آن را به صورت F23cd # نوشت).
لازم به ذکر است با چنین رویکردی می توان بیش از ۱۶ میلیون رنگ مختلف ایجاد کرد.
اگر بخواهیم از مقادیر Hexadecimal استفاده نکنیم، می توان از مقادیر مرتبط با رنگ های RGB استفاده کرد. برای این منظور کد سی اس اس (CSS) خود را به صورت زیر بازنویسی می کنیم:

<p>p {</p>
<p>   background-color:rgb(255, 0, 0);</p>
<p>}</p>

همانطور که در کد فوق می بینیم پس از علامت : دستور rgb را نوشته و داخل پرانتز مقابل آن سه مقدار را وارد می کنیم. لازم به ذکر است که عدد اول مرتبط با رنگ قرمز، عدد دوم مرتبط با رنگ سبز و عدد سوم مرتبط با رنگ آبی است. به خاطر داشته باشیم که برای این مقادیر می توان عددی از ۰ تا ۲۵۵ را انتخاب نمود به این صورت که عدد ۰ کمترین و عدد ۲۵۵ بیشترین است. علاوه بر این به جای اعداد از درصد هم می توان استفاده کرد. برای روشن شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:

p {
   background-color:rgb(100%, 0%, 0%);
}

این مقادیر هم دقیقاً نتایج کد قبل را ایجاد خواهند کرد و رنگ قرمز را برای پس زمینه در نظر خواهند گرفت:

css_color_1

علاوه بر مقدار rgb از مقدار rgba هم می توان برای انتخاب رنگ در سی اس اس (CSS) استفاده کرد. حرف a مخفف واژه alpha است که این وظیفه را دارا است تا مقدار شفافیت رنگ را مشخص سازد. مقداری که برای آلفا می توان در نظر گرفت عددی مابین ۰.۰ تا ۱.۰ است به طوری که عدد ۰.۰ کاملاً شفاف است و اگر عدد ۱.۰ را در نظر بگیریم، رنگ مد نظر به طور کامل نشان داده خواهد شد. برای روشن شدن این مسئله کد فوق را به صورت زیر بازنوسی می کنیم:

p {
   background-color:rgba(255, 122, 176, 0.6);
}

فایل را در مرورگر اجرا می کنیم:

css_color_4

علاوه بر این می توان از مقادیر hsl هم برای انتخاب رنگ استفاده کرد. کاربرانی که تجربه کار با نرم افزار فتوشاپ را داشته باشند ممکن است با hsl آشنایی داشته باشند. حرف h مخفف hue به معنی “رنگ” است که می تواند مقداری از ۰ تا ۳۶۰ داشته باشد، حرف s مخفف واژه saturation به معنی “اشباع” است که مقدار از ۰ تا ۱۰۰ درصد می تواند داشته باشد و در نهایت حرف l مخفف کلمه lightness به معنی “میزان روشنایی” است که می توان مقداری از ۰ تا ۱۰۰ درصد داشته باشد.
Hue برای انتخاب رنگ است که عددی انتخابی برای آن مرتبط با رنگی روی چرخه رنگ خواهد بود بطوریکه رنگ قرمز ۳۶۰ است، آبی ۲۴۰ است، سبز ۱۲۰ است و دیگر رنگ ها مثل زرد، نارنجی، بنفش و … در میان این رنگ ها قرار دارند.
Saturation مقدار غلظت رنگ را مشخص می سازد بطوریکه مقدار ۱۰۰ رنگی کاملاً اشباع را نشان می دهد و مقدار ۰ رنگی خاکستری را نشان می دهد.
Lightness مقدار روشنایی رنگ مد نظر را مشخص می سازد. برای درک بهتر نحوه به کارگیری کدهای hsl در سی اس اس، کدهای سی اس اس فوق را به صورت زیر بازنویسی می کنیم:

p {
   background-color:hsl(120,65%,75%);
}

حال مرورگر خود را به روز رسانی می کنیم:

css_color_5

همانند rgba در مورد hsl هم می توان مقدار آلفا را به آن افزوده و به صورت hsla استفاده نمود. برای روشن شدن این مسئله، کد فوق را به صورت زیر تکمیل می کنیم:

p {
   background-color:hsla(120,65%,75%, 0.6);
}

مجدد مرورگر را به روز رسانی می کنیم:

css_color_6

برای مشاهده تاثیر آلفا می توان مقادیر مختلفی از ۰.۰ تا ۱.۰ را وارد کد خود کرده و تاثیر آن را مشاهده نمایید.
به طور کلی از ابزارهای متفاوتی برای ایجاد رنگ می توان استفاده کرد. برای مثال یکی از ابزارهای رایگان تحت وب که برای ساخت رنگ می توان از آن استفاده کرد سایت kuler.adobe.com است که توسط شرکت بزرگ ادوبی توسعه داده شده است. کاربران با استفاده از این سایت می توانند علاوه بر ساخت رنگ، به رنگ های مکمل رنگ مد نظر خود نیز دست پیدا کنند. در این سایت علاوه بر ساخت رنگ های دلخواه می توان از کتابخانه رنگ های پیش ساخته نیز استفاده کرد. خروجی رنگ های بدست آمده در قالب مقادیر Hexadecimal، rgb، cmyk و lab در معرض دید کاربران قرار می گیرد. علاوه بر این سایت از نرم افزارهای ویرایش تصاویر همچون فتوشاپ نیز برای یافتن کدهای مورد استفاده در سی اس اس (CSS) می توان استفاده نمود.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)