CSS Dersleri 3: Renklerin Kullanımı

CSS Dersleri 3: Renklerin Kullanımı

Merhaba,

CSS derslerimize css’de kullanılan renkler ile devam ediyoruz. Bu dersimizde ise CSS’de Renklerin Kullanımı sizlere anlatmaya çalışacağım.

Daha önce CSS ders yazılarına aşağıda ki bağlantılarla ulaşabilirsiniz.

  1. CSS Dersleri 1: CSS Nedir ?
  2. CSS Dersleri 2: Söz Dizim Kuralları ve Seçiciler

CSS’de Renk Özellikleri

HTML elementlerine renk vermek için, element özelliklerine göre CSS’de kullanılan bazı renk tanımlayıcı özellikler vardır.Örneğin yazılara renk vermek için color özelliği kullanılır.Elementlere arka plan rengi vermek için background-color veya background özelliği kullanılır.Elementlerin kenarlıklarına renk vermek için border-color veya border özelliği kullanılır.

Renk tanımlaması yapmak için kullandığımız bu özellikler kullanılacağı yere göre değişiklik göstermektedir.Ama alabildikleri değerler hemen hemen aynıdır.Bu aldıkları değerlere CSS renk atama yöntemidenir.CSS de genel olarak renk tanımlaması için 3 yöntem vardır.

  1. Renk isimlerine göre
  2. Hex yöntemine göre
  3. RGB yöntemine göre

Tek tek bu 3 farklı renk tanımlaması yöntemini örnekler ile açıklamaya çalışacağım.

CSS’de Renklerin Kullanımı

Renklerin Kullanımı
Renklerin Kullanımı

1.Renk İsimlerine Göre

HTML ve CSS de isimlerine göre tanımlı 140 tane renk bulunur.Tanımlı renk isimleri renklerin ingilizce karşılığıdır.Color özelliğine bu isimlerden birini yazdığınızda o rengi oluşturursunuz.Mesela ingilizce de “blue” mavi demektir.

[syntax type=”css”]
p {
  color: blue;
}
[/syntax]

Bir metine mavi renk vermek isterseniz { color: blue; } yapmanız yeterlidir.Burada blue veya Blue ifadeleri de aynı işlemi yapar.

İsimlerine göre tanımlı bütün renkleri görmek için buraya bakabilirsiniz.

2.HEX Yöntemine Göre

Hexademical (on altılık) sayı sistemine göre renk oluşturma yöntemidir.Yazım kuralında Kırmızı,Mavi ve Yeşil renkler 2 basamakta temsil edilir. #KKYYMM, KK(Kırmızı renk alanı), YY(Yeşil renk alanı), MM(Mavi renk alanı).

Her renk 00 ile FF arasında temsil edilir.Rengin bulunduğu alana 0 verirseniz o renkten hiç bulunmaz, F verirseniz o rengi en yüksek derece kullanmış olursunuz.

[syntax type=”css”]
p {
  color: #FF0000;
}
[/syntax]

Burada kırmızı rengi F ile tanımlarken Yeşil ve Mavi renge 0 verip kullanmamış olduk.Hexademical yazım kuralı : 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F şeklindedir.

En sık ve en çok kullandığımız yöntem bu yöntemdir. HEX yöntemi en çok kullanılan vede bilinen yöntemlerden bir tanesidir.

Bir diğer yöntemimiz olan RGB yönteminide aşağıda açıkladım.

3. RGB Yöntemine Göre

Genelde renklerde opacity(şeffaflık) verileceği zaman bu yöntem kullanılır.Kırmızı(R),Yeşil(G) ve Mavi(B) renklerinin baş harflerinin kısaltmasıdır.HEX yönteminden farklı olarak burada renkler 0 ile 255 arasında değer alır.0 değeri yine o rengi yok sayar.255 değeri o rengin en fazla alabileceği değerdir.

[syntax type=”css”]
p {
  color: rgb(255, 0, 0);
}
[/syntax]

Birde şeffaflık vermek için sonuna alpha(a) değeri eklenebilir.Alpha değeri 0-1 arasında değer alır.

[syntax type=”css”]
p {
  color: rgba(255, 0, 0, 0.5);
}
[/syntax]

Son olarak pek kullanılmasada ihtiyaç durumunda ya da özel durumlarda kullanılan bir yöntem daha mevcuttur. Buna HSL yöntemi deniyor. Ders yazısını bitirmeden önce bu yöntemide kısaca açıklayıp bu CSS dersimizide noktalayalım.

4. HSL Yöntemine Göre

Hue (renk),Saturation(doygunluk) ve Lightness(parlaklık) ifadelerin kısaltması olan bu yöntem de ise bir rengin parlaklık ve doygunluğunu değiştirebiliriz.

[syntax type=”css”]
p {
  color: hsl(360, 50%, 50%);
}[/syntax]
Kısa ve öz olarak CSS’de Renklerin Kullanımı nasıl olduğunu, hangi yöntemlerin kullanıldığını ve amaçlarının ne olduğunu örnek vererek açıklamaya çalıştım. Umarım faydalı olmuştur, esen kalın 🙂

Trackback: CSS’de Renklerin Kullanımı

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir