اعمال رنگ به عناصر در CSS

رنگ یکی از قدرتمندترین ابزارهای طراحی سایت می باشد. رنگ می تواند برای جلب توجه، بیان معنا، ایجاد میل و حتی کسب وفاداری مشتری استفاده گردد. هنگامی که انتخاب رنگ ها به درستی انجام شود، می تواند بر نحوه تفسیر بازدیدکننده از آنچه که می بیند تأثیر گذار باشد و انتخاب مناسب آنها برای موفقیت وبسایت شما بسیار مهم است.

نحوه استفاده از رنگ ها در CSS

در CSS از خاصیت color برای تعیین رنگ عناصر استفاده می شود که مقدار آن را به چهار روش زیر می توان تعیین نمود.

نام رنگ

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

p{
    color: red;
}

RGB

RGB یکی از سیستم های تعیین رنگ می باشد که در آن تمامی رنگ ها از ترکیب سه رنگ قرمز، سبز و آبی تشکیل می شود. مقدار هر رنگ می تواند بین 0 تا 255 باشد.

rgb(red, green, blue)

مثال:

p{
    color: rgb(218,42,19);
}

حالت دیگری از rbg به نام rgba وجود دارد که در آن از 4 عدد استفاده می شود که عدد چهارم بیانگر میزان شفایت بوده و می تواند مقداری بین 0 تا 1 داشته باشد. 0 به معنی کاملا شفاف و 1 به معنی حالت عادی رنگ (بدون شفافیت) می باشد. هنگامی که یک عنصر شفاف باشد، عناصر زیری آن نیز قابل مشاهده خواهد بود.

p{
    color: rgba(189, 14, 130, 0.7);
}

HEX

یکی دیگر از روش های تعیین رنگ استفاده از کدهای هگزا دسیمال می باشد که شامل 6 کاراکتر می باشد (2 کاراکتر به ازای هر رنگ).

#rrggbb

مثال:

p{
    color: #ff6347;
}

HSL

در CSS می توان از ترکیب رنگ، اشباع و سبُکی نیز رنگ عناصر را تعیین نمود.

hsl(hue, saturation, lightness)

Hue می تواند مقداری بین 0 تا 360 داشته باشد که در چرخه رنگ ها (color wheel) وجود دارد و در آن 0 بیانگر قرمز، 120 بیانگر سبز و 240 نیز آبی می باشد.

Saturation یک مقدار درصدی می باشد که در آن 0% به معنی خاکستری و 100% به معنی رنگ کامل می باشد.

Lightness نیز یک مقدار درصدی بوده که در آن 0% به معنی سیاه، 50% رنگی بین سیاه و سفید و 100% رنگ سفید می باشد.

مثال:

p{
    color: hsl(86, 100%, 50%);
}

برای hsl نیز همانند rgb، حالت شفاف کننده وجود دارد که توسط دستور hsla قابل اعمال می باشد.

p{
    color: hsla(86, 100%, 50%, 0.6);
}

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

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
        #p1{
            color: orange;
        }
        #p2{
            color: rgb(128,0,128);
        }
        #p3{
            color: #00ff00;
        }
        #p4{
            color: hsl(0, 100%, 50%);
        }
    </style>
  </head>
  <body>
      <p id="p1">Paragraph 1</p>
      <p id="p2">Paragraph 2</p>
      <p id="p3">Paragraph 3</p>
      <p id="p4">Paragraph 4</p>
  </body>
</html>