CSS Renkler – Web Tasarım & Programlama
CSS Web Tasarım

CSS Renkler

Bir web sayfasının görünümüyle oynayacaksanız, doğru yapmanız gereken en önemli işlerden biri renktir. Metni, arka planı, sınırını ve daha fazlasını içeren web sitemizin, renklerini değiştirebiliriz. Doğru renk düzenini elde etmek sayfalarımızın görünümünü önemli ölçüde etkileyebilir. Çeşitli biçimlerde renk değerlerinizi belirtebilirsiniz. Renkler;

  • Önceden Tanımlı Renk Adları
  • RGB
  • HEX
  • HSL
  • RGBA
  • HSLA

değerleri kullanılarak belirtilir.

1-HTML ile bir renk, önceden tanımlanmış adı kullanarak belirtilebilir;

HTML’de isimlendirilmiş 140 civarında renk tanımı vardır. Bu renklerden birini kullanmak için tanım adını vermeniz yeterlidir.

Yukarıdaki örnekte <h1> etiketlerinin background-color özelliğine renklerin adlarının uygulandığını görebilirsiniz.

2-RGB Değerleri ile Çalışmak

HTML’de, bir renk aşağıdaki formülü kullanarak bir RGB değeri olarak belirtilebilir:

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

Her parametre (kırmızı, yeşil ve mavi) 0 ile 255 arasındaki rengin yoğunluğunu 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), diğerleri 0’a ayarlanmıştır. Siyah rengi görüntülemek için, tüm renk parametrelerinin rgb (0, 0, 0) olarak ayarlanması gerekir. Beyaz rengi görüntülemek için, tüm renk parametrelerinin 255 olarak ayarlanması gerekir: rgb (255, 255, 255)

Yukarıdaki örnekte farklı RGB değerleri ile renk gösterimi yapılmıştır.

3-HEXADECIMAL (Onaltılık) Sayı Olarak Renk Değerleri

Onaltılık, bir rengin 6 basamaklı bir temsilidir.

rrggbb

Her onaltılık kodu ‘#’ işareti ile birlikte belirtilmelidir.

İlk iki rakam (RR) kırmızı bir değeri temsil eder, sonraki ikisi yeşil bir değerdir (GG) ve sonuncusu mavi değerdir (BB).

Her renk birimi 00 ile ff arasındaki onaltılık değerler olabilir.(ondalık 0-255 ile aynıdır).

Ö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.

Onaltılık bir değer, Adobe Photoshop, Jasc Paintshop Pro gibi herhangi bir grafik yazılımından veya hatta Gelişmiş Paint Fırça kullanılarak alınabilir.

Yukarıdaki örneğimizde onaltılık (hexadecimal) değerler kullanılarak çeşitli renk gösterimi yapılmıştır.

4-HSL Değeri Kullanımı

Renkleri temsil etmenin başka bir yolu da HSL‘dir.

hsl ( ton , doygunluk , hafiflik )

Ton, renk çarkı üzerinde bir dereceye kadar baz rengi belirtir. Kırmızı 0 °, yeşil 120 °, mavi 240 ° ve nihayetinde yine 360 ​​° döndürür.

Ardından , rengin ne kadar canlı olduğu Doygunluğu belirtiyoruz . Tam canlılık 100 ve donuk veya gri olan 0 arasında bir değere sahiptir.
Son olarak Parlaklık veya açıklık belirtiyoruz. Siyaha eğilimli olan 0 ile beyaza eğilimli olan 100 arasında bir değere sahiptir.

Yukarıdaki örnekte HSL değerleri üzerinden farklı renk gösterimi yapılmıştır.

5-RGBA Değeri

RGBA renk değerleri, RGB değerinin yanı sıra bir rengin opaklığını (şeffaflığı) belirleyen bir alfa kanalının eklenmesiyle belirtilir. Bir RGBA renk değeri aşağıdaki şekilde tanımlanır:

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

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

Yukarıdaki örnekte RGBA değerleri kullanılarak farklı renk gösterimi yapılmıştır.

6-HSLA Değeri

HSLA renk değerleri, HSL değerine sahip bir rengin opaklığını belirleyen bir alfa kanalı ile birlikte belirtilir. Bir HSLA renk değeri aşağıdaki şekilde tanımlanır:

hsla ( ton, doygunluk , açıklık, alfa )

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

Yukarıdaki örnekte HSLA değerleri kullanılarak farklı renk gösterimi yapılmıştır.

1 Yorum

Yorum yap