← Tüm rehberler

HEX, RGB ve HSL renk kodları nedir? Farkları ve dönüşüm

· 2 dk okuma

Web ve tasarımda aynı renk üç farklı biçimde yazılabilir: HEX, RGB ve HSL. Üçü de aynı rengi anlatır, ama farklı işlerde biri diğerinden daha rahat kullanılır.

RGB: ışığı karıştırmak

RGB, ekranların renk üretme yöntemini yansıtır: kırmızı, yeşil ve mavi ışığın karışımı. Her kanal 0 ile 255 arasında bir değer alır. 0 o ışığın hiç olmadığı, 255 tam parlaklık demektir.

rgb(255, 0, 0)     kırmızı
rgb(0, 0, 0)       siyah
rgb(255, 255, 255) beyaz
rgb(59, 130, 246) mavi bir ton

HEX: RGB'nin kısa yazılışı

HEX kodu aynı üç kanalı onaltılık sistemde, iki hane ile yazar. Önüne # konur. Altı haneyi ikişerli ayırırsan kırmızı, yeşil ve mavi kanalı bulursun.

#3b82f6
  3b → 59   (kırmızı)
  82 → 130  (yeşil)
  f6 → 246  (mavi)

= rgb(59, 130, 246)

Çiftleri aynı olan renkler 3 haneyle yazılabilir: #38f, #3388ff ile aynıdır. 8 haneli HEX son iki hanede saydamlık taşır.

HSL: insanın düşündüğü gibi

HSL rengi ton (hue), doygunluk (saturation) ve açıklık (lightness) olarak tanımlar. Ton 0-360 derecelik bir renk çemberindeki yerdir, doygunluk ve açıklık yüzdedir.

Aynı rengin biraz daha açık ya da soluk hâlini istediğinde HSL'de yalnızca bir sayıyı değiştirirsin. RGB ve HEX'te ise üç kanalı birden ayarlaman gerekir.

hsl(217, 91%, 60%)   yukarıdaki mavi
hsl(217, 91%, 40%)   aynı mavi, daha koyu
hsl(217, 30%, 60%)   aynı mavi, daha soluk

Hangisini ne zaman kullanmalı?

Üçü de tarayıcılarda aynı şekilde çalışır, seçim alışkanlığa kalır:

Kendin dene

HEX, RGB ve HSL dönüştürücüde bir kod yaz: üç biçim birden görünür ve tek tıkla kopyalanır. Renk kodu seçici ile ekrandaki bir rengi damlalıkla da alabilirsin. Hiçbir şey tarayıcından çıkmaz.

Bu yazı genel bilgilendirmedir.

Diğer rehberler