Web tasarımda üç ana renk formatı kullanılır: HEX, RGB ve HSL. Her biri farklı senaryolarda avantaj sağlar. Formatları ve aralarındaki dönüşümleri anlamak, renk manipülasyonu ve tutarlı palet oluşturma için gereklidir.
HEX (#ff0000) web'de en yaygın kullanılan formattır. RGB additive renk modelini (kırmızı, yeşil, mavi) temsil eder. HSL ise ton, doygunluk ve parlaklık ile çalışır; programatik renk değişimi için en uygun formattır.
HEX Formatı
HEX (onaltılık) formatı # ile başlar ve 6 karakter (RRGGBB) veya kısa formda 3 karakter (RGB) alır. Her kanal 0-255 arası değeri 00-FF olarak gösterir. Örn: #ff0000 = kırmızı, #fff = beyaz. 8 karakterlik format (#RRGGBBAA) alfa (şeffaflık) ekler.
color: #ff0000; /* Kırmızı */ color: #00ff00; /* Yeşil */ color: #0000ff; /* Mavi */ color: #fff; /* Beyaz (kısa) */ color: #ff000080; /* Yarı saydam kırmızı */
RGB Formatı
RGB(red, green, blue) her kanalı 0-255 arası sayı ile verir. rgb(255, 0, 0) kırmızıdır. rgba() ile alfa kanalı (0-1) eklenir. Görüntü işleme ve programatik hesaplamalarda yaygındır.
HSL Formatı
HSL(hue, saturation, lightness) renk çarkı mantığında çalışır. Hue 0-360 (derece), saturation ve lightness 0-100 (yüzde). Ton değiştirerek renk ailesi oluşturulur; lightness ile tints/shades üretilir.
/* HSL(220, 70%, 50%) = mavi ana renk */ /* Lightness artırılarak tint: */ --blue-400: hsl(220, 70%, 60%); --blue-300: hsl(220, 70%, 70%); --blue-100: hsl(220, 70%, 90%);
Dönüşüm Formülleri (Kavramsal)
HEX ↔ RGB: Her HEX karakter çifti (örn. ff) onluk sayıya (255) çevrilir. RGB → HSL: Max, min değerlerden hue hesaplanır; saturation ve lightness formüllerle türetilir. JavaScript ile parseInt(hex.substr(1,2), 16) gibi yöntemler kullanılır.
Hangi Format Ne Zaman?
HEX: Statik renkler, tasarım dosyalarından kopyalama, kısa ve okunaklı kod. RGB/RGBA: Alfa ile şeffaflık gerektiğinde. HSL: Dinamik tema, programatik tint/shade, renk değişimi animasyonları.
İlgili rehberler: Palette, Shades, Tints · CSS Değişkenleri · Araç · Marka Renkleri