TRENES

HTML Renk Kodu Hesaplama

HEX renk kodunu RGB ve HSL karşılıklarına dönüştürün.

Hazırlayan: Ahmet Tur · Kontrol eden: Kübra Yıldız · Güncelleme:

Ör. #0C6B5E

Sonucunuz burada görünecek

Bilgileri doldurun ve Hesapla'ya basın.

Web tasarımda renkler genellikle HEX kodla (ör. #0C6B5E) ifade edilir, ama CSS'te renk tanımlamanın RGB (kırmızı-yeşil-mavi) ve HSL (renk tonu-doygunluk-parlaklık) gibi başka biçimleri de vardır — üçü de aynı rengi farklı sayı sistemleriyle tarif eder.

HEX renk kodunu girin; RGB ve HSL karşılıklarını anında görün.

HTML Renk Kodu Hesaplama: adım adım örnek hesaplama

Örnek girdiler
HEX Renk Kodu
#1E88E5
  1. 1

    HEX kodunu normalleştir

    # kaldırılır; 3/4 haneli kısa yazım ikilenir (#1AF → #11AAFF, #1AF8 → #11AAFF88); büyük harf

    = #1E88E5

  2. 2

    Onaltılıktan onluğa: R, G, B

    Her 2 hane = 16 × ilk + ikinci (0–255)

    1E → 30 · 88 → 136 · E5 → 229 = rgb(30, 136, 229)

  3. 3

    Açıklık (L)

    r, g, b = değer ÷ 255 · L = (maks + min) ÷ 2

    (0,898 + 0,118) ÷ 2 = %51

  4. 4

    Doygunluk (S)

    d = maks − min · S = L > 0,5 ise d ÷ (2 − maks − min), değilse d ÷ (maks + min)

    0,78 ÷ (2 − 0,898 − 0,118) = %79

  5. 5

    Ton (H) ve HSL

    En büyük kanal R ise H = 60 × ((g − b) ÷ d); G ise 60 × ((b − r) ÷ d + 2); B ise 60 × ((r − g) ÷ d + 4)

    H = 208° = hsl(208, 79%, 51%)

Sonuç · HEX kodu#1E88E5
Renk kanalları (0–255)
  • Kırmızı (R)30
  • Yeşil (G)136
  • Mavi (B)229

Bilmeniz gereken: HEX ve RGB aynı rengin iki yazımıdır; HSL ise tonu (0–360°), doygunluğu ve açıklığı ayırdığı için renk paletinde "aynı tonun açığı/koyusu"nu üretmek için daha pratiktir. Yuvarlama nedeniyle HSL → HEX geri dönüşünde ±1 fark olabilir. 8 haneli kodun (#RRGGBBAA) son iki hanesi alfa kanalıdır: 80 ≈ %50 opaklık.

HTML Renk Kodu nasıl hesaplanır?

HEX'ten RGB'ye

HEX kod, rengi kırmızı-yeşil-mavi bileşenlerinin her biri için 00-FF (0-255) arasında iki basamaklı onaltılık (hexadecimal) sayılarla ifade eder; bu üç değer doğrudan RGB gösterimine (0-255 aralığında ondalık sayılar) çevrilir.

RGB'den HSL'ye

HSL, aynı rengi farklı bir mantıkla tarif eder: renk tonu (hue, 0-360 derece renk çemberinde konum), doygunluk (saturation, %0 gri - %100 canlı renk) ve parlaklık (lightness, %0 siyah - %100 beyaz). RGB değerlerinden matematiksel bir dönüşümle hesaplanır.

Kısaltılmış (3 haneli) HEX

Bazı HEX kodları kısaltılmış 3 haneli biçimde yazılır (ör. #0C6 gibi); bu durumda her hane kendisiyle ikilenerek (0→00, C→CC, 6→66) 6 haneli tam forma genişletilir, dönüşüm ondan sonra yapılır.

Saydamlıklı (4/8 haneli) HEX

#RRGGBBAA biçimindeki 8 haneli kodlarda (ve 4 haneli kısa yazımı #RGBA'da) son iki hane alfa (opaklık) kanalıdır. Araç bu kanalı ayrıca verir: değer ÷ 255 (0–1) ve yüzde olarak opaklık, yanında rgba() karşılığı. Örneğin #0C6B5E80'de 80 = 128 → 128 ÷ 255 = 0,502, yani %50,2 opaklık.

Örnek hesap

Kalkoro'nun marka rengi #0C6B5E, RGB'de rgb(12, 107, 94)'e, HSL'de hsl(172, 80%, 23%)'e karşılık gelir.

Sık sorulan sorular

HEX, RGB ve HSL hangi durumda hangisi tercih edilir?+

HEX, tasarım dosyalarında ve CSS'te en yaygın kısa yazımdır; RGB, rengi bileşen bileşen (ör. kırmızıyı artırmak) değiştirmek isteyenler için sezgiseldir; HSL ise "aynı tonu daha koyu/açık yap" gibi ayarlamalarda daha kullanışlıdır.

3 haneli kısa HEX kodları da destekleniyor mu?+

Evet, #RGB biçimindeki kısaltılmış 3 haneli kodlar otomatik olarak 6 haneli tam forma genişletilip öyle hesaplanır. Saydamlık içeren 4 haneli (#RGBA) ve 8 haneli (#RRGGBBAA) kodlar da kabul edilir; alfa kanalı 0–1 değeri ve yüzde opaklık olarak ayrıca gösterilir.

HEX kodun başındaki "#" işareti zorunlu mu?+

Hayır, işaretle veya işaretsiz (ör. "0C6B5E" veya "#0C6B5E") girilebilir, sonuç aynıdır.

Renk isimleri (ör. "kırmızı") de kabul ediliyor mu?+

Hayır, bu araç yalnızca HEX kod formatını kabul eder; renk ismi girmeniz gerekiyorsa önce bunu bir HEX koduna çevirmeniz gerekir.

Bu sayfa hakkında

Yayıncı:
Kalkoro — Teknolojig Bilişim Teknolojileri A.Ş., İstanbul
Hazırlayan:
Ahmet Tur — Editör (Matematik, tarih ve zaman, birim dönüştürme, fizik ve kimya, günlük araçlar)
Kontrol eden:
Kübra Yıldız — Editör

Parametreler resmî kaynaklardan alınır; son güncelleme tarihi sayfanın altında görünür.

Yanlış sonuç mu gördünüz? Sayfanın üstündeki "Hata bildir" düğmesini kullanın; her bildirim incelenir.

Hesaplama yöntemi ve doğruluk politikası →

Sonuçlar bilgilendirme amaçlıdır. Resmî işlemlerde ilgili kurumun hesabı esastır.

Son güncelleme: