رنگ ها در css

رنگ ها با استفاده از نام رنگ که به صورت پیش فرض در css تعریف شده اند و یا با ارزش های RGB، HEX، HSL، RGBA، HSLA تعریف شوند.

نام های رنگ :

یکی از روش های تعریف رنگ در HTML، استفاده از نام رنگ می باشد.

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

استفاده از RGB برای تولید رنگ :

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

rgb(red, green, blue)

هر پارامتر (قرمز، سبز و آبی) شدت رنگ را بین ۰ تا ۲۵۵ تعریف می کند. به عنوان مثال (۲۵۵,۰,۰)rgb به صورت قرمز نمایش داده می شود، چرا که قرمز به بالاترین مقدار آن (۲۵۵) و بقیه موارد ۰ تنظیم شده است. برای نمایش رنگ سیاه، تمام پارامترهای رنگ باید به ۰ تنظیم شود و برای نمایش رنگ سفید، تمام پارامترهای رنگ باید به ۲۵۵ تنظیم شود.

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

برای ایجاد سایه خاکستری اغلب با استفاده از مقادیر برابر برای تمام ۳ منبع نور تعریف می شود:

<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

استفاده از RGBA برای تولید رنگ :

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

rgba(red, green, blue, alpha)

پارامتر alpha یک عدد بین ۰٫۰ (کاملا شفاف) و ۱٫۰ است (کاملا کدر) :

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

استفاده از مقادیر HEX برای تولید رنگ :

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

#rrggbb

که دراین نوع تولید رنگ rr (قرمز)، gg (سبز) و bb (آبی) را تعیین می کند، مقادیر هگزادسیم بین ۰۰ و ff هستند (همانند decimal 0-255). به عنوان مثال، ff0000# به صورت قرمز نمایش داده می شود، زیرا قرمز به بالاترین مقدار (ff) تنظیم شده است و دیگر مقادیر به کمترین مقدار (۰۰) تنظیم شده اند.

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

#ff0000

#۰۰۰۰ff

#۳cb371

#ee82ee

#ffa500

#۶a5acd

استفاده از مقادیر HSL برای تولید رنگ :

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

hsl(hue, saturation, lightness)

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

بهترین ویرایشگرهای کد (بخش دوم)
شاید این مطلب را نیز بپسندید

saturation : یک مقدار درصدی است، ۰٪ به معنای سایه خاکستری است و ۱۰۰٪ رنگ کامل است.

Lightness : نیز یک مقدار درصدی است، ۰٪ سیاه است، ۵۰٪ بین روشن یا تاریک است، ۱۰۰٪ سفید است.

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

saturation را می توان برای شدت یک رنگ تعریف کرد. ۱۰۰٪ رنگ خالص است، بدون سایه خاکستری، ۵۰٪ خاکستری است، اما شما هنوز هم می توانید رنگ را ببینید و ۰٪ به طور کامل خاکستری است و شما دیگر نمی توانید رنگ را ببینید.

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Lightness یک رنگ را می توان به عنوان مقدار نور مورد نظر برای رنگ نشان داد، که ۰٪ به معنای هیچ نور (سیاه و سفید) نیست، ۵۰٪ به معنای ۵۰٪ نور (نه تاریک و نه روشن) ۱۰۰٪ به معنی نور کامل (سفید) است.

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

استفاده از مقادیر HSLA برای تولید رنگ :

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

hsla(hue, saturation, lightness, alpha)

پارامتر alpha یک عدد بین ۰٫۰ (کاملا شفاف) و ۱٫۰ است (کاملا کدر) :

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)