Renk Dönüştürücü

HEX, RGB, HSL, HSV ve CMYK arasında dönüştürün. Canlı önizleme. Erişilebilirlik için WCAG kontrast denetleyici. Hiçbir şey tarayıcınızı terk etmez.

Renk Dönüştürücü nasıl çalışır

Renk Dönüştürücü, herhangi bir rengi yazarken HEX, RGB, HSL, HSV ve CMYK formatları arasında anında dönüştürür. Ayrıca seçtiğiniz herhangi iki renk arasında WCAG kontrast denetimi çalıştırarak normal metin, büyük metin ve kullanıcı arayüzü bileşenleri için kontrast oranını ve AA/AAA geçer/başarısız sonucunu gösterir. Tüm hesaplamalar tarayıcıda gerçekleşir ve hiçbir veri herhangi bir yere gönderilmez; yazdığınız hiçbir şey cihazınızdan çıkmaz.

Aynı rengin farklı renk modellerinde nasıl göründüğünü anlamak, tasarım teslimlerinde kullanışlıdır. Bir tasarımcı, marka rengini HEX #1A4F8C olarak belirtebilir; bir CSS geliştiricisi tema için HSL eşdeğerine ihtiyaç duyar; bir baskı ekibi CMYK dökümüne ihtiyaç duyar. Bu araç dönüşümü her yönde aynı anda yapar, böylece birden fazla ayrı dönüştürücü çalıştırmanıza gerek kalmaz.

Yazan: Bastien Sulyan

Renk Dönüştürücü nasıl kullanılır, adım adım

Bir HEX değeri yazın, renk örneğine tıklayın ya da RGB, HSL, HSV veya CMYK değerlerini ilgili alanlara girin.
Diğer tüm format temsilleri, eşdeğer rengi gösterecek şekilde hemen güncellenir.
Kontrast denetimi çalıştırmak için iki renk seçicisini kullanarak ön plan ve arka plan rengi seçin.
AA ve AAA uyum düzeyleri için WCAG kontrast oranını ve geçer/başarısız rozetlerini okuyun.
Her alanın yanındaki kopyala simgesini kullanarak herhangi bir renk değerini kopyalayın.

Yaygın kullanım örnekleri

Bir UI tasarımcısı, tema sistemi için CSS özel özelliği yazmak amacıyla marka HEX kodunu HSL'e dönüştürüyor.
Bir web geliştiricisi, bir bileşeni yayınlamadan önce metin rengi ile arka plan arasındaki kontrast oranını WCAG AA uyumluluğunu onaylamak için kontrol ediyor.
Bir baskı tasarımcısı, web HEX rengi alır ve bunu baskılı broşürde eşleştirmek için CMYK eşdeğerine ihtiyaç duyar.
Bir geliştirici, tek tek kanal değerlerini bir canvas çizim işlevine iletmek için bir tasarım token'ının RGB dökümüne ihtiyaç duyuyor.

Sık sorulan sorular

Araç alfa (saydamlık) değerlerini destekliyor mu?

Mevcut dönüştürücü tam opak renklerle çalışır (alfa = 1). HEXA (8 haneli hex) ve RGBA henüz kapsam dahilinde değil. Opaklık için alfa kanalını CSS'de rgba() veya oklch() gösterimini kullanarak ayrıca ayarlayın.

Girdiğim renkler depolanıyor veya herhangi bir yere gönderiliyor mu?

Hayır. Renk dönüşümü, tamamen tarayıcının JavaScript motorunda çalışan saf aritmetiktir (kanal yeniden eşleme ve aralık ölçekleme). Buraya yazdığınız hiçbir şey herhangi bir sunucuya veya harici hizmete ulaşmaz.

Denetleyici hangi WCAG kontrast düzeylerini destekliyor?

Araç, WCAG 2.1 başarı kriterleri doğrultusunda raporlar: AA, normal metin için minimum 4,5:1 (18 pt veya 14 pt kalın altında) ve büyük metin ile kullanıcı arayüzü bileşenleri için 3:1 kontrast oranı gerektirir. AAA ise normal metin için 7:1 ve büyük metin için 4,5:1 gerektirir.

Bu araç ile profesyonel tasarım yazılımı arasındaki CMYK değerleri neden farklı?

Bu aracın yaptığı RGB-CMYK dönüşümü, renk profili olmadan matematiksel bir formüldür. Profesyonel tasarım uygulamaları, mürekkep nokta kazancını ve substrat özelliklerini hesaba katan ICC renk profilleri uygular. Buradaki CMYK değerleri yaklaşım için kullanışlıdır; üretim baskısı için her zaman özel yazılımınızda baskı profilinizi uygulayın.

«cornflowerblue» gibi CSS renk adını buraya dönüştürebilir miyim?

CSS adlandırılmış renkleri doğrudan dönüştürücü alanlarına yazılamaz. Adlandırılmış rengi dönüştürmek için önce HEX değerini bir CSS referansında bulun (cornflowerblue #6495ED'dir), ardından diğer tüm formatları görmek için bu HEX'i HEX alanına yapıştırın.

Araç sayfa yüklendikten sonra çevrimdışı çalışıyor mu?

Evet. Renk dönüşümü, harici bağımlılığı olmayan aritmetiktir. Sayfa tarayıcı önbelleğinizde olduğunda ağ bağlantısı olmadan açabilir ve tüm dönüşümler normal çalışır.

İlgili araçlar

Her şeyi yerel tutun, tamamlayıcı araçları keşfedin.

Tüm geliştirici araçları