Renk Kodu Nedir?
Web geliştirme ve tasarımda renkler üç temel format üzerinden tanımlanır: HEX, RGB ve HSL. Bu araç, seçtiğiniz herhangi bir rengi bu üç formata anında dönüştürür; ayrıca CSS adını ve tamamlayıcı rengi gösterir.
HEX Renk Kodu
HEX (hexadecimal), web geliştirmede en yaygın renk formatıdır. #RRGGBB biçiminde 6 haneli onaltılık sayıdan oluşur. Her çift karakter; kırmızı (R), yeşil (G) ve mavi (B) kanalının yoğunluğunu 00'dan FF'ye (0'dan 255'e) kadar belirtir. Toplamda 256³ = 16.777.216 farklı renk temsil edilebilir. CSS'te color: #FF5733; biçiminde kullanılır; Figma, Adobe XD ve tüm tasarım araçları bu formatı destekler. 3 haneli kısayol (#RGB) da geçerlidir: #F06 → #FF0066.
RGB Renk Modeli
RGB (Red-Green-Blue), dijital ekranların fiziksel yapısını yansıtır. Kırmızı, yeşil ve mavi alt-piksellerden ışık yayılımına dayalı bu modelde her kanal 0–255 arasında değer alır. CSS'te rgb(255, 87, 51) veya rgba(255, 87, 51, 0.8) (şeffaflıkla birlikte) olarak yazılır. RGB değerleri doğrudan monitörün piksellerine karşılık gelir.
HSL Renk Modeli
HSL (Hue-Saturation-Lightness), tasarımcıların rengi algılama biçimine daha yakın bir modeldir. Ton (Hue): 0–360° arasında renk çemberindeki konum — 0°=kırmızı, 60°=sarı, 120°=yeşil, 180°=camgöbeği, 240°=mavi, 300°=mor. Doygunluk (Saturation): %0=gri, %100=canlı renk. Parlaklık (Lightness): %0=siyah, %50=normal, %100=beyaz. Bir rengin açık ve koyu tonlarını oluşturmak için sadece parlaklık değerini değiştirmek yeterlidir; bu HSL'yi renk paleti oluştururken çok pratik kılar.
Tamamlayıcı Renkler
Renk çemberinde birbirinin tam karşısında (180° farkla) yer alan renkler tamamlayıcıdır. Bu çiftler maximum kontrast yaratır: Kırmızı ↔ Camgöbeği, Yeşil ↔ Mor, Mavi ↔ Sarı. Dikkat çekici buton tasarımları, veri görselleştirme grafikleri ve yüksek kontrastlı arayüzlerde bu ilkeden yararlanılır.
Web Erişilebilirliği (WCAG)
Dünya genelinde erkeklerin %8'i, kadınların %0,5'i renk körlüğünden etkilenmektedir. WCAG 2.1 AA standardı, normal metin için en az 4,5:1, büyük metin için en az 3:1 kontrast oranı gerektirir. Bilgiyi yalnızca renkle iletmekten kaçınılmalı; ikon, şekil veya metin etiket eşlik etmelidir.
CSS Adlandırılmış Renkler
CSS standardı 148 adlandırılmış renk içerir: red, navy, coral, teal, tomato, goldenrod gibi. Bu araç seçilen rengi otomatik olarak tanır ve CSS adını gösterir. Kod okunabilirliğini artırır; ancak yalnızca 148 rengi kapsar.
Figma ve Tasarım Araçlarıyla Kullanım
Figma'dan kopyaladığınız HEX kodunu doğrudan bu araca yapıştırarak RGB ve HSL karşılıklarını alabilirsiniz. Tailwind CSS'in renk sistemini incelerken de ton (hue) değerini bu araçla kontrol etmek yararlıdır.
Gizlilik
Tüm hesaplamalar tarayıcınızda gerçekleşir; sunucuya hiçbir veri gönderilmez.
Yorumlar