رنگ در css

منظور از تعیین رنگ این است که با استفاده از ویژگی هایی رنگ های صفحه و محتویات درون آن را مشخص می‌کنند، به صفحات رنگ بدیم و باعث زیبایی صفحاتمان شویم.

یکی از مهمترین و پرکابرد ترین ویژگی‌ها در css رنگ‌ها می باشد.

شما می‌توانید به یک متن رنگ دلخواهی را بدهید و یا مرز (border) آن را رنگ بدهید و یا پشت زمینه را.

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

مقادیر رنگ ها در css

در HTML، رنگ ها نیز می توانند با استفاده از مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر RGBA و مقادیر HSLA مشخص شوند.

همانند نام رنگ “گوجه فرنگی”:

رنگ فوق با شفافیت ۵۰% به صورت زیر است:

تابع ()rgb

تابع ()rgb از سه کلمه‌ی red،green و blue تشکیل شده و به شکل مقابل تعریف میشه:

rgb( red, green, blue)

این تابع بر اساس مقدار هرکدوم از این سه رنگ، رنگ عنصر مورد نظر ما رو تعیین می‌کنه. اجازه بدید با استفاده از ویژگی background-color که رنگ پس‌زمینه رو تعریف می‌کرد با این تابع بیشتر آشنا بشیم.

همون‌طور که مشاهده می‌کنیم این تابع هم با عدد ۲۵۵ که در جلسه قبل یاد گرفتیم سر و کار داره!

تفاوت تابع ()rgb با مقادیر HEX در اینه که مقدار تاریکی و روشنایی رنگ، در مبنای ۱۰ تعیین میشه. بنابراین نیاز نیست که برای تاریک کردن اثر یک رنگ یا روشن کردن اون، از 00 تا ff حرکت کنیم. 0 تاریک ترین حالت رنگ، و 255 روشن ترین حالت اون رنگ هست.

حالا رنگ های دیگه رو بررسی کنیم.

برای مثال، می‌دونیم که رنگ بنفش، مخلوط رنگ قرمز و آبی هست. اون رو می‌تونیم به فرم زیر نمایش بدیم.

نکته اینجاست که 255 روشن‌ترین حالت ممکنه. ما می‌تونیم با زیاد کردن مقادیر تابع، رنگ مورد نظرمون رو به روشن‌ بودن نزدیک‌تر کنیم.

نمونه‌های دیگه‌ای از این تلفیق رنگ‌ها توسط ()rgb رو می‌تونیم در پایین مشاهده کنیم.

ناگفته نمونه که با استفاده از تابع ()rgb، می‌تونیم به طیف رنگ‌ها بین سیاه و سفید هم دسترسی داشته باشیم.

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

مقدار RGBA

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

مقدار رنگ RGBA با فرمت زیر تعیین می شود:

**rgba(*red,* *green*, *blue, alpha*)**

پارامتر alpha در فرمت فوق می تواند مقداری بین ۰٫۰ (کمترین میزان شفافیت) و ۱٫۰ (بیشترین میزان شفافیت) را داشته باشد.

استفاده از کد رنگ‌ها ترکیبی

این روش ساده‌تر از روش قبلی است و در بین طراحان محبوبیت بیشتری هم دارد. در این روش کد رنگ نهایی یک عدد 6 رقمی در مبنای 16 (HexaDecimal) است که در کنار علامت # قرار می‌گیرد. هر رنگ به صورت #rrggbb و با دو عدد نشان داده می‌شود که مقادیر آن‌ها از 00 تا FF است. توجه کنید که منظور از رنگ در این بخش، تنها یکی از سه رنگ قرمز، سبز و آبی است که با R، G و B نشان می‌دهیم و رنگ دیگری نداریم زیرا بقیه رنگ‌ها از ترکیب آن‌ها ساخته می‌شوند.

