HesapHanem

Renk Kodu Çevirici (HEX → RGB / HSL)

HEX renk RGB’ye nasıl çevrilir?

Sonuç

#336699
rgb(51, 102, 153)
hsl(210, 50%, 40%)

Nasıl hesaplanır?

Araç 3 haneli ya da 6 haneli hex kodu kabul eder; başta # olabilir ya da olmayabilir, büyük küçük harf fark etmez. 3 haneli kod her hane ikiye katlanarak açılır (F80, FF8800 olur). Her iki hane çifti 0 ile 255 arasında onaltılık bir sayı olarak okunur ve kırmızı, yeşil, mavi elde edilir.

HSL için kanallar 0–1 aralığına ölçeklenir. Açıklık L = (maks + min) / 2 ile bulunur. Maks min'e eşitse renk griyi ifade eder, ton ve doygunluk 0 olur. Aksi halde doygunluk, L 0,5'e kadar (maks − min) / (maks + min), üstünde (maks − min) / (2 − maks − min) olur; ton ise baskın kanala göre derece cinsinden açıdır. Ton, doygunluk ve açıklık tam sayıya yuvarlanır. 3 ya da 6 hex hane olmayan her şey, alfa kanallı 8 haneli kodlar dahil, geçersiz görünür.

Örnek hesaplama

336699 girin. Çiftler 33, 66 ve 99; onluk sistemde 51, 102 ve 153 eder, yani RGB rgb(51, 102, 153) olur. 0–1 ölçeğinde kanallar 0,2, 0,4 ve 0,6'dır. Açıklık (0,6 + 0,2) / 2 = 0,4, yani %40. Doygunluk 0,4 / 0,8 = 0,5, yani %50. En büyük kanal mavi olduğundan ton ((0,2 − 0,4) / 0,4 + 4) × 60 = 210'dur. Sonuç hsl(210, 50%, 40%) olur; hex ise #336699 olarak gösterilir.

Bu örneği dene →

Sık yapılan hatalar

  • Alfa kanallı 8 haneli hex yazmak, örneğin #33669980. Yalnızca 3 ya da 6 hane kabul edilir; dönüştürmeden önce son iki haneyi silin.
  • Yanlışlıkla 4 ya da 5 haneli kod girmek. Eksik hane tahmin edilmez; araç geçersiz girdi bildirir.
  • #F80 kodunu #0F8000 diye okumak. Kısa kodlarda her hane ikiye katlanır, yani anlamı #FF8800'dür.
  • HSL değerlerinde ondalık beklemek. Değerler yuvarlanır; yuvarlanmış HSL'den geri dönüştürmek özgün hex'ten bir adım sapabilir.
  • Hex kod yerine renk adı ya da rgb() metni yapıştırmak.

Bu hesaplama hakkında

Bu araç, #1e6bff gibi bir HEX renk kodunu, aynı rengi farklı araç ve dosya formatlarının beklediği üç farklı şekilde ifade eden RGB (0–255 arası kırmızı, yeşil, mavi kanal değerleri) ve HSL (ton, doygunluk, parlaklık) karşılıklarına çevirir. HEX, CSS ve tasarım dosyalarında en yaygın kullanılan sıkıştırılmış formattır; RGB ekranların ışığı nasıl karıştırdığına doğrudan karşılık gelir; HSL ise yalnızca parlaklık veya doygunluğu ayarlamak üç ayrı kanal değerini yeniden hesaplamayı gerektirmediği için insanların kavraması genellikle daha kolaydır.

Bir tasarım taslağından, marka kılavuzundan veya görselden aldığı bir rengi CSS'inde veya kod tabanında farklı bir formatta kullanması gereken web geliştiricileri ve tasarımcılar ile bir rengin parlaklığını veya doygunluğunu ince ayarlarken HEX rakamlarını tahmin etmek yerine HSL cinsinden düşünmeyi daha kolay bulan herkes bu aracı kullanır. Figma gibi tasarım araçları ve tarayıcı geliştirici araçlarındaki renk seçiciler, bir rengi birden fazla formatta gösterdiklerinde arka planda aynı dönüşümü yapar.

Bu faydalı oldu mu?

En fazla 3 tepki seçebilirsiniz.

Yorumlar (1)

  • Editör ekibi

    Bir rengi elle ayarlamak için en kolay biçim HSL'dir: tonu sabit tutup parlaklığı artırıp azaltarak, yeni onaltılık çiftler tahmin etmeden üzerine gelince görünen bir ton ya da daha açık bir arka plan elde edersiniz. Araç ton, doygunluk ve parlaklığı tam sayıya yuvarlar; geri çevirdiğinizde değer asıl renkten bir adım sapabilir. Yalnızca 3 ya da 6 haneli kodları okur, alfa kanalı yoktur. Hangi renk biçimlerinin eklenmesini istersiniz?

Popüler hesaplayıcılar

Kredi Hesaplama

Aylık taksit, toplam faiz ve ödeme planını hesaplayın.

Yüzde Hesaplama

Yüzde değişim, indirim ve oran hesaplamaları.

İndirim Hesaplama

İndirimli fiyatı, kazancı ve indirim tutarını hesaplayın.

Vücut Kitle Endeksi (VKİ)

Boy ve kiloya göre vücut kitle endeksini hesaplayın.

Yaş Hesaplama

Doğum tarihinden bugüne tam yıl, ay ve gün cinsinden yaşınızı hesaplayın.

Bileşik Faiz Hesaplama

Ana para, faiz oranı ve süreye göre bileşik faizle nihai tutarı hesaplayın.

Tüm Hesaplayıcılar