CSS Yasal Renk Değerleri
CSS Renkleri
CSS'deki renkler aşağıdaki yöntemlerle belirlenebilir:
- Onaltılık renkler
- Saydamlık ile onaltılık renkler
- RGB renkleri
- RGBA renkleri
- HSL renkleri
- HSLA renkleri
- Önceden tanımlanmış/Çapraz tarayıcı renk adları
currentcolor
anahtar kelime ile
Onaltılık Renkler
Onaltılık bir renk şu şekilde belirtilir: #RRGGBB, burada RR (kırmızı), GG (yeşil) ve BB (mavi) onaltılık tam sayılar rengin bileşenlerini belirtir. Tüm değerler 00 ile FF arasında olmalıdır.
Örneğin #0000ff değeri mavi olarak işlenir, çünkü mavi bileşen en yüksek değerine (ff) ve diğerleri 00'a ayarlanmıştır.
Örnek
Farklı HEX renkleri tanımlayın:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Saydamlıkla Onaltılık Renkler
Onaltılık bir renk şu şekilde belirtilir: #RRGGBB. Saydamlık eklemek için 00 ile FF arasında iki ek rakam ekleyin.
Örnek
Şeffaflıkla farklı HEX renkleri tanımlayın:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
RGB Renkleri
Aşağıdaki sözdizimine sahip rgb() işleviyle bir RGB renk değeri belirtilir :
rgb(red, green, blue)
Her parametre (kırmızı, yeşil ve mavi) rengin yoğunluğunu tanımlar ve 0 ile 255 arasında bir tam sayı veya bir yüzde değeri (%0 ile %100 arasında) olabilir.
Örneğin, mavi parametre en yüksek değerine (255) ve diğerleri 0'a ayarlandığından rgb(0,0,255) değeri mavi olarak işlenir.
Ayrıca, şu değerler eşit rengi tanımlar: rgb(0,0,255) ve rgb(0%,0%,100%).
Örnek
Farklı RGB renkleri tanımlayın:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
RGBA Renkleri
RGBA renk değerleri, nesnenin opaklığını belirten bir alfa kanalıyla RGB renk değerlerinin bir uzantısıdır.
Aşağıdaki sözdizimine sahip rgba() işleviyle bir RGBA rengi belirtilir :
rgba(red, green, blue, alpha)
Alfa parametresi, 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir sayıdır.
Örnek
Opaklıkla farklı RGB renkleri tanımlayın:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
HSL Renkleri
HSL, renk tonu, doygunluk ve hafiflik anlamına gelir ve renklerin silindirik koordinat temsilini temsil eder.
Aşağıdaki sözdizimine sahip hsl() işleviyle bir HSL renk değeri belirtilir :
hsl(hue, saturation, lightness)
Ton, renk tekerleğindeki bir derecedir (0'dan 360'a kadar) - 0 (veya 360) kırmızı, 120 yeşil, 240 mavidir. Doygunluk bir yüzde değeridir; %0 bir gri tonu ve %100 tam renk anlamına gelir. Hafiflik de bir yüzdedir; %0 siyah, %100 beyazdır.
Örnek
Farklı HSL renkleri tanımlayın:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
HSLA Renkleri
HSLA renk değerleri, nesnenin opaklığını belirten alfa kanalına sahip HSL renk değerlerinin bir uzantısıdır.
Aşağıdaki sözdizimine sahip hsla() işleviyle bir HSLA renk değeri belirtilir :
hsla(hue, saturation, lightness, alpha)
Alfa parametresi, 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir sayıdır.
Örnek
Opaklıkla farklı HSL renkleri tanımlayın:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
Öntanımlı/Tarayıcılar Arası Renk Adları
140 renk adı, HTML ve CSS renk spesifikasyonunda önceden tanımlanmıştır.
Örneğin: blue
, red
, coral
, brown
, vb:
Örnek
Farklı renk adları tanımlayın:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
Önceden tanımlanmış tüm adların bir listesi Renk Adları Referansımızda bulunabilir .
Geçerli renk Anahtar Kelimesi
Anahtar currentcolor
kelime, bir elementin color özelliğinin değerini ifade eder.
Örnek
Aşağıdaki <div> öğesinin kenar rengi mavi olacaktır, çünkü <div> öğesinin metin rengi mavidir:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}