CSS Renk Kodları | Color Özelliği

HTML elementlerine renk vermek için CSS’de kullanın renk verme yöntemleri hangileridir? CSS renk kodları nasıl oluşturulur? bu derste bu soruların cevaplarını bulacaksınız.

Görsel algıyı oluşturan en büyük bileşenlerden biri renklerdir.Renkler olmadan farklılıkları anlamamız oldukça zordur.Bu yüzden renkler hayatın bütün alanında olduğu gibi web teknolojisinin de vazgeçilmezi arasına girer.Bu dersimiz de CSS renk kodu oluşturma ve HTML renk kodu ekleme konularına yer vereceğiz.

Herkesce malum ki doğada ana renkler Kırmızı, Sarı ve Mavi şeklindedir.Fakat CSS de renkler Kırmızı, Mavi ve Yeşil renklerin kombinlerinden oluşturulur.

CSS Renk Özellikleri

HTML elementlerine renk vermek için, elementlerin özelliklerine göre CSS de kullanılan bazı renk tanımlayıcı özellikler vardır.Mesela metinlere 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 aldıkları değerler aynıdır.Bu aldıkları değerlere CSS renk atama yöntemleri denir.CSS de genel olarak renk kodu eklemek için 3 yöntem kullanılır.

CSS Renk Kodları Oluşturma

  1. Renk İsimlerine Göre
  2. Hex Yöntemi
  3. RGB Yöntemi
  4. HSL Yöntemi (Özel durum yazının devamında açıklaması var)

Renk İsimlerine göre

HTML ve CSS de isimlerine göre tanımlı 140 tane renk bulunur.Tanımlı renkler ingilizce renk isimlerinden gelir.Mesela ingilizce de “red” kırmızı demektir.Kırmızı renk oluşturmak istersek red kelimesi kullanılır.

/* Renk isimlerine göre Kırmızı renk oluşturmak */

p {
  color: red;
}

Bir ifadeye kırmızı renk vermek isterseniz { color: red; } yapmanız yeterlidir.Burada Red veya RED ifadeleri de aynı işlemi yapar.Fakat uygun olan yazım şekli küçük harf kullanımıdır.

İsimlerine göre tanımlı renklerin tamamını görmek için buraya bakabilirsiniz.

HEX Yöntemi

CSS renk kodları oluşturmak için en çok tercih edilen yöntemdir.Bu hexademical (on altılık) sayı sistemine göre renk kodu oluşturma yöntemidir.Yazım kuralına göre Kırmızı, Mavi ve Yeşil renkler 2 basamakta temsil edilir.#KKYYMM ifadesinin açılımı 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 değeri verilirse o renkten hiç bulunmaz, F değeri verilirse o rengi en yüksek derece kullanmış oluruz.Bu iki basmaklı alana verilen sayı ve harf değerine göre diğer renkler oluşturulur.

/* HEX Yöntemi ile Kırmızı renk oluşturmak */

p {
  color: #FF0000;
}

Kırmızı rengi oluşturmak için KK kısmına F değeri 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 ifadelerini içermelidir.

 

RGB Yöntemi

Genelde renklerde opacity yani ş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 renk kodu oluşturmak için 0 ile 255 arasında değer kullanılır.0 değeri yine o rengi yok sayar.255 değeri o rengin en fazla alabileceği değerdir.

/* RGB Yöntemine göre Kırmızı renk oluşturmak */

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

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

/* RGB Yönteminde Kırmızı renge şeffaflık ayarı*/

p {
  color: rgba(255, 0, 0, 0.5);
}

HSL Yöntemi

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.

/* HSL Yöntemi ile Kırmızı renge doygunluk ve parlaklık vermek */

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

HTML elementlere stil oluşturmak istediğimiz zaman akla ilk gelen renkler konusudur.Elementlere özel farklı kullanım amacına göre renk özellikleri CSS’de mevcut.Daha önce CSS background dersinde elementlerin arka planına renk verebileceğimizden bahsetmiştik.Ama orada nasıl renk kodu oluşturacağımıza dair bilgi vermedik.

Bu dersimizde HTML elementlere CSS’de nasıl renk verilir, CSS ve HTML renk kodları nasıl oluşur gibi önemli konulara yer verdik.Aklınıza takılan herhangi bir yer olursa, yorum kısmında belirtmekten çekinmeyin.

Bütün CSS Dersleri için tıklayın

Bunları da beğenebilirsin