HEX Renk Seçici
Tasarımcılar ve geliştiriciler, aynı renki günde yüz kez dört farklı gösterimde kullanırlar. 2 boyutlu doygunluk/ değer alanındaki herhangi bir noktaya tıklayın, rengi ayarlama kaydırıcısını sürükleyin veya bir değer yapıştırın; bu seçici, HEX, RGB, HSL, HSV ve CMYK değerlerini yan yana gösterir ve renk okunabilir olup olmadığını anında belirtmek için siyah-beyaz üzerinde WCAG kontrast kontrolü uygulanır.
Bir renk nasıl seçerim?
-
1
Bir renk seçin
Dikey renk kaydırıcısını tam 0–360° spektrumu boyunca sürükleyin.
-
2
Tükenim doygunluğu ve değer
Renkinin ne kadar canlı ve parlak olacağını ayarlamak için 2 boyutlu kare içinde tıklayın veya sürükleyin.
-
3
Girişlerle ayarlayın.
Doğru değerleri HEX, RGB, HSL, HSV veya CMYK formatında girin; beş alan da senkronize kalır.
-
4
Erişilebilirliği kontrol edin ve kopyalayın
Siyah-beyaz karşıtlık oranları doğrudan görünür; bir tıklamayla ihtiyaç duyduğunuz notasyonu kopyalayabilirsiniz.
Uygulamada renk notasyonları
Her renk modeli biraz farklı bir soruyu yanıtlar.
Notasyon referansı
| Notasyon | Bileşenler | Kullanıldığı yer |
|---|---|---|
| HEX | #RRGGBB | CSS, tasarım araçları, marka rehberleri |
| RGB | kırmızı 0–255, yeşil 0–255, mavi 0–255 | CSS rgb(), görüntü düzenleyicileri |
| HSL | renk tonu (0–360°), doygunluk (%), açıklık (%); CSS hsl(), tasarım sistemleri |
|
| HSV/HSB | renk tonu 0–360°, doygunluk (%), değer/parlaklık (%) | Photoshop ve Figma renk seçicileri |
| CMYK | siyan %, magenta %, sarı %, ana renk/siyah % | Çap, ön baskı |
| OKLCH | Hafiflik %, kroma, renk tonu | Modern CSS Renk Modülü 4 paleti |
Yaklaşabilirlik Kontroli
WCAG 2.2, metin ile arka plan arasındaki minimum kontrast oranlarını belirler:
- Normal metin için AA: ≥ 4,5:1
- Büyük metin için AA (18 pt veya 14 pt kalın): ≥ 3:1
- Normal metin için AAA: ≥ 7:1
Seçici, beyaz ve siyah renklere karşı oranı gerçek zamanlı olarak hesaplar. özel bir ön plan rengi kritikse her renk çifti için özel bir kontrast kontrol aracı kullanın.
İpuçları
- HEX, çoğu tasarım aracında standart değerdir; ancak kısa üç haneli heksadesimal ifade (
#F60),#FF6600’e eşdeğerdir ve#F06060’e değil. - HSL, palet oluşturma açısından daha uygundur: renk tonunu sabit tutun ve tonlar ile gölgeler için aydınlatma düzeyini değiştirin.
- CMYK ve RGB renk sistemleri tam olarak birbirine dönüştürülemez; CMYK’yi basmak basım profiline bağlıdır. Her zaman çalışmayı gerçek kağıt üzerinde kontrol basımıyla doğrulayın.
- Modern CSS için tasarımlar yapıyorsanız, algısal olarak eşit aydınlanma gradeleri için OKLCH formatını değerlendirin.
Sık Sorulan Sorular
Photoshop, bir renk profili uygular (genellikle ekran için sRGB; basım için genellikle farklıdır). Tarayıcılar etiketlenmemiş HEX değerlerini sRGB olarak render eder. Belgeniz Adobe RGB veya ProPhoto moduna ayarlanmışsa piksel değerleri aynı olur ancak algılanan renkler değişir.
Evet — her ikisi de tam kırmızıyı tanımlar; kırmızı renk 255’te, yeşil ve mavi renkler ise sırasıyla 0’da yer alır. HEX, her bir 0–255 aralığındaki kanal değerini temsil eden iki haneli on altıslık notasyondur.
Başlıca renkınızı seçin, HSL formatına geçin ve ton ile doygunluğu sabit tutarak aydınlanmayı %10 aralıklarla değiştirin. Aynı ton üzerinde yer alan tutarlı bir ton ölçeği elde edersiniz.
Son kullanılmış renkler tarayıcınızın yerel depolamasında saklanır ve yenileme işlemi sırasında da korunur. Hiçbir veri sunucuya gönderilmemeştir ve palet tarihi her zaman silinabilir.