Renk Dönüşümü: HEX, RGB ve HSL Kafa Karışıklığı Olmadan

Bir müşteri, üzerinde çalıştığı tasarımı geri gönderir ve "bu rengi bir renk kodu olarak dışa aktarabilir misin?" diye sorar. Tasarımcı rengi HSL(225, 80%, 47%) olarak yazmıştır, geliştiricinin CSS'i ise #2f6fed beklemektedir — ve ikisi de tamamen aynı renkten bahseder. Renk dönüşümünün var olma nedeni budur: üç gösterim, tek gerçeklik. Bu rehber her formatın ne anlattığını, aralarında rahatça nasıl geçileceğini ve okunaksız renk seçimlerini önleyen birkaç kuralı anlatır.

Karşılaşacağınız üç model

Ekrandaki her renk, kırmızı, yeşil ve mavi ışığın karışımıyla üretilir. Farklı olan, bu karışımı nasıl ifade ettiğimizdir:

• HEX web'in kısaltmasıdır — RGB değerleri altı onaltılık basamağa sıkıştırılır.
• RGB kırmızı, yeşil ve mavi miktarlarını üç ayrı 0–255 sayısı olarak yazar.
• HSL rengi ton, doygunluk ve açıklık üzerinden adlandırır — insanın düşünme biçimine en yakın olanı.

Hiçbir model diğerinden "daha doğru" değildir. Bunlar farklı araçlardır: şu anki işi en kolay düşünmeyi sağlayanı seçin.

HEX: altı hanenin nereden geldiği

Örneğin #2f6fed yalnızca yan yana dizilmiş üç iki haneli sayıdır. Parçalayın: 2f kırmızı miktarı, 6f yeşil, ed mavidir. Oyunda bir yakalama vardır: haneler 0–9 ve a–f (onaltılık) arasında gider, yani 2f, 2 × 16 + 15 = 47 demektir. Bu sayı doğrudan 0–255 ölçeğine oturur: hex 2f → 47 → rgb(47, ...).

Üç çiftin hepsi eşit basamaklıysa — örneğin #aabbcc — kısaltıp üç haneye indirebilirsiniz: #abc. Tarayıcılar iki biçimi aynı kabul eder ve kısa biçim, Tailwind'in bg-red-500 yardımcı sınıflarında standarttır. Yaygın bir acemi hatası, #ffffff değerinin gri olduğunu sanmaktır; o saf beyazdır, #808080 orta gridir.

RGB: ekranın gerçekte kullandığı 0–255 sayıları

Örneğin rgb(47, 111, 237) gördüğünüzde "47 birim kırmızı ışık, 111 yeşil, 237 mavi" diye okuyun. Sıfır kapalıdır, 255 tam parlaklıktır ve modern bir ekran bu üç kanalı karıştırarak rengi üretir. Geri kalan her şey — HEX dahil — bu üç sayının üzerine kurulan bir kolaylık katmanıdır.

Sayılar anlamsız görünene kadar deneyimle bağdaşmaz. Üç kanalın eşit olduğu bir renk — rgb(200,200,200) — grinin bir tonudur. Herhangi bir RGB renginin parlaklığı yaklaşık olarak üç kanalın ortalamasıdır: hepsini birlikte yükseltin, renk beyaza doğru aydınlanır. Bu sezgiselleştiğinde RGB okumak çok kolaylaşır.

HSL: sezginizin istediği model

HSL, rengi insanların gerçekten tarif ettiği gibi anlatır. Ton renk çarkındaki açıdır — 0° kırmızı, 120° yeşil, 240° mavi — yani sayı hesaplamadan "şuradaki kırmızıyı" seçebilirsiniz. Doygunluk rengin ne kadar canlı olduğudur, gri (%0) ile saf renk (%100) arasında. Açıklık siyahtan (%0) beyaza (%100) uzanır; %50 rengin "normal" canlı hâlidir.

Bu yüzden HSL, tasarım işlerinin doğru modelidir: üzerine gelme durumu koyu olsun diye açıklığı birkaç puan düşürün veya bir vurgu rengini yumuşatmak için doygunluğu azaltın — tona dokunmadan. Aynı ayarı HEX içinde yapmak üç alakasız haneyi yeniden hesaplamak demektir. Bu yüzden çoğu renk seçici, CSS gradyanı ve tasarım aracı bir yerlerde HSL gösterir.

Modeller arasında dönüştürme

Dönüşümler mekaniktir. HEX → RGB yukarıda açıklandı; RGB → HSL yalnızca maksimum/minimum kanalı bulmayı ve tonu kazanan kanaldan türetmeyi gerektirir. Pratikte bunu elle yazmak zorunda kalmayacaksınız — bir dönüştürücü anında halleder — ama formül meseleyi aydınlatır:

function rgbToHex(r, g, b) {
  const toHex = (n) => n.toString(16).padStart(2, "0");
  return "#" + [r, g, b].map(toHex).join("");
}
function hexToRgb(hex) {
  const h = hex.replace("#", "");
  const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
  return [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16));
}

Erişilebilirlik: kontrastı matematikle kontrol etmek

Rengi gözle seçmek, okunaksız arayüzlerin nasıl ortaya çıktığıdır. WCAG, bir metin rengi ile arka plan arasında 1 (kontrastsız) ile 21 (siyah üzerine beyaz) arasında bir kontrast oranı tanımlar. Pratik eşikler: normal metin 4,5:1, büyük metin 3:1 ister. Oran, iki rengin bağıl parlaklığından gelir; insan gözü yeşile en duyarlı olduğu için yeşil kanal en ağırlıklıdır — saf #00ff00 arka plan, #ff0000 renginden çok daha parlak görünür.

Dürüst kısayol, parlaklık hesabını elle yapmak değil, sayıyı neyin değiştirdiğini anlamaktır: metin ile arka plan arasındaki açıklık farkını artırmak neredeyse her zaman yardım eder. HSL burada paha biçilmezdir — aynı tonu paylaşan iki renk otomatik uyumludur ve kontrast geçene dek birinin açıklığını artırabilirsiniz. Bir müşteri soluk sarı bir marka renginde ısrar ediyorsa, kontrast konuşmasını yapabilmek gerekir: bu zevk meselesi değil, 4,5:1 meselesidir.

Palet üretmek ve çıkarmak

Aynı renk bilgisi palet işlerine de güç verir. Tailwind tarzı bir palet, tek bir temel renkten başlar ve sabit açıklık aralıklarında adımlar yayar; bir palet çıkarıcı ise mevcut bir görselden baskın, görsel olarak dengeli renkleri çeker. İkisi de kaynak renkleri "benzer" ve "farklı"nın ölçülebildiği bir alana dönüştürmeye dayanır — bu yüzden HEX, RGB ve HSL arasında gezinmeyi ya da renkleri doğrudan görselden almayı sağlayan araçlar çok iş kurtarır.

Convrs'teki renk araçları

Convrs tüm bunları tarayıcıda tutar: renk dönüştürücü herhangi bir HEX, RGB veya HSL değerini canlı önizlemeyle diğer gösterimlere çevirir, renk paleti çıkarıcı herhangi bir görselden dengeli bir palet çıkarır ve Tailwind paleti üreticisi tek bir renkten tasarım sisteminiz için tam bir ton merdiveni üretir. Renkleriniz cihazınızdan asla çıkmaz ve sonucu doğrudan CSS'e veya Tailwind yapılandırmasına kopyalayabilirsiniz.