Bir rengi yazmanın üç yolu
| HEX | #2563D9 |
| RGB | rgb(37, 99, 217) |
| HSL | hsl(219, 71%, 50%) |
Üçü de aynı mavidir. Ekranlar her rengi kırmızı, yeşil ve mavi ışıktan karıştırır ve her biçim bu miktarları yazmanın farklı bir yoludur.
RGB ve HEX
RGB kırmızı, yeşil ve maviyi 0’dan 255’e verir. HEX aynı üç sayıyı 16 tabanında, her biri iki basamak olarak yazar: 25, 37; 63, 99; D9 ise 217’dir. #FFF gibi kısa bir kod her basamağı ikiler (#FFFFFF, beyaz) ve dördüncü bir çift saydamlık ekler (#2563D980 yaklaşık yarı saydamdır).
HSL
HSL bir rengi insanların düşündüğü gibi tanımlar: ton, renk çarkındaki derece cinsinden konumdur (0 kırmızı, 120 yeşil, 240 mavi), doygunluk ne kadar güçlü olduğudur, açıklık da %0’da siyahtan %100’de beyaza uzanır. Bu daha açık ya da koyu bir ton yapmayı kolaylaştırır: tonu ve doygunluğu koru, açıklığı değiştir.
CMYK baskı içindir
Yazıcılar ışık yerine camgöbeği, eflatun, sarı ve siyah mürekkep karıştırır. RGB ile CMYK arasındaki dönüşümler yaklaşıktır, çünkü ekranlar ve mürekkepler tam olarak aynı renk aralığını gösteremez.
Metin için kontrast
WCAG erişilebilirlik yönergeleri AA düzeyinde normal metin için en az 4,5:1, büyük metin için 3:1 kontrast oranı ister. Renk dönüştürücü tüm bu biçimler arasında dönüştürür ve kontrastı beyaz ve siyah metne karşı kontrol eder. Bir fotoğraftaki ya da ekran görüntüsündeki bir rengin kodunu bulmak için Görselden renk seçiciyi kullan.
HSL ile palet kurmak
Renk tonunu koru ve açıklığı değiştir; böylece birbiriyle uyumlu bir tonlar takımı elde edersin. Orta mavi olan hsl(219, 71%, 50%)’den:
| Kullanım | HSL | HEX |
|---|---|---|
| Üzerine gelme arka planı | hsl(219, 71%, 95%) | #E9F0FB |
| Kenarlık | hsl(219, 71%, 80%) | #A8C1F0 |
| Düğme | hsl(219, 71%, 50%) | #2564DA |
| Basılı düğme | hsl(219, 71%, 40%) | #1E50AE |
| Başlık yazısı | hsl(219, 71%, 25%) | #12326D |
Aynı şeyi HEX ile yapmak üç sayıyı birden tahmin etmek demektir; tasarım araçlarının HSL ile çalışmasının nedeni budur.
Karşıtlığı kontrol etmek
O mavi, beyaza karşı 5,37:1 karşıtlık oranı verir; bu, normal yazı için 4,5:1’i geçer. Siyaha karşı yalnızca 3,91:1’dir; yani düğmede siyah değil beyaz yazı kullan. Karşıtlık renk tonundan çok açıklığa bağlıdır; bu yüzden orta açıklıkta bir renk çoğu zaman ikisine karşı da başarısız olur.
Yaygın hatalar
- Aynı açıklığın eşit parlak görünmesini beklemek. hsl(60, 100%, 50%) canlı bir sarı, hsl(240, 100%, 50%) koyu bir mavidir. Gözlerimiz maviden çok yeşile duyarlıdır. Karşıtlığı kontrol et, açıklık sayısına güvenme.
- HSL ile HSB’yi karıştırmak. Photoshop’un HSV de denen HSB’si HSL değildir. %100 parlaklık ve %100 doygunlukta HSB saf bir renk tonu verirken HSL’de %100 açıklık her zaman beyazdır.
- Desteklenmeyen yerde saydamlıklı bir HEX kodu yazmak. Sekiz basamaklı HEX tarayıcılarda çalışır, ama birçok uygulama ve eski araç yalnızca altı basamak kabul eder.
- Bir ekran görüntüsünün renklerine bakarak karar vermek. JPG olarak sıkıştırılmış bir ekran görüntüsü piksel değerlerini kaydırır; yani seçilen bir renk birkaç adım sapabilir. PNG’den seç.