Renk değerleri ekipler arasında nadiren tek formatta kalır. Tasarım dosyasından gelen değer HEX olabilir, CSS içinde RGB ya da HSL gerekebilir, modern token sistemi ise OKLCH ile çalışabilir. Aynı renk için bu dönüşümleri elle yapmak hem yavaştır hem de hata üretir.
Renk dönüştürücü, tek bir giriş renginden HEX, RGB, HSL, OKLCH ve OKLAB gibi çıktılar üretir. Böylece tasarım referansı, CSS değişkeni ve Tailwind CSS token'ı arasında daha hızlı geçebilirsiniz.
Neden formatlar arasında hızlı geçiş gerekir?
Frontend ve design system çalışmasında renk sadece görsel bir değer değildir. Aynı değer farklı bağlamlarda farklı biçimde istenir:
- tasarım handoff'larında HEX
- CSS veya inline stillerde RGB/HSL
- algısal renk rampalarında OKLCH/OKLAB
- tema dosyalarında token çıktıları
- kontrast kontrolünde okunabilir ön plan önerileri
Bu dönüşüm sürekli tekrarlandığında küçük bir araç ciddi zaman kazandırır.
OKLCH neden ayrı bir değer taşır?
OKLCH ve OKLAB, açıklık ve renk mesafesi ilişkilerini UI işi için daha öngörülebilir hale getiren algısal renk uzaylarıdır. HSL ile parlaklığı değiştirmek her zaman beklediğiniz görsel sonucu vermez. OKLCH ise renk rampaları, tema varyasyonları ve daha dengeli paletler için daha güvenilir bir başlangıç olabilir.
Bu, her projede her rengin OKLCH'ye taşınması gerektiği anlamına gelmez. Ama modern tasarım sistemlerinde bir token'ın sadece HEX karşılığı değil, algısal modeldeki davranışı da önem kazanır.
Pratik dönüşüm akışı
- Kaynak renk değerini renk dönüştürücüye yapıştırın.
- HEX, RGB, HSL, OKLCH ve OKLAB çıktılarının parse edildiğini kontrol edin.
- Kontrast ipucunu kullanarak açık mı koyu mu metnin daha güvenli olduğunu görün.
- CSS veya Tailwind CSS çıktısını hedef dosyaya kopyalayın.
- Değer design system içinde kullanılacaksa token adlandırmasını ayrıca kontrol edin.
Bu akış, özellikle tasarım ve frontend ekipleri arasında renk token'ı taşırken işe yarar. Daha ayrıntılı bir örnek için renk token'ını handoff'tan production'a taşıma rehberine bakabilirsiniz.
Hızlı karşılaştırma
| Format | Ne zaman kullanışlı |
|---|---|
| HEX | Tasarım referansları ve kısa CSS değerleri |
| RGB | Alpha varyasyonları ve yaygın CSS çıktıları |
| HSL | Basit hue/saturation/lightness ayarları |
| OKLCH | Daha öngörülebilir palet ve açıklık değişimleri |
| OKLAB | Algısal renk çalışmasının daha düşük seviyeli modeli |
Kontrastı dönüşümden ayrı düşünmeyin
Renk doğru formatta olsa bile UI içinde okunabilir olmayabilir. Converty'nin kontrast ipucu, mevcut swatch üzerinde açık veya koyu metnin daha güvenli başlangıç olduğunu hızlıca gösterir. Bu tam bir erişilebilirlik denetimi değildir, ama token üzerinde çalışırken yanlış yöne gitmeyi önler.
Kısa FAQ
Hangi renk girdilerini kullanabilirim?
HEX, rgb(), hsl(), oklch(), oklab() ve adlandırılmış yaygın CSS renkleri desteklenir.
OKLCH çıktısını her zaman kullanmalı mıyım?
Hayır. OKLCH özellikle palet, tema ve token çalışmasında değerlidir. Basit tek seferlik CSS işleri için HEX veya HSL yeterli olabilir.
Tailwind CSS çıktısı ne işe yarar?
Tek bir giriş renginden tema veya palet çıktısına daha hızlı geçmenizi sağlar. Bu, elle dönüştürme ve format hatalarını azaltır.
Kontrast ipucu yeterli mi?
Hayır, kapsamlı erişilebilirlik denetiminin yerine geçmez. Ama renk üzerinde hızlı karar verirken pratik bir ön kontrol sağlar.
Renk dönüştürme bir handoff hızlandırıcısıdır
Renk formatları arasında hızlı geçiş, tasarım sisteminin daha tutarlı ilerlemesini sağlar. Converty, tek bir kaynak değeri birden fazla pratik çıktıya dönüştürerek tasarım, frontend ve içerik ekipleri arasındaki küçük sürtünmeleri azaltır.
Doğrudan kullanmak için renk dönüştürücüyü açın; aynı değerlerin production'a daha hızlı taşınması için renk token'ı iş akışı rehberine devam edin.