ممکن است فرمت ترکیب شده از عدد و حرف برایتان کمی گیج کننده باشد پس بهتر است موضوع را واضح‌تر کنیم. هر کدام از سه رنگ بالا یک بایت (بایت سوم، بایت دوم، بایت اول) محسوب می‌شوند. هر بایت در در مبنای 16 با 00 تا FF و در مبنای 10 با اعداد بین 0 تا 255 نمایش داده می‌شود. اعدادی که مثلا در مبنای r باند شامل ارقامی از 0 تا r-1 هستند. اعداد در مبنای 16 نیز شامل ارقامی بین 0 تا 15 هستند که برای رفع ابهام در خواندن دورقمی‌ها، 10 تا 15 را با حروف A تا F نمادگذاری کرده اند. پس 15 رقم در این روش 0 1 2 3 4 5 6 7 8 9 A B C D E F هستند. به عنوان مثال می‌توان عدد 112 را به سه روش 1، 1 و 2 یا B2 و یا 1C تفسیر کرد.

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

مقدار RGBA

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

مقدار رنگ RGBA با فرمت زیر تعیین می شود:

**rgba(*red,* *green*, *blue, alpha*)**

پارامتر alpha در فرمت فوق می تواند مقداری بین ۰٫۰ (کمترین میزان شفافیت) و ۱٫۰ (بیشترین میزان شفافیت) را داشته باشد.

استفاده از کد رنگ‌ها ترکیبی

این روش ساده‌تر از روش قبلی است و در بین طراحان محبوبیت بیشتری هم دارد. در این روش کد رنگ نهایی یک عدد 6 رقمی در مبنای 16 (HexaDecimal) است که در کنار علامت # قرار می‌گیرد. هر رنگ به صورت #rrggbb و با دو عدد نشان داده می‌شود که مقادیر آن‌ها از 00 تا FF است. توجه کنید که منظور از رنگ در این بخش، تنها یکی از سه رنگ قرمز، سبز و آبی است که با R، G و B نشان می‌دهیم و رنگ دیگری نداریم زیرا بقیه رنگ‌ها از ترکیب آن‌ها ساخته می‌شوند.

ممکن است فرمت ترکیب شده از عدد و حرف برایتان کمی گیج کننده باشد پس بهتر است موضوع را واضح‌تر کنیم. هر کدام از سه رنگ بالا یک بایت (بایت سوم، بایت دوم، بایت اول) محسوب می‌شوند. هر بایت در در مبنای 16 با 00 تا FF و در مبنای 10 با اعداد بین 0 تا 255 نمایش داده می‌شود. اعدادی که مثلا در مبنای r باند شامل ارقامی از 0 تا r-1 هستند. اعداد در مبنای 16 نیز شامل ارقامی بین 0 تا 15 هستند که برای رفع ابهام در خواندن دورقمی‌ها، 10 تا 15 را با حروف A تا F نمادگذاری کرده اند. پس 15 رقم در این روش 0 1 2 3 4 5 6 7 8 9 A B C D E F هستند. به عنوان مثال می‌توان عدد 112 را به سه روش 1، 1 و 2 یا B2 و یا 1C تفسیر کرد.

تابع ()hsl

در این تابع ما به سه مقدار hue، saturation و lightness برمی‌خوریم که مسلما قبل از این آموزش، این واژه هارو هنگام ویرایش کردن عکس مشاهده کردیم. نحوه استفاده از این سه مقدار به چه شکل هست؟

hsl( hue, saturation, lightness )

منظور از Hue در تعیین رنگ با HSL

عبارت است از درجه رنگ‌بندی که می‌تونه مقادیر بین 0 و 360 رو شامل بشه. 0 برابر با قرمز، 120 برابر با سبز و 240 برابر با آبی هست. اعداد بین هرکدوم از مقادیر طیف رنگ بین دو رنگ متناظر رو در برمی‌گیرن. برای مثال، اعداد بین 120 و 240، عبارتند از طیف رنگ بین سبز و آبی.