رنگ ها در داخل دستورات css

از رنگها همه جا استفاده می کنیم، در اصل زندگی بدون رنگ خیلی عجیب و بی مزه خواهد بود! حتما در داخل فایل های اچ تی ام ال هم نیاز داریم که با رنگ ها کار کنیم و عناصر مختلف را با رنگ های متفاوت نمایش دهیم. در داخل دستورات css روش های مختلفی برای مشخص کردن رنگها وجود دارد، که آن را به 3 دسته تقسیم بندی می کنیم:

1. استفاده از یک رنگ با یک نام خاص؛ مثل red
2. یک مقدار بر اساس مقادیر RGB مثل: rgb(255,0,0)
3. یک مقدار بر اساس مبنای 16، مثل: #ff0000

نشانه گذاری رنگ بر اساس نام
به راحتی می توان یک رنگ را بر اساس نام تعریف شده برای آن رنگ مشخص کرد:

p { color: red; } /* رنگ پاراگراف قرمز خواهد بود */

رنگ های مورد استفاده در اچ تی ام ال و css شامل 140 رنگ استاندارد هستند که تقریبا همه مرورگرها از آن پشتیبانی می کنند؛ رنگهایی مثل white, lime, olive... .
نشانه گذاری رنگ بر اساس مقادیر هگزادسیمال
برای دسترسی به مجموعه رنگها به صورت کامل می توان مقادیر R, G, B را به صورت مجزا مشخص کرد. هر قسمت از سه جزء رنگی ذکر شده(r, g, b) شامل یک عدد دو رقمی هگزادسیمال(مبنای 16) است، و تمام عدد شش رقمی با پیشوند # مشخص می شود. هگزادسیمال یعنی اعداد مبنای شانزده، بنابراین اعداد مجاز شامل 0 الی 9 و حروف A الی Fخواهند بود. هر مجموعه red-green-blue می تواند در بازه 00 الی FF باشند، یا همان 0-255 در نشانه گذاری مبنای 10 (اعداد عادی). بر این اساس به طور کلی 16 میلیون رنگ وجود دارند:

p { color: #FF0000; } /* red:255, green:0, blue:0 */

ممکن است این روش مشخص کردن رنگ ها پیچیده به نظر بیاید، البته که هست! اما در عین حال دقیق ترین و موجزترین روش ارائه رنگ ها است و از طرف دیگر همه مرورگرها از آن پشتیبانی می کنند– پس می تواند به عنوان بهترین روش برای تعیین رنگها از آن استفاده کرد. یک راه ساده برای به دست آوردن مقدار هگزادسیمال رنگ مورد نظر شما، استفاده از یک نرم افزار طراحی گرافیک مثل فوتوشاپ (Photoshop) است؛ با چنین نرم افزارهایی می توانید به راحتی مقادیر هگزادسیمال مورد نظر خود را پیدا کنید و کد مربوط به هر عدد را کپی کنید و در داخل فایل css خود از آن استفاده کنید.
این نکته را هم در نظر داشته باشید که مقادی مبنای 16 نسبت به کوچک و بزرگ بودن حروف حساس نیستند.
نشانه گذاری رنگ بر اساس مقادیر rgb
تابع rgb() مقدار رنگ را بر اساس سه مقدار رنگ های قرمز (r)، سبز (g)، و آبی(b) مشخص می کند. مقدار مربوط به هر کدام از رنگ ها می تواند عددی بین 0 تا 255 یا بر اساس درصد باشد.

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

نشانه گذاری بر اساس مقادیر rgb از نظر دقت همانند نشانه گذاری بر اساس مقادیر هگزادسیمال است. معمولا برای طراحان روش هگزادسیمال بیشتر ترجیح داده می شود، به خاطر اینکه روش هگزادسیمال کوتاه تر است و به راحتی می توان مقادیر هگزا را در یک مرحله از یک نرم افزار طراحی گرافیک کپی کرد– برای رنگ های rgb باید عدد مربوط به هر رنگ را جداگانه کپی کرد.
با استفاده از مقادیر مشابه برای سه گزینه r, g, b می توانیم سایه های خاکسری را ایجاد کنیم. مثلا rgb(0,0,0) یعنی رنگ سیاه و rgb(128,128,128) سایه میانی خاکستری و rgb(255,255,255) رنگ سفید است.
توجه داشته باشید که در css3دو روش دیگر نیز وجود دارند: HSL و RGBa که بعدا این دو روش نیز توضیح داده خواهند شد.