رنگ در CSS

رنگ در CSS ، به یکی از روش های زیر اعمال می شود:

نوشتن نام رنگ
RGB
HEX
HSL
RGBA
HSLA

رنگ در CSS بر اساس نام

در html این قابلیت وجود دارد که با استفاده از نام رنگ ها، آن ها را اعمال کنیم:

تعداد استاندارد رنگ در css صد و چهل عدد می باشد.

RGB

در html، یک رنگ می تواند با استفاده از RGB که مخفف کلمات (Red, Blue, Green) است، به دست آید. که هر کدام از این رنگ ها، مقداری بین ۰ تا ۲۵۵ است. به عنوان مثال (RGB(255,0,0 بیانگر رنگ قرمز است. زیرا مقدار Red=255 است و دو رنگ سبز و آبی هم صفر هستند.

برای بدست آوردن رنگ سیاه تمامی رنگ ها می بایست مقدار صفر داشته باشند: (RGB(0,0,0 و برای نمایش رنگ سفید تمامی مقادیر باید برابر ۲۵۵ باشند: (RGB(255,255,255.

در تصویر زیر، مثالهایی از رنگ در CSS آورده شده است:

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

HEX

در این روش انتخاب رنگ در CSS ، عبارت rrggbb# بیانگر رنگ است که rr رنگ قرمز، gg رنگ سبز و bb رنگ آبی را تعیین می کند. هر یک از این ها، مقداری بین ۰۰ تا ff را می تواند بگیرد. به عنوان مثال مقدار ff0000 # رنگ قرمز را به وجود می آورد. زیرا رنگ قرمز در بالاترین حد و دو رنگ سبز و آبی در پایین ترین حد خود هستند. به تصویر زیر توجه کنید:

و اگر هر سه مقدار، مساوی باشند، رنگ ها بین سیاه و سفید و خاکستری هستند:

HSL

می توان برای مشخص کردن رنگ در سی اس اس از hue (رنگ)، saturation (اشباع) و lightness (روشنی) استفاده کرد: (hsl (hue, saturation, lightness

hue مقدار رنگ در چرخه رنگ می باشد که مقداری بین ۰ تا ۳۶۰ می گیرد: صفر بیانگر رنگ قرمز، ۱۲۰ رنگ سبز و ۲۴۰ رنگ آبی را نشان می دهد:

saturation درصدی است بین صفر تا صد که مقدار صفر بیانگر سایه ای از خاکستری و صد، تماماً رنگ است.

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

Saturation

مقدار Saturation شدت رنگ را مشخص می کند:

۱۰۰ بیانگر رنگ خالص، بدون هیچ گونه سایه ای از خاکستری می باشد.

۵۰ یعنی ۵۰% خاکستری، اما شما هنوز قادر هستید رنگ اصلی را ببینید.

۰ یعنی کاملا خاکستری و رنگ اصلا مشخص نیست:

Lightness

Light به معنای روشنی می باشد و Lightness یعنی مقدار نوری که به یک رنگ خاص می دهیم. مقدار آن بین ۰% برای میزان صفر روشنی (رنگ سیاه) تا ۱۰۰% (رنگ سفید) متغیر است.

طیف های مختلف رنگ خاکستری را با دادن مقدار صفر به hue و saturation می سازیم و با تغییر در میزان Lightness، رنگ آن را روشن یا تیره می کنیم:

RGBA

این نوع رنگ در CSS برگرفته از RGB است با این تفاوت که خصوصیت شفافیت نیز به آن افزوده شده است:

(RGBA (Red, Green, Blue, Alpha

Alpha میزان شفافیت (transparency) را تعیین می کند که مقدار صفر یعنی کاملا شفاف و میزان ۱ یعنی بدون هیچ گونه شفافیتی:

HSLA

مانند RGBA، این نوع رنگ در سی اس اس نیز خصوصیت آلفا (شفافیت) را دارد. (hsla(hue, saturation, lightness, alpha که میزان صفر آلفا یعنی شفافیت کامل و مقدار ۱ آن یعنی بدون هیچ گونه شفافیتی: