Merhaba,

Bu yazıda CSS’de renk birimlerini inceliyoruz. Renkler CSS’in en geniş alanlarından birini kapsar. Yazı renkleri, arka plan renkleri, renk geçişleri, gölgeler gibi bir çok alanda renk ayarı yapmamız mümkündür.

color özelliği CSS’de yazı rengi belirlemekte kullanılır. Ve farklı tiplerde değerler alabilir.

Renk Etiketleri

CSS 145 farklı renk ismini kullanmamıza olanak sağlar. Bu renkleri CSS Renk Etiketleri başlığından inceleyebilirsiniz. Kullanım şekli:

p{ color: red; }
a{ color: green; }

RGB Kullanımı

Monitörler, televizyonlar, cep telefonları gibi tüm ekranlar renkleri göstermek için RGB renk modelini kullanır. Bu sistemde tüm renkler R (Red – Kırmızı) – G (Green – Yeşil) – Y (Yellow – Sarı) renklerinin karışımından oluşur. Her biri (Kırmızı-Yeşil-Sarı) için bilgisayarların maksimum sayma sayısı olan 256 sayısında farklı değer vardır. (Bilgisayar saymaya 0 değerinden başladığı için en yüksek değer 255 olur.) Bu 3 rengin kombinasyonu ile de 256 x 256 x 256 = 16.777.216 farklı renk ortaya çıkar.

Kullanım Şekli:

p{ color: rgb(46, 106, 237); }

Buradaki her bir sayı değeri R-G-B renk değerlerini belirtir.

p{ color: rgb(255, 255, 255); }

Beyaz renk tüm değerlerin en yüksek değerde yani 255 kullanılmasıyla ortaya çıkar.

p{ color: rgb(0, 0, 0); }

Hepsi en düşük yani 0 değerinde kullanılırsa siyah ortaya çıkar.

RGBA Kullanımı

RGB renklerine 0 ile 1 arasında bir alfa değeri verilmesiyle rengin transparanlığı belirlenir.

p{ color: rgba(46, 106, 237, 0.5); }

HSL Kullanımı

Hue Saturation Lightness kelimelerinden oluşur.

Hue: 0 ile 360 arasında seçmek istediğiniz rengin değerini alır.

Saturation: %0 ile %100 arasında renk yoğunluğunu belirtir.

Lightness: %0 ile %100 arasında renk açıklığını belirtir.

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

HSL değerine de aynı RGBA ‘da olduğu gibi 0 ile 1 arasında alfa değeri eklenerek HSLA yani transparan görünüm elde edilebilir.

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

Hexadecimal

CSS’de renkler onaltılık değerler ile belirtilebilir. Hexadecimal sistem 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F olmak üzere 16 değer içerir. 

00 ile FF arasında değerler alan 3 bayttan oluşur. 

  1. Bayt kırmızı değeri
  2. Bayt yeşil değeri
  3. Bayt mavi değeri belirtir.

Ve ortaya çıkan sonuç:

p { color: #2e6aed; }

Eğer transparan bir kullanım yapılmayacaksa hexadecimal kullanım, özellikle kopyalanabilirlik açısından kullanım kolaylığı sağlar.