Renk Araçları Rehberi: Renk Kodları, Paletler ve Tasarım

Renk kodları

HEX: #RRGGBB formatı. Web tasarımında en yaygın. Örn: #FF5733 (kırmızı-turuncu). 6 haneli hex kod, 16 milyon renk.

RGB: rgb(r,g,b) formatı. r,g,b değerleri 0-255 arası. Örn: rgb(255,87,51). Ekranlar RGB kullanır.

HSL: hsl(h,s,l) formatı. h (hue/renk tonu) 0-360°, s (saturation/doyma) 0-100%, l (lightness/parlaklık) 0-100%. Örn: hsl(14,100%,60%).

Dönüşüm: HEX ↔ RGB ↔ HSL. Utilgo renk dönüştürücü ile anında dönüştürme yapabilirsiniz.

Renk paleti oluşturma

Monokromatik: Tek renk tonu, farklı parlaklık/doyma. Uyumlu ve sade.

Analog: Renk çemberinde yan yana renkler (örn. mavi, mavi-yeşil, yeşil). Doğal ve harmonik.

Tamamlayıcı: Renk çemberinde karşılıklı renkler (örn. mavi + turuncu). Yüksek kontrast, dikkat çekici.

Üçlü (Triadic): Renk çemberinde 120° aralıklı 3 renk. Canlı ve dengeli.

Renk kontrastı ve erişilebilirlik

WCAG kontrast oranları: Normal metin için en az 4.5:1, büyük metin için en az 3:1.

Yüksek kontrast: Koyu metin açık arka plan. Okunabilirlik için kritik.

Renk körlüğü: Kırmızı-yeşil körlüğü en yaygın. Renk tek başına bilgi iletmek için kullanmayın — ikon, etiket veya desen ekleyin.

Test araçları: WebAIM Contrast Checker, Chrome DevTools Lighthouse.

Renk seçimi ipuçları

1. Marka renklerinden başlayın. Logo ve marka kimliği renkleri temel alın.

2. 60-30-10 kuralı: %60 dominant renk, %30 ikincil renk, %10 vurgu rengi.

3. Sınırlı palet kullanın. 3-5 renk yeterli.

4. Koyu/açık mod düşünün. İkisinde de iyi görünen renkler seçin.

5. Test edin. Farklı cihazlarda ve ekranlarda renkleri kontrol edin.

Utilgo renk araçları

Utilgo, renk paleti oluşturucu, renk dönüştürücü (HEX↔RGB↔HSL) ve palet çıkarıcı (görselden renk paleti) araçları sunar.