Renkler Eğitimi

Renkler KIRMIZI, YEŞİL ve MAVİ ışığı birleştirerek görüntülenir.


Renk İsimleri

CSS ile renkler, renk adları kullanılarak ayarlanabilir:

Örnek

Color Name
 Red
 Yellow
 Cyan
 Blue
 Magenta

CSS Renk Değerleri

CSS ile renkler farklı şekillerde belirtilebilir:

  • Renk adlarına göre
  • RGB değerleri olarak
  • Onaltılık değerler olarak
  • HSL değerleri olarak (CSS3)
  • HWB değerleri olarak (CSS4)
  • currentcoloranahtar kelime ile

RGB Renkleri

RGB renk değerleri tüm tarayıcılarda desteklenir.

Bir RGB renk değeri şu şekilde belirtilir: rgb( KIRMIZI , YEŞİL , MAVİ ).

Her parametre, rengin yoğunluğunu 0 ile 255 arasında bir tam sayı olarak tanımlar.

Örneğin, mavi parametre en yüksek değerine (255) ve diğerleri 0'a ayarlandığından rgb(0,0,255) mavi olarak işlenir.

Örnek

Color RGB Color
  rgb(255,0,0) Red
  rgb(0,255,0) Green
  rgb(0,0,255) Blue

Gri tonları genellikle 3 ışık kaynağının tümü için eşit değerler kullanılarak tanımlanır:

Örnek

Color RGB Color
  rgb(0,0,0) Black
  rgb(128,128,128) Gray
  rgb(255,255,255) White


Onaltılık Renkler

Onaltılık renk değerleri de tüm tarayıcılarda desteklenir.

Onaltılık bir renk şu şekilde belirtilir: # RR GG BB .

RR (kırmızı), GG (yeşil) ve BB (mavi), rengin yoğunluğunu belirten 00 ile FF arasında onaltılık tam sayılardır.

Örneğin, mavi bileşen en yüksek değerine (FF) ve diğerleri 00'a ayarlandığından #0000FF mavi olarak görüntülenir.

Örnek

Color HEX RGB Color
  #FF0000 rgb(255,0,0) Red
  #00FF00 rgb(0,255,0) Green
  #0000FF rgb(0,0,255) Blue

Gri tonları genellikle 3 ışık kaynağının tümü için eşit değerler kullanılarak tanımlanır:

Örnek

Color HEX RGB Color
  #000000 rgb(0,0,0) Black
  #808080 rgb(128,128,128) Gray
  #FFFFFF rgb(255,255,255) White

Büyük Harf veya Küçük Harf?

Onaltılık değerler belirtmek için büyük harf veya küçük harf kullanabilirsiniz.

Küçük harf yazmak daha kolaydır. Büyük harflerin okunması daha kolaydır.


Renk İsimleri

CSS, 140 standart renk adını destekler.

Bir sonraki bölümde, onaltılık değerlere sahip renk adlarının tam bir alfabetik listesini bulacaksınız:

Color Name Hex Color
AliceBlue #F0F8FF  
AntiqueWhite #FAEBD7  
Aqua #00FFFF  
Aquamarine #7FFFD4  
Azure #F0FFFF  
Beige #F5F5DC  
Bisque #FFE4C4  

Geçerli renk Anahtar Kelimesi

Anahtar currentcolorkelime, 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 */
}