CSS dosyanızda #ff5733 yazıyor. Bir renk olduğunu biliyorsunuz ama bu 6 karakterin arkasındaki matematik çoğu geliştiricinin umurunda bile değil — ta ki bir gün Figma'dan aldığınız kodu elle değiştirmeniz gerekene kadar. Neden ff kırmızıyı, 57 yeşili, 33 maviyi ifade ediyor?
HEX renk kodu web'in doğuşundan bu yana ayakta. 1996'da CSS1 spesifikasyonuyla resmi olarak standartlaştı ve o günden beri hiçbir rakibi onu tahtından edemedi. Tasarımcılar, geliştiriciler, grafik editörleri — herkes bu formatı varsayılan olarak kullanır. Kısa. Okunabilir. Her tarayıcıda sorunsuz.
Birkaç temel kurala dayanır aslında hepsi.
Hexadecimal sayı sistemi nasıl çalışır?
10 tabanlı sistemi bilirsiniz: 0'dan 9'a kadar 10 rakam. Hexadecimal 16 tabanlı. İlk 10 rakam aynı kalır, 10'dan 15'e kadar olan değerler ise harflerle gösterilir — ve işte tam burada kafa karışıklığı başlar:
| Decimal | Hexadecimal |
|---|---|
| 0 | 0 |
| 9 | 9 |
| 10 | A |
| 11 | B |
| 12 | C |
| 13 | D |
| 14 | E |
| 15 | F |
| 255 | FF |
İki haneli bir hexadecimal sayı 00'dan FF'ye kadar 256 farklı değer üretir — tam olarak bir renk kanalının alabileceği aralık. FF decimal 255, 00 ise sıfır. Neden 256? Çünkü 16 x 16 = 256. Bilgisayar biliminde bu sayıya çok rastlarsınız, 8 bitlik veri tam olarak bu kadardır.
HEX renk kodunun yapısı: #RRGGBB
# işaretiyle başlar, ardından 6 hexadecimal karakter gelir. Bu 6 karakter üçe bölünür:
- İlk ikisi: Kırmızı (Red)
- Ortadaki ikisi: Yeşil (Green)
- Son ikisi: Mavi (Blue)
00 o rengin hiç olmadığı, FF ise sonuna kadar açık olduğu anlamına gelir. Basit bir dimmer düşünün — 00 kapalı, FF sonuna kadar açık.
Temel renk örnekleri
#FF0000 → Saf kırmızı (R:255, G:0, B:0)
#00FF00 → Saf yeşil (R:0, G:255, B:0)
#0000FF → Saf mavi (R:0, G:0, B:255)
#FFFFFF → Beyaz (tüm kanallar maksimum)
#000000 → Siyah (tüm kanallar sıfır)
#26BCC2 → Turkuaz (R:38, G:188, B:194)Büyük-küçük harf fark etmez. #26bcc2 ile #26BCC2 aynı rengi üretir. CSS dosyalarında küçük harf daha yaygın — okunabilirlik açısından da tercih edilen bu zaten.
3 haneli kısa yazım: #RGB
Her kanalın iki karakteri birbirine eşitse kısaltabilirsiniz. Tarayıcı her karakteri otomatik olarak çiftler:
#FF0000 → #F00 (kırmızı)
#00FF00 → #0F0 (yeşil)
#FFFFFF → #FFF (beyaz)
#000000 → #000 (siyah)
#336699 → #369 (çelik mavisi)CSS dosya boyutunu azaltmak istiyorsanız işe yarar. Ama her renk kısaltılamaz. #26BCC2 mesela? Hiçbir kanalda iki karakter eşit değil, kısaltma mümkün değil.
Minify araçları bu kısaltmayı otomatik yapar. CSS dosyalarınızı küçültüyorsanız zaten bu dönüşüm sizin yerinize halloluyor.
HEX kodunu RGB'ye nasıl çevirirsiniz?
Aslında çok basit. Her iki karakterlik bloğu decimal sayıya çeviriyorsunuz, o kadar.
#26BCC2 üzerinden gidelim:
26→ (2 x 16) + 6 = 38 (Kırmızı)BC→ (11 x 16) + 12 = 188 (Yeşil)C2→ (12 x 16) + 2 = 194 (Mavi)
Sonuç: rgb(38, 188, 194). Tersi de aynı mantık — her kanalı 16'ya bölüp bölüm ve kalanı hex karakterine dönüştürürsünüz. Tabii bunu elle yapmak gereksiz, otomatik dönüştürme çok daha pratik.
JavaScript ile dönüşüm
Kod tarafında yapmanız gerekirse birkaç satır yeterli. Karmaşık bir şey değil:
// HEX → RGB
const hexToRgb = (hex) => {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgb(${r}, ${g}, ${b})`;
};
// RGB → HEX
const rgbToHex = (r, g, b) => {
return '#' + [r, g, b]
.map(x => x.toString(16).padStart(2, '0'))
.join('');
};parseInt(hex, 16) hex stringi decimal'e, toString(16) decimal'i hex'e çevirir. Dönüşümün tüm sihri bu iki metotta.
Peki diğer formatlar ne işe yarıyor?
Web'de renk tanımlamanın birden fazla yolu var ve hangisini ne zaman kullanacağınız projenize bağlı:
| Format | Yazım | Avantaj | Dezavantaj |
|---|---|---|---|
| HEX | #26bcc2 |
Kısa, yaygın, kopyalanması kolay | Şeffaflık desteği sınırlı |
| RGB | rgb(38, 188, 194) |
Okunabilir, hesaplanabilir | Daha uzun yazım |
| HSL | hsl(184, 67%, 45%) |
Renk varyasyonları kolay | Tasarımcılar dışında az bilinen |
| RGBA | rgba(38, 188, 194, 0.8) |
Şeffaflık kontrolü | En uzun yazım |
Figma'dan veya Photoshop'tan renk kopyaladığınızda büyük ihtimalle HEX gelir. Doğrudan CSS'e yapıştırırsınız, biter. Şeffaflık lazımsa? O zaman RGBA veya HSLA'ya geçmek zorunlu.
HSL ise bambaşka bir dünya. Renk paletleri oluştururken gerçek gücünü gösterir — aynı hue'yu koruyup sadece saturation ve lightness'ı oynayarak tutarlı varyasyonlar elde edersiniz. Tasarım sistemi kuran biri için vazgeçilmez. Bu tür palet işlemleri için renk paleti oluşturma aracı kullanmak pratik bir yöntem.
CSS'te HEX kullanımı ve 8 haneli format
Doğrudan kullanılır, ekstra bir şey gerekmez:
/* Temel kullanım */
body {
background-color: #f8fafc;
color: #0f172a;
}
/* CSS Custom Properties ile */
:root {
--primary: #26bcc2;
--primary-dark: #0c3a3c;
}
.button {
background: var(--primary);
}CSS4 ile 8 haneli format da geldi. Son iki karakter alpha kanalı — yani şeffaflık:
#26bcc280 → %50 şeffaf turkuaz
#26bcc2ff → %100 opak (tam görünür)
#26bcc200 → %0 opak (tamamen şeffaf)Modern tarayıcıların hepsi destekliyor. IE11 mi? O gemiyi çoktan kaçırdık, ama gerçekten eski tarayıcı desteği şartsa RGBA daha güvenli bir seçenek.
CSS renk isimleri ve HEX karşılıkları
CSS'te 140'tan fazla tanımlı renk ismi var. Bunlar aslında birer HEX kodunun takma adı:
red → #ff0000
blue → #0000ff
cyan → #00ffff
coral → #ff7f50
turquoise → #40e0d0
tomato → #ff6347Prototip aşamasında veya hızlı denemeler için kullanışlı. Ama üretim kodunda? HEX veya CSS custom properties tercih edin. tomato yazmak eğlenceli olabilir, ta ki ekipteki biri "bu tam olarak hangi kırmızı?" diye sorana kadar. Renk isimlerinin tam listesini ve HEX karşılıklarını görmek için renk ismi tanıma özelliğini kullanabilirsiniz.
Erişilebilirlik ve kontrast kontrolü
Renk seçimi sadece estetik meselesi değil.
WCAG 2.1 standartları metin ve arka plan arasında belirli kontrast oranları şart koşuyor: normal metin için minimum 4.5:1, büyük metin için 3:1. Bu rakamlar keyfi değil — görme engelli kullanıcıların metni rahatça okuyabilmesi için hesaplanmış eşik değerleri.
Beyaz arka plan (#ffffff) üzerinde açık gri metin (#cccccc) kullanmak 1.6:1 kontrast oranı verir. Standartların çok altında. Görme güçlüğü olan biri bu metni okuyamaz, siz fark etmeseniz bile.
Renk körlüğünü de göz ardı etmeyin. Erkeklerin yaklaşık %8'i bir tür renk körlüğüne sahip — bu düşündüğünüzden çok daha büyük bir oran. En yaygını kırmızı-yeşil renk körlüğü. Formda "kırmızı = hata, yeşil = başarı" yapıp başka hiçbir gösterge koymamak, bu kullanıcılar için tamamen anlamsız bir deneyim yaratır. İkon veya metin gibi alternatif göstergeler şart.
Kontrast hesabı relative luminance değerlerine dayanır ve formülü oldukça karmaşık. Elle yapmaya gerek yok, WCAG kontrast kontrolü ile saniyeler içinde test edebilirsiniz.
Hexadecimal sistemin mantığını bir kez kavradığınızda, renk kodlarını okumak ve değiştirmek refleks haline gelir. Tasarım dosyasından CSS'e geçişte, formatlar arası dönüşümde, erişilebilirlik kontrollerinde — bu bilgi sürekli karşınıza çıkacak. Renk formatları arasında geçiş yapmak, palet oluşturmak veya kontrast oranlarını kontrol etmek gerektiğinde her şeyi tek bir yerden halledebilirsiniz.