CSS Renkler (Colors)

CSS Renkler (Colors)

Renkler, önceden tanımlanmış renk adları veya RGB, HEX, HSL, RGBA, HSLA değerleri kullanılarak belirlenir.

CSS Renk Adları

CSS'de, önceden tanımlanmış bir renk adı kullanılarak bir renk belirtilebilir.

Daha fazla renk adına ulaşmak için buraya tıklayabilirsiniz.

CSS Arka Plan Rengi

Örnek Kodu:

<h1 style="background-color:DodgerBlue;">Merhaba Dünya!</h1>

CSS Metin Rengi

Merhaba Dünya!

Örnek Kodu:

<h2 style="color:Tomato;">Merhaba Dünya!</h2>

CSS Kenarlık Rengi

Merhaba Dünya!

Örnek Kodu:

<p style="border:2px solid Tomato;">Merhaba Dünya!</p>

CSS Renk Değerleri

CSS'de renkler RGB değerleri, HEX değerleri, HSL değerleri, RGBA değerleri ve HSLA değerleri kullanılarak da belirlenebilir.

Örnek, "Tomato" renk adıyla aynı kullanım:

Örnek, "Tomato" renk adıyla aynı kullanım, ancak %50 şeffaf.

Örnek Kodu:

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

CSS RGB Renkleri

Bir RGB renk değeri "KIRMIZI, YEŞİL ve MAVİ" ışık kaynaklarını temsil eder.

RGB Değeri

CSS'de bir renk, aşağıdaki formül kullanılarak RGB değer olarak belirlenir.

rgb(red, green, blue)

Her parametre (kırmızı, yeşil ve mavi), rengin yoğunluğunu 0 ile 255 arasında tanımlar.

Örneğin, rgb(255, 0, 0) kırmızı olarak görüntülenir, çünkü kırmızı en yüksek değerine yani (255) ulaşmıştır ve diğer renkler ise 0 olarak en düşük değelere çekilmiştir.

Siyahı görüntülemek için, tüm renk parametreleri şu şekilde 0'a rgb(0, 0, 0) ayarlanır.

Beyazı görüntülemek için tüm renk parametrelerini şu şekilde 255'e rgb(255, 255, 255) ayarlanır.

Örnekler:

RGBA Değeri

RGBA renk değerleri, bir rengin opaklığını belirten alfa kanalıyla RGB renk değerlerinin bir uzantısıdır.

Bir RGBA renk değeri aşağıdaki gibi belirtilir: 

rgba(red, green, blue, alpha)

Alfa parametresi, 0.0 (tamamen şeffaf) ile 1.0 (hiç şeffaf değil) arasında bir sayıdır.

CSS HEX Renkleri

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.

HEX Değeri

CSS'de, formda onaltılık bir değer kullanılarak bir renk belirtilebilir: #rrggbb

Burada rr (kırmızı), gg (yeşil) ve bb (mavi), 00 ve ff arasındaki onaltılık değerlerdir (ondalık 0-255 ile aynı).

Örneğin, kırmızı en yüksek değerine (ff) ve diğerleri en düşük değere (00) ayarlandığından #ff0000 kırmızı olarak görüntülenir.

3 Haneli HEX Değeri

Bazen CSS dosyasında 3 basamaklı bir hex kodu görebilirsiniz. Bu 3 haneli onaltılık kod, bazı 6 haneli onaltılık kodların kısaltmasıdır.

3 basamaklı onaltılık kod şu forma sahiptir: #rgb

Burada r, g ve b, 0 ile f arasında değerlere sahip kırmızı, yeşil ve mavi bileşenleri temsil eder.

3 basamaklı onaltılık kod, yalnızca her bir bileşen için her iki değer (RR, GG ve BB) aynı olduğunda kullanılabilir. Yani elimizde #ff00cc varsa, şu şekilde yazılabilir: #f0c.

Örnek:

body {
  background-color: #fc9; /* = #ffcc99 */
}

h1 {
  color: #f0f; /* =  #ff00ff */
}

p {
  color: #b58; /* =  #bb5588 */
}

CSS HSL Renkleri

HSL, ton, doygunluk ve hafiflik anlamına gelir.

HSL Değeri

CSS'de bir renk, ton, doygunluk ve açıklık (HSL) kullanılarak belirlenir. 

hsl(hue, saturation, lightness)

Ton, renk tekerleğinde 0 ile 360 ​​arasındaki bir derecedir. 0 kırmızı, 120 yeşil ve 240 mavidir.

Doygunluk bir yüzde değeridir, %0 bir gri tonu anlamına gelir %100 ise bir tam renktir.

Açıklık da bir yüzdedir, %0 siyahtır, %50 açık veya koyu değildir, %100 beyazdır.

Doygunluk

Doygunluk, bir rengin yoğunluğu olarak tanımlanabilir.  %100 saf renktir, gri tonu yoktur. %50, %50 gridir, ancak yine de rengi görebilirsiniz. %0 tamamen gri, artık rengi göremezsiniz.

Açıklık

Bir rengin açıklığı, renge ne kadar ışık vermek istediğiniz olarak tanımlanabilir, burada %0 ışık yok (siyah), %50 %50 ışık (ne karanlık ne açık) anlamına gelir %100 tam açıklık (beyaz) anlamına gelir.

Grinin tonlar genellikle ton ve doygunluk 0'a ayarlanarak ve daha koyu/açık gölgeler elde etmek için açıklığı %0'dan %100'e ayarlayarak oluşturulur.

HSLA Değeri

HSLA renk değerleri, bir rengin opaklığını belirten alfa kanalına sahip HSL renk değerlerinin bir uzantısıdır.

Bir HSLA renk değeri aşağıdaki şekilde belirtilir: 

hsla(hue, saturation, lightness, alpha)

Alfa parametresi, 0.0 (tamamen şeffaf) ile 1.0 (hiç şeffaf değil) arasında bir sayıdır:

Detaylı renk kodları ulaşmak veya kendi renklerinizi oluşturmak için buraya tıklayabilirsiniz.