Renk Kodu Oluşturucu
HEX, RGB, HSL formatlarında renk kodları oluşturun ve renk paletleri keşfedin
Kontrast Kontrolü (WCAG)
Metin ve arka plan renkleri arasındaki erişilebilirliği test edin →
Renk Kodu Nedir?
Renk kodu, dijital ortamda bir rengi tanımlamak için kullanılan standart bir sistemdir. Web tasarımı, grafik tasarım ve yazılım geliştirmede renkler bu kodlarla ifade edilir. En yaygın kullanılan formatlar HEX, RGB ve HSL'dir.
HEX (Hexadecimal) formatı, # işareti ile başlayan 6 haneli bir koddur. Örneğin #FF5733 turuncu-kırmızı bir rengi temsil eder. Web sitelerinde CSS'de en çok kullanılan formattır çünkü kısa ve özdür.
RGB (Red, Green, Blue) formatı, kırmızı, yeşil ve mavi ışık değerlerinin 0-255 arasında bir sayı ile ifade edilmesidir. rgb(255, 87, 51) şeklinde yazılır. Ekran tabanlı tasarımlarda tercih edilir.
Renk Formatları Karşılaştırması
HEX Kodu
Format: #RRGGBB
Örnek: #00BFA5
Kullanım: CSS, HTML, tasarım programları. En yaygın format.
RGB Kodu
Format: rgb(R, G, B)
Örnek: rgb(0, 191, 165)
Kullanım: CSS, JavaScript, ekran tasarımları.
HSL Kodu
Format: hsl(H, S%, L%)
Örnek: hsl(168, 100%, 37%)
Kullanım: Ton (Hue) ile renk seçimi kolay. Açık/koyu tonlar için ideal.
Renk Paleti Nedir?
Bir tasarımda uyumlu kullanılabilecek renk kombinasyonlarıdır. Tamamlayıcı, üçlü, benzer ve dörtlü harmoniler en popüler palette türleridir.
Renk Harmonileri
Renk teorisinde harmonik ilişkiler, birlikte iyi görünen renk kombinasyonlarını tanımlar:
| Harmoni Türü | Açıklama | Kullanım Alanı |
|---|---|---|
| Tamamlayıcı (Complementary) | Renk tekerleğinde karşılıklı renkler (180°) | Kontrast vurgu, CTA butonları |
| Üçlü (Triadic) | Eşit aralıklı 3 renk (120°) | Canlı, enerjik tasarımlar |
| Benzer (Analogous) | Yan yana renkler (30°) | Sakin, uyumlu tasarımlar |
| Bölünmüş Tamamlayıcı | Tamamlayıcının iki yanı (150°, 210°) | Kontrast ama yumuşak |
| Dörtlü (Tetradic) | 4 renk, dikdörtgen yapı (90°) | Zengin, çok renkli tasarımlar |
Sıkça Sorulan Sorular
HEX kodunun her 2 hanesi bir renk kanalını temsil eder. #FF5733 için: FF=255 (kırmızı), 57=87 (yeşil), 33=51 (mavi). Yani rgb(255, 87, 51). Bu araç ile otomatik dönüşüm yapabilirsiniz.
CSS'de en yaygın olarak HEX kullanılır (#00bfa5). Şeffaflık gerekiyorsa RGBA (rgba(0, 191, 165, 0.5)) tercih edilir. HSL ise renk tonlarını kolayca ayarlamak için kullanışlıdır.
Renk teorisi kurallarına göre harmoni türlerini kullanabilirsiniz. Tamamlayıcı renkler kontrast, benzer renkler ise uyum sağlar. Bu araç, seçtiğiniz renge göre otomatik palette önerileri sunar.
Sadece renge değil, şekil ve metin gibi ek göstergelere de yer verin. Yeterli kontrast oranı sağlayın (WCAG standartlarına göre en az 4.5:1). Kırmızı-yeşil kombinasyonlarından kaçının.
Renk Kodları Sıkça Sorulan Sorular
HEX, renkleri # ile başlayan 6 haneli onaltılık kodla ifade eder (örn: #FF5733). RGB ise Kırmızı, Yeşil, Mavi değerlerini 0-255 arası sayılarla belirtir (örn: rgb(255, 87, 51)). İkisi de aynı rengi farklı gösterimlerle ifade eder.
HSL (Hue, Saturation, Lightness), rengi ton, doygunluk ve açıklık olarak tanımlar. Tasarımcılar için daha sezgiseldir çünkü bir rengin açık/koyu tonlarını kolayca ayarlayabilirsiniz.
CSS'de en yaygın kullanılan format HEX'tir. Saydamlık (opacity) gerekiyorsa RGBA veya HSLA tercih edilir. Modern tarayıcılar tüm formatları destekler.