Color Picker Pro
Çoklu format desteğine sahip gelişmiş renk seçici
Renk Formatları
Renk Uyumu
Color Picker Pro
Çoklu format desteğine sahip gelişmiş renk seçici
Özellikler
- Ton, doygunluk, parlaklık kaydırıcılarıyla renk seçin veya tüm kanalları anında senkronize etmek için HEX, RGB veya HSL değeri yapıştırın
- Aynı anda altı formatta çıktı: HEX, RGB, RGBA, HSL, HSLA ve CMYK (yazıcı için hazır, profil gömme yok)
- WCAG 2.1 kontrast oranı herhangi bir test metin rengine karşı; AA (4.5:1) ve AAA (7:1) geçti/kaldı rozetleri W3C formülüyle göreceli aydınlık üzerinden
- Geçerli ton üzerinden tamamlayıcı, üçlü, analog ve monokromatik varyantlar üreten renk uyumu üreticisi
- Material Design, Tailwind CSS ve erişilebilirlik odaklı yüksek kontrastlı setler dahil derlenmiş paletler
- localStorage'da kalıcı son 20 renk geçmişi (talep üzerine silinir, hiçbir zaman senkronize edilmez)
- CSS özel özelliklerine bırakmaya hazır RGBA ve HSLA çıktıları için alfa kanalı desteği
- Rastgele örnek renkler ve herhangi bir tek format dizesi için tek tıkla kopyalama
Nasıl Kullanılır
- Bir renk tonuna inmek için ton, doygunluk ve parlaklık kaydırıcılarını sürükleyin veya bilinen bir başlangıç noktasından seçiciyi sürmek için bilinen bir HEX değerini girişe yapıştırın.
- Bindirme, cam efekti veya tasarım belirteci için saydamlık gerekiyorsa alfa kaydırıcısını ayarlayın.
- HEX, RGB(A), HSL(A) ve CMYK'yi yan yana görmek ve yığınınızın beklediği biçimi kopyalamak için Formatlar panelini açın.
- WCAG kontrast oranının AA veya AAA'yı karşıladığını doğrulamak için Erişilebilirlik panelini açın ve test metin rengi ayarlayın.
- Dengeli bir palet oluşturmak için tamamlayıcı, üçlü veya analog eşlerini almak için Renk Uyumu'nu açın.
- Denemeler yaparken seçimleri Geçmiş'e ekleyin; oturum içinde geri çağırmak için herhangi bir örneğe tıklayın.
İpuçları ve En İyi Uygulamalar
- Ayarları değiştirirken değişiklikleri gerçek zamanlı önizleyin.
- Üretilen kodu doğrudan CSS stil sayfanıza kopyalayın.
- Erişilebilirlik için tasarımlarınızı hem açık hem koyu modda test edin.
- Canlı test için bu aracı tarayıcı geliştirici araçlarıyla birlikte kullanın.
- Daha sonra hızlı erişim için favori yapılandırmalarınızı kaydedin.
SSS
Aynı HEX neden diğer araçlarda farklı RGB değerleri gösteriyor?
Renk değerleri sRGB veya display-P3 renk uzaylarında belirtilebilir ve tarayıcılar monitör kalibrasyonuna ve ICC profillerine bağlı olarak farklı render edebilir. Bu seçici sRGB kullanır (CSS Color Module Level 3'ün varsayılanı) ve 8-bit kanallara yuvarlar (0–255). Geniş gamut tasarım sistemi tokenları için P3 farkındalıklı bir araç kullanın ve CSS Color Level 4'ün color() notasyonuyla dönüştürün.
WCAG kontrast oranı nasıl hesaplanır?
Oran W3C göreceli aydınlık formülünü kullanır: her sRGB kanalı doğrusallaştırılır (sRGB-doğrusal gamma), 0.2126R + 0.7152G + 0.0722B ile ağırlıklandırılır, sonra açık ve koyu aydınlıklar (L1 + 0.05) / (L2 + 0.05) olarak birleştirilir. AA normal metin için 4.5:1, büyük metin için 3:1'de geçer; AAA 7:1'de geçer. Matematik tarayıcınızda mevcut ön plan/arka plan çiftinde çalışır.
Bir renk seçtiğimde sunucuya bir şey gönderiliyor mu?
Hayır. Renk dönüşümleri, palet aramaları, kontrast hesabı ve geçmiş hepsi JavaScript ile istemci tarafında çalışır. Tek kalıcı depolama localStorage'da geçmiştir; cihazınızda yaşar ve hiç ayrılmaz. Sayfa önbelleğe alındıktan sonra çevrimdışı kullanabilirsiniz.
CMYK çıktısı neden Pantone veya Adobe değerlerimle tam eşleşmiyor?
CMYK cihaza bağlıdır ve baskı için doğru olması için ICC profili gerektirir. Tarayıcı araçları CMYK profili gömmez, bu yüzden buradaki çıktı yalnızca hızlı referans için yararlı naif bir sRGB-CMYK dönüşümüdür. Üretim baskı işleri için Photoshop veya Illustrator'da yazıcı profilinizle CMYK üretin veya baskı dükkanınızdan doğrulanmış örnekler isteyin.
Uyum üreteci renklerini nasıl seçer?
Üreteç mevcut HSL tonunu döndürür: tamamlayıcı +180 derece, üçlü +120 ve +240'ta iki renk ekler, analog +30 ve +330'da komşular ekler, monokromatik doygunluk ve parlaklığı kaydırır. Bu mekanik bir renk-çarkı yaklaşımıdır: başlangıç noktası verir ancak Oklch veya Lab renk uzaylarını gerektiren algısal düzgünlüğü hesaba katmaz.
Bu değerleri doğrudan CSS özel özellikleri olarak kullanabilir miyim?
Evet. HSL çıktısı modern CSS'e doğrudan `--brand: hsl(217 100% 60%)` veya alfa ile `hsla(217, 100%, 60%, 0.8)` olarak düşer. HSL genellikle tasarım belirteçleri için tercih edilir çünkü parlaklık rampalarını önemsiz kılar — üçüncü değeri itmek RGB'yi yeniden hesaplamadan anlık hover ve active durumları verir.
Seçici display-P3 veya geniş gamut çıktısını destekliyor mu?
Şu anda değil. Seçici sRGB varsayar ve kanal başına 8-bit HEX/RGB çıkışı verir. P3 veya Rec.2020 gerekiyorsa `color(display-p3 0.4 0.5 0.9)` gibi CSS Color Level 4 sözdizimi yayan bir araç kullanın. Tüm hedeflerde tarayıcı desteği stabilleştiğinde bunu ekleyebiliriz.
Kaydedilen renk geçmişim neden kayboldu?
Geçmiş bu alana bağlı localStorage'da kalır. Tarayıcı verilerini temizlemek, gizli/incognito mod kullanmak veya tarayıcı değiştirmek sıfırlar. Kota sorunlarını önlemek için sınır 20 girdidir — yeniler eklendikçe eskiler çıkarılır.