Makale
Web için renk araçları: hex, paletler ve erişilebilirlik
Bir web sitesi için renk seçmek, aynı şeyi farklı biçimlerde tanımlayan hex kodları, RGB üçlüleri ve HSL açılarıyla karşılaşana kadar basit görünür. Bu makale, bu biçimlerin birbiriyle nasıl ilişkili olduğunu, tek bir marka rengini kullanışlı bir palete nasıl dönüştüreceğinizi ve sonucun renkleri farklı gören kişiler için okunaklı kalmasını nasıl sağlayacağınızı anlatıyor.
Hex, RGB ve HSL aynı rengi tanımlar
Ekrandaki bir renk, kırmızı, yeşil ve mavi ışığın karışımından oluşur. Hex gösterimi bu üç kanalı altı karakterlik bir kod olarak yazar, örneğin #2563eb, burada her karakter çifti 00 ile ff arasında bir kanaldır. RGB aynı üç sayıyı 0 ile 255 arasında ondalık olarak yazar; bu okunması daha kolaydır ama fazladan bir şey söylemez. HSL konuya farklı açıdan yaklaşır: rengi tonu (renk çarkında 0 ile 360 derece arası bir konum), doygunluğu (ne kadar canlı olduğu) ve açıklığı (beyaza veya siyaha ne kadar yakın olduğu) üzerinden tanımlar. HSL, tasarımcıların bir rengi ince ayar yapmak istediklerinde başvurduğu biçimdir, çünkü açıklığı artırmak veya tonu kaydırmak üç bağlı sayı yerine tek ve sezgisel bir değişikliktir. Bir dönüştürücü, üçü arasında geçiş yapmanızı sağlar; böylece bir değeri bir biçimde okuyup başka bir biçimde kullanabilirsiniz.
Tek bir rengi palete dönüştürmek
Tek bir marka rengi nadiren yeterli olur. İşe yarayan bir palet genellikle bir ana renge, bir veya iki vurgu rengine ve metin ile arka planlar için bir dizi nötr griye ihtiyaç duyar. Renkler arasındaki ilişkiler renk çarkında basit kurallara uyar: tamamlayıcı renkler birbirinin karşısında durur, analog renkler sakin bir his için yan yana durur ve üçlü bir set, çatışmadan kontrast sağlamak için üç rengi eşit şekilde yayar. Bir renk şeması aracı bu kuralları başlangıç renginize uygular ve eşleşen hex kodlarını verir, böylece açıları elle hesaplamak zorunda kalmazsınız. Havasını beğendiğiniz bir görseliniz varsa, bir palet çıkarıcı baskın renkleri ondan okur; bu da bir siteyi bir fotoğrafa veya logoya dayandırmanın hızlı bir yoludur.
Kontrast ve renk körlüğü
Kendi ekranınızda güzel görünen bir palet yine de okuyucuları yanıltabilir. Yaklaşık her on iki erkekten birinde ve her iki yüz kadından birinde bir tür renk görme eksikliği vardır; en yaygını kırmızıyı yeşilden ayırmakta güçlüktür. Bir hata için tek işaretiniz yeşil bir düğme üzerindeki kırmızı metinse, bu okuyucular onu kaçırır. Çözüm renkten kaçınmak değil, asla yalnızca renge güvenmemektir: onu bir simge, bir etiket veya bir biçimle eşleştirin ve metin ile arka planı arasında yeterli açıklık kontrastı koruyun. Bir renk körlüğü simülatörü, paletinizin yaygın renk görme türlerinde nasıl göründüğünü size gösterir; böylece bir sorunu bir şikayetten sonra değil, yayınlanmadan önce yakalayabilirsiniz.
Tüm bunları tarayıcıda yapmak
Bu adımların hiçbiri sunucu gerektirmez. Bir hex kodunu dönüştürmek, bir şema oluşturmak, bir görselden renkleri okumak ve renk körlüğünü simüle etmek tarayıcının anında ele aldığı küçük hesaplamalardır. Örneklediğiniz görsel yayınlanmamış bir tasarım veya bir müşteri logosu olduğunda bunun önemi vardır: buradaki araçlarla dosya cihazınızda kalır ve hiçbir şey karşıya yüklenmez. Çevrim içi bir hizmetten alacağınız sonucun aynısını, eseri teslim etmeden elde edersiniz. Renk dönüştürücü, renk şeması üreteci, palet çıkarıcı ve renk körlüğü simülatörünün tümü yerel olarak çalışır ve sayfa yüklendikten sonra çevrim dışı da aynı şekilde çalışır.
OKLCH ve daha geniş renk uzayları
Hex, RGB ve HSL, ekranların yıllardır kullandığı sRGB gamutundaki renkleri tanımlar. Yeni nesil ekranlar daha fazlasını gösterebilir ve CSS artık buna color() fonksiyonu ile Display P3 uzayı aracılığıyla ulaşabilmektedir; bu uzay sRGB'nin temsil edemediği canlı yeşil ve kırmızıları kapsar. Daha büyük değişim ise OKLCH'tir: rengi parlaklık, kroma ve ton olarak yazmanın bir yoludur ve gözün parlaklığı gerçekte nasıl algıladığını yansıtır. HSL'de aynı %50 parlaklıkta bir sarı ile bir mavi birbirinden çok farklı görünür: sarı parlak okur, mavi koyu okur. OKLCH'te ise parlaklığı sabit tutup yalnızca tonu değiştirmek, algılanan parlaklığı tutarlı kılar. Bu da her gölgeyi aynı kontrast hedefine ulaştıran bir palet oluşturmayı pratik hale getirir: tek bir sayıyı kilitleyerek, her rengi tek tek ayarlamak yerine bu hedefe varabilirsiniz.
Bu makaledeki araçlar
- Renk DönüştürücüRenkleri HEX, RGB, HSL, HSV ve CMYK arasında dönüştürün. WCAG kontrast denetleyici dahil. Yükleme yok.
- Renk Şeması OluşturucuTemel renkten tamamlayıcı, benzer, üçlü, dörtlü ve monokromatik palet oluşturun. Yükleme yok.
- Renk paleti çıkarıcıBir görüntüden baskın renkleri HEX renk örnekleri olarak çıkarın. Herhangi bir rengi kopyalayın. Yükleme yok.
- Renk körlüğü simülatörüBir görüntü üzerinde protanopia, deuteranopia, tritanopia ve akromatopsiyi simüle edin. Yükleme yok.
Sıkça sorulan sorular
Hex ile RGB arasındaki fark nedir?
Bunlar aynı rengi yazmanın iki yoludur. Hex, kırmızı, yeşil ve mavi kanalları 16 tabanında altı karakterlik bir koda sıkıştırır, RGB ise aynı üç kanalı 0 ile 255 arası ondalık sayılar olarak listeler. #ff0000 ve rgb(255, 0, 0) aynı kırmızıdır. Hex derli topludur ve CSS ile tasarım dosyalarında yaygındır, RGB ilk bakışta okunması daha kolaydır ve aralarında dönüşüm yapmak rengin kendisinde hiçbir şeyi değiştirmez.
Renklerimin renk körü kullanıcılar için okunaklı olup olmadığını nasıl anlarım?
Paletinizi bir renk körlüğü simülatöründen geçirin; bu araç renklerinizi, her yaygın renk görme türüne sahip birinin göreceği biçimde yeniden çizer. Aynı tona indirgenen çiftlere, özellikle kırmızı ve yeşillere dikkat edin. En güvenli alışkanlık rengi tek ipucu olarak kullanmamaktır: metin, simge veya desenle destekleyin ve ön plan ile arka plan arasında net bir açıklık farkı koruyun; böylece ton kaybolsa bile anlam korunur.