Renk kodu dönüştürme
Online renk dönüştürücü; HEX (3, 4, 6, 8 haneli), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), boşlukla ayrılan yeni CSS Color 4 sözdizimi, 147 CSS renk adının tamamı ve bunların alfa kanallı hâllerini tanır. Tüm biçimleri aynı anda verir, her biri ayrı ayrı kopyalanabilir. Yerleşik palet; koyu tonları (daha koyu adımlar), açık tonları (daha açık adımlar), tamamlayıcı, komşu, üçlü ve dörtlü uyumları üretir. WCAG kontrast denetleyicisi, rengin beyaz ve siyah üzerinde normal ve büyük metin için AA / AAA düzeyini karşılayıp karşılamadığını gösterir. İşletim sisteminin renk damlalığını (Chrome / Edge) açarak ekrandaki herhangi bir rengi seçebilirsiniz.
Nasıl kullanılır
4 adımHerhangi bir biçim olabilir: HEX, RGB, HSL, OKLCH, hatta tomato gibi CSS adları.
On birinin hepsi aynı anda görünür, tek tıkla kopyalanır.
Renginizden türetilen koyu tonlar, açık tonlar ve uyumlar.
Beyaz ve siyah üzerinde WCAG kontrastı, AA/AAA sonucuyla birlikte.
11 renk biçimi arasında geçiş yapın, palet oluşturun, WCAG kontrastını denetleyin — hepsi tek yerde
Tüm biçimler
Kontrast (WCAG)
Palet
Son kullanılanlar
Neler yapabilirsiniz
Tipik kullanım alanları
- CSS Color 4 tabanlı bir tasarım sistemi için marka HEX renginin OKLCH karşılığını bulun.
- Ekran görüntüsündeki RGB piksel değerlerini grafik ekseni için HSL’ye dönüştürün.
- Bir düğmenin üzerine gelme durumu için tamamlayıcı renk bulun.
- Gövde metninin seçilen arka plana karşı WCAG AA düzeyini karşılayıp karşılamadığını denetleyin.
- Sistem renk damlalığıyla başka bir sekmeden veya pencereden renk seçin.
Neden bu araç
Birçok dönüştürücü yalnızca HEX↔RGB↔HSL işi yapar. Biz OKLab ve OKLCH’yi de ekledik — insan algısına HSL’den çok daha iyi uyan yeni CSS Color 4 uzayları (ton değiştirirken parlaklıkta ani sıçrama olmaz). Palet üretimi OKLab içinde çalışır; böylece adımlar matematiksel olarak değil, algısal olarak eşit görünür. Kontrast, WCAG 2 parlaklık uzayında hesaplanır ve 4,5:1 ile 3:1 eşikleri açıkça belirtilir.
Sık sorulan sorular
OKLCH nedir?
CSS Color 4 kapsamında gelen, algısal olarak düzgün bir renk uzayıdır. %50 parlaklığın farklı tonlarda çok farklı görünebildiği HSL’nin aksine, OKLCH’de parlaklık tüm spektrumda tutarlıdır; bu da tasarım belirteçlerini öngörülebilir kılar. Modern bir tasarım sistemi kuruyorsanız OKLCH’yi öğrenmeye değer.
Rengim alfa kanalı içeriyor mu?
Evet — sekiz haneli HEX, rgba(), hsla() veya alfa ekli boşluklu sözdizimi (rgb(255 0 0 / 50%)) ayrıştırılır ve alfayı destekleyen her çıktı biçimine yansıtılır.
Koyu tonlardan oluşan paletim neden pürüzsüz değil de “basamaklı” görünüyor?
Koyu ve açık tonlar OKLab içinde ara değerlenir, sonra hedef uzaya yansıtılır; böylece her adım algısal olarak eşittir. Bu çoğu zaman HSL’de parlaklığı doğrudan değiştirmekten daha pürüzsüz sonuç verir, ancak çok koyu veya çok açık başlangıç renkleri uçlara yakın yerlerde kırpılır.
CMYK baskı için doğru mu?
Hayır — CMYK çıktısı hızlı bir ekran uzayı dönüşümüdür, ICC profilini hesaba katmaz. Baskı için buradaki CMYK değerini başlangıç noktası olarak alın ve gerçek baskı profiline göre Adobe / Affinity araçlarında doğrulayın.
Renk damlalığı çalışmıyor, neden?
EyeDropper API’si şu an yalnızca Chromium tabanlı tarayıcılarda (Chrome, Edge, Brave) kullanılabilir. Firefox ve Safari’de düğme desteklenmediği için bir ipucuyla gizlenir.
HEX kodlarında büyük/küçük harf fark eder mi?
Hayır, HEX değerleri onaltılıktır (0-9, a-f veya A-F). CSS Color 4 önerisine uygun olarak varsayılan olarak küçük harf üretiyoruz; çıktıyı nasıl yapıştırırsanız yapıştırın geçerli kalır.
Bu sayfayı telefonda açınca renk damlalığı neden yok?
Çünkü ekran renk damlalığı masaüstü tarayıcılara özgü bir yetenektir: ekranın herhangi bir yerinden piksel okur, mobil tarayıcılar ise bunu hiç sunmaz; sayfanın çağırabileceği bir şey yoktur. Geri kalan her şey telefonda normal çalışır — değer girme, HEX, RGB, HSL ve diğer biçimler arasında dönüştürme, sonucu kopyalama. Orada renk seçmek için yerel renk kutusunu kullanın: renk alanına dokununca sistem seçicisi açılır, içinde açtığınız bir görselden örnekleme yapabilir ve geri verdiği değer dönüştürücüye başka bir girdi gibi gelir.
Bu konudaki uzmanlar
Konuyu bir uzmanla birlikte çalış — online ders veya danışmanlık, saatler senin saat diliminde gösterilir.
Elbette yapabiliriz! Fikrinizle birlikte kısa bir mesaj gönderin. Ayrıntılı konuşmak istiyorsanız e-posta adresinizi bırakın, size geri döneceğiz. Anonim kalabilirsiniz.