Renk Dönüştürücü — Çevrimiçi HEX, RGB, HSL Dönüştürücü _

Renk dönüşümü nedir?

Tarayıcınızın oluşturduğu her renk nihayetinde bir sRGB üçlüsüdür — kırmızı, yeşil ve mavi kanalları için 0 ile 255 arasında üç sayı, artı isteğe bağlı bir alfa değeri. CSS Color Level 4 spesifikasyonu aynı üçlüye dönüşen birkaç metin biçimi ile algısal olarak eşbiçimli OKLCH uzayını tanımlar. Bu araç bunların herhangi birini okur, hepsine dönüştürür ve ikinci bir renge karşı WCAG 2.1 kontrast oranını raporlar; böylece erişilebilir arayüzleri güvenle yayınlayabilirsiniz.

Renk dönüşümü nasıl çalışır?

Dönüşüm, iyi tanımlanmış doğrusal ve doğrusal olmayan bir dizi dönüşümden oluşur. Her adım tarayıcınızda çalışır — hiçbir giriş sunucularımıza ulaşmaz:

1. Girişiniz ayrıştırılır. Araç; 3, 4, 6 veya 8 basamaklı HEX'i, eski virgüllü sözdiziminde veya modern eğik çizgili alfa sözdiziminde rgb()/rgba()/hsl()/hsla()/hsv()/hwb() işlevsel biçimlerini ya da 150 adlandırılmış CSS renginden herhangi birini (rebeccapurple dahil) otomatik olarak algılar.
2. Ayrıştırılan renk, kanonik sRGB'ye normalize edilir — her biri 0–1 aralığında dört kayan noktalı değer {r, g, b, a}. Bu, üretilen her çıktı biçiminin türetildiği tek doğruluk kaynağıdır.
3. HEX, her kanalın 0–255 bayt değerine yuvarlanıp onaltılık basamakların birleştirilmesiyle elde edilir. RGB / RGBA aynı baytları yazdırır. HSL ve HSV, standart W3C silindirik koordinat algoritmalarını uygular; HWB ton bilgisini HSV'den, beyazlığı min(r, g, b)'den ve siyahlığı 1 - max(r, g, b)'den türetir.
4. CMYK saf bir yaklaşımdır — k = 1 - max(r, g, b), ardından c, m, y kalan kanallardan hesaplanır. Ekranda önizleme için uygundur, ancak baskı için değildir: gerçek CMYK çıktısı, bu aracın bilinçli olarak gömmediği bir ICC profili gerektirir.
5. OKLCH css-color-4 ileri yolunu izler: sRGB doğrusallaştırılır, LMS matrisi ile çarpılır, küp kökü alınır, LMS'den OKLab'e matris ile çarpılır ve son olarak dikdörtgensel OKLab'den kutupsal OKLCH'ye dönüştürülür. OKLCH algısal olarak eşbiçimlidir; bu da onu insan gözüne dengeli görünen paletler tasarlamak için doğru uzay yapar.

Bu renk dönüştürücüyü neden kullanmalıyım?

• Gizlilik: her dönüşüm tarayıcınızda düz JavaScript ile çalışır. Yapıştırdığınız renk cihazınızdan asla ayrılmaz; bu, yayımlanmamış marka çalışmaları, kurum içi tasarım sistemleri ve gizlilik sözleşmesi altındaki müşteri taslakları için önemlidir.
• Tasarımcıdan geliştiriciye aktarım: Figma'dan HEX'i yapıştırın, Tailwind yapılandırması için rgb() dizesini, bir CSS özel özelliği için hsl() dizesini veya modern bir palet için oklch() dizesini geri okuyun — tüm biçimler tek yerde, sekmeler arasında kopyala-yapıştır yapmadan.
• WCAG doğruluğu: kontrast denetleyici tam WCAG 2.1 göreli aydınlık formülünü ve normal ile büyük metin için yayımlanmış AA (4.5 / 3.0) ve AAA (7.0 / 4.5) eşiklerini kullanır. Raporlanan oran, manuel hesaplayıcılarla 0.01 hassasiyetinde örtüşür.
• Karanlık mod ve palet türetme: HSL ve OKLCH parlaklığı tek bir kanal olarak sunar; böylece bir marka rengini parlaklık ekseninde yukarı veya aşağı kaydırarak eşleştirilmiş karanlık mod token'ları türetmek ya da tek bir tohumdan 10 adımlı bir palet rampası üretmek oldukça kolaydır.

Renk dönüşümünün yaygın uygulamaları nelerdir?

Renk dönüşümü, web geliştirme, tasarım ve erişilebilirlik çalışmalarının pek çok yerinde karşımıza çıkar:

• Tasarım sistemleri: bir marka HEX'ini, bir CSS özel özellik ölçeği için eşleşen HSL ve OKLCH token'larına dönüştürmek ve ardından her token kombinasyonunun sayfa arka planına karşı WCAG AA'yı geçtiğini doğrulamak.
• Erişilebilirlik denetimleri: gerçek bir ürün ekranından bir ön plan/arka plan çifti yapıştırmak ve tek bakışta hem normal hem de kalın metin için kontrast oranı ile AA/AAA kararlarını okumak.
• Araçlar arası gidiş-dönüşler: bir ekran görüntüsü seçiciden (HEX) bir rengi almak, buraya yapıştırmak ve hsl() veya oklch() dizesini doğrudan Tailwind'e, Figma token'larına ya da CSS-in-JS temasına kopyalamak.

Bir renk dönüşümü örneği nasıl görünür?

Ünlü rebeccapurple rengini ele alalım. Adlandırılmış renk araması bunu #663399'a çözer. RGB dönüşümü rgb(102, 51, 153) verir. HSL dönüşümü hsl(270, 50%, 40%) verir — menekşe bir ton, yarı doygun, onda dört parlaklıkta. Bu rengi saf beyaza karşı kontrast aracıyla kontrol etmek yaklaşık 7.39'luk bir oran döndürür; bu, normal metin için AAA'yı (7.0) ve büyük metin için AAA'yı (4.5) geçer — güçlü, erişilebilir bir ön plan seçimi. #663399'u RGB → HSL → RGB → HEX üzerinden tur attırdığınızda, orijinal dize bayt bayt aynen geri döner.

Bu dönüştürücüyü karşılaştığınız her renk için hızlı bir başvuru kaynağı — kodda, tasarım dosyalarında veya bir ekran görüntüsünde — ve kontrast denetleyicisini yayına almadan önce bir akıl sağlığı kontrolü olarak kullanın. Her şey yerel olarak çalışır, hiçbir şey günlüğe yazılmaz ve dönüşüm matematiği yayımlanmış W3C ve WCAG spesifikasyonlarını izler; böylece sayılar denetim aracınızın veya tarayıcı geliştirici araçlarınızın raporlayacağıyla örtüşür.