CSS Renklendirme – Tasarım Kodlama
CSS

CSS Renklendirme

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

HTML’de, bir renk adı kullanılarak bir renk belirtilebilir:

 

Örnek:

Çıktı:

Arkaplan (Background) Renklendirme:

HTML öğeleri için arka plan rengini ayarlayabilirsiniz.Bu işlem için background-color özelliğine değer verilmelidir.

Örnek:

Ekran Çıktısı:

 

Metin Rengi (Text Color):

Sayfada bulunan metinler color özelliği kullanılarak değiştirilir.

Kenarlık (Border) Renklendirme:

Html sayfasında bulunan öğelerin kenarlıkları border-color özelliği kullanılarak renklendirilir.

 

CSS Renk Değerleri ile Çalışma:

HTML’de renkler RGB değerleri, HEX değerleri, HSL değerleri, RGBA değerleri ve HSLA değerleri kullanılarak da belirtilebilir.

Örnek:

Ekran Çıktısı:

 

RGB ile Renklendirme:

HTML’de, alttaki formül kullanılarak RGB değeri olarak bir renk belirtilebilir:

rgb (kırmızı, yeşil, mavi) 

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 (255) ayarlanır ve diğerleri 0 olarak ayarlanır.

Siyah rengi görüntülemek için tüm renk parametreleri 0 olarak ayarlayın, bunun gibi: rgb (0, 0, 0). 

Beyaz rengi görüntülemek için, tüm renk parametreleri şu şekilde 255 olarak ayarlanmalıdır: rgb (255, 255, 255). 

Aşağıdaki RGB değerlerini karıştırarak deney yapın:

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

Ekran Çıktısı:

HEX Değer ile Renklendirme

HTML’de, aşağıdaki şekilde onaltılık bir değer kullanılarak bir renk belirtilebilir:
#rrggbb 

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

Örneğin, FF0000 kırmızı olarak gösterilir, çünkü kırmızı en yüksek değerine (ff) ayarlanır ve diğerleri en düşük değere (00) ayarlanır.

Örnek:

CSS’ te HSL Değer ile Renklendirme:

HTML’de, bir renk ton, doygunluk ve açıklık (HSL) kullanılarak şu şekilde tanımlanabilir:

hsl (ton, doygunluk, hafiflik) 

Hue, renk tekerleğinde 0’dan 360’a kadar bir derecedir. 0 kırmızıdır 120, yeşil ve 240 mavi.

Doygunluk bir yüzde değeri,% 0 gri tonu anlamına gelir ve% 100 tam renklidir.

Işık da yüzde,% 0 siyah,% 50 açık veya koyu,% 100 beyaz.

Örnek:

 

Doygunluk (Saturation)

Doygunluk, bir rengin yoğunluğu olarak tanımlanabilir.

% 100 saf renktedir, gri

% 50’nin hiçbir gölgesi% 50 gri değildir, ancak yine de rengi görebilirsiniz.

% 0 tamamen gridir, artık rengi göremezsiniz.

Açıklık(Lightness)

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

Gri tonları genellikle tonu ve doygunluğu 0’a ayarlayarak tanımlanır ve daha koyu / açık tonları elde etmek için açıklığı% 0’dan% 100’e ayarlayın.

 

CSS RGBA Değeri ile Renklendirme Yapma:

RGBA renk değerleri, bir renk için opaklığı belirten bir alfa kanalı olan RGB renk değerlerinin bir uzantısıdır.

Bir RGBA renk değeri şu şekilde belirtilir:

rgba (kırmızı, yeşil, mavi, alfa) 

Alfa parametresi 0.0 (tamamen şeffaf) ve 1,0 (saydam değil) arasında bir sayıdır.

CSS HSLA Değeri ile Renklendirme:

HSLA renk değerleri, bir renk için opaklığı belirten bir alfa kanalı olan HSL renk değerlerinin bir uzantısıdır.

Bir HSLA renk değeri şu şekilde belirtilir:

hsla (ton, doygunluk, hafiflik, alfa) 

Alfa parametresi 0.0 (tamamen şeffaf) ve 1,0 (saydam değil) arasında bir sayıdır:

Yorum bırak