Bir renk kodunu yazın ya da paletten seçin; araç HEX, RGB, HSL ve
yaklaşık CMYK karşılığını, üstüne hangi yazı renginin okunaklı düştüğünü ve aynı tonun açıktan koyuya
basamaklarını birlikte gösterir. Aşağıda 148 CSS renk adının tamamı kodlarıyla listelidir.
CSS renk adları ve kodları
Renk tablosu yükleniyor…
1. Renk kodu nedir, kaç biçimi var?
Ekranda bir renk, kırmızı-yeşil-mavi ışığın karışımıyla üretilir. Aynı rengi yazmanın birden çok yolu
vardır; hepsi aynı üç kanalı farklı biçimde ifade eder:
| Biçim | Örnek | Ne söyler |
|---|---|---|
| HEX | #663399 |
Üç kanalın 16’lık tabanda iki haneli karşılığı. Web’de en yaygın yazım. |
| RGB | rgb(102, 51, 153) |
Her kanal 0-255 arası. HEX ile birebir aynı bilgidir. |
| HSL | hsl(270, 50%, 40%) |
Ton (0-360°), doygunluk ve parlaklık. Rengi açıp koyultmak için en kullanışlısı. |
| CMYK | 33.3% · 66.7% · 0% · 40% | Baskı için dört mürekkep. Ekran değeriyle birebir karşılığı yoktur; yaklaşıktır. |
Kısa HEX yazımı: üç haneli kod, her hanenin iki kez yazılması demektir.
#f90 ile #FF9900 aynı renktir — araç kısa yazımı da kabul eder.
Sekiz haneli yazımda son iki hane saydamlıktır.
2. HEX, RGB ve HSL arasında dönüşüm
HEX ile RGB arasındaki geçiş yalnızca taban değiştirmektir: #FF0000 kodundaki
her iki hane bir kanalın 0-255 değerini verir, yani rgb(255, 0, 0). HSL ise farklıdır; renk aynı
kalır ama ton, doygunluk ve parlaklık olarak ayrışır. Bu ayrışma, bir rengin açık ve koyu
tonlarını üretmeyi kolaylaştırır: ton ile doygunluğu sabit tutup yalnız parlaklığı değiştirmek yeter.
Araçtaki basamak şeridi tam olarak bunu yapar.
HSL’de parlaklık %100 ise renk beyaz, %0 ise siyahtır; doygunluk %0 olduğunda ton ne olursa olsun
gri çıkar. Bu yüzden #FFFFFF için ton bilgisi anlamsızdır ve araç
hsl(0, 0%, 100%) gösterir.
Dönüşüm formülleri ve renk adı tablosu CSS Color Module Level 4’ün
referans
uygulamasından alınmıştır.
3. Renk kontrastı: yazı okunuyor mu?
Bir rengi seçerken asıl soru çoğu zaman “güzel mi” değil, üstündeki yazı okunuyor mu
olur. WCAG bunu ölçülebilir hâle getirir: iki rengin göreli parlaklıkları hesaplanır ve oranları alınır.
Sonuç 1:1 (aynı renk) ile 21:1 (siyah-beyaz) arasında çıkar.
| Renk çifti | Oran | AA normal (4,5:1) | AA büyük (3:1) | AAA (7:1) |
|---|---|---|---|---|
#000000 / #FFFFFF |
21:1 | geçer | geçer | geçer |
#767676 / #FFFFFF |
4.54:1 | geçer | geçer | kalır |
#777777 / #FFFFFF |
4.48:1 | kalır | geçer | kalır |
#FF0000 / #FFFFFF |
4:1 | kalır | geçer | kalır |
#663399 / #FFFFFF |
8.41:1 | geçer | geçer | geçer |
#FFFF00 / #FFFFFF |
1.07:1 | kalır | kalır | kalır |
Tablodaki #767676 ve #777777 çifti, eşiğin ne kadar keskin olduğunu gösterir:
tek basamaklık fark AA ölçütünü geçmekle kalmak arasındaki sınırdır. Sarının beyaz üstünde neredeyse
görünmez olması da buradan anlaşılır.
Kontrast yalnız yazı için değil, okunması gereken her desen için geçerlidir.
Renkli bir QR kod ürettiyseniz koyu modüllerle açık zemin
arasındaki oran yetersizse tarayıcı kodu hiç okuyamaz; rengi değiştirmeden önce buradaki orana bakmak
işi kurtarır.
Sık yapılan hata: kontrastı “renkler birbirinden farklı mı” diye göz kararı
değerlendirmek. Parlaklık formülü yeşile kırmızıdan üç kat fazla ağırlık verir; bu yüzden koyu mavi ile
koyu yeşil gözle ayrışsa da aralarındaki kontrast düşük olabilir.
Kontrast tanımı ve eşikler WCAG’in kendi metnindendir. Kanal eşiği 0,04045
değeri Mayıs 2021’de 0,03928’den güncellenmiştir; eski değerle hesaplayan araçlar sınır durumlarda
başka sonuç verebilir.
4. CSS renk adları ve Türkçe karşılıkları
CSS, 148 rengi adıyla tanır; red yazmak #FF0000 yazmakla
aynıdır. Araçtaki tabloda bunların tamamı kodlarıyla listelidir ve 73 tanesi için yaygın Türkçe
karşılık verilmiştir. Birkaç örnek:
- beyaz —
white, #FFFFFF - siyah —
black, #000000 - bordo —
maroon, #800000 - domates kırmızısı —
tomato, #FF6347
Türkçe adlar yaklaşık karşılıklardır: “bordo” ya da “krem” gibi sözcüklerin tek bir resmî kod
karşılığı yoktur, ton aralığını anlatırlar. Araç bir renk için tam eşleşme bulamazsa en yakın adı
“yaklaşık” diye işaretler — bu ayrımı gizlemek yanlış güven verirdi.
Bazı adlar aynı renge işaret eder: aqua ile cyan, grey ile
gray aynı koddur. Listede ikisi de yer alır.
5. RAL ve Pantone kodları neden burada yok?
“Vizon RAL kodu”, “krem RAL kodu” ya da Pantone karşılığı arayanlar için açık cevap: bu araç
RAL ve Pantone eşleşmesi vermiyor. Sebebi bilgi eksikliği değil, bu sistemlerin yapısı:
- RAL ve Pantone özel kartela sistemleridir; renkler basılı kartela üzerinde tanımlıdır,
kod → ekran (sRGB) karşılıkları resmî olarak yayımlanmaz. - İnternette dolaşan RAL HEX listeleri birbirini tutmaz; aynı kod için farklı kaynaklarda gözle
ayırt edilebilecek kadar farklı değerler bulunur. - Boya, kaplama ya da baskı işinde karar verirken ekran değeri zaten yeterli değildir; yüzey, ışık ve
mürekkep sonucu değiştirir.
Doğrulayamadığımız bir eşleşmeyi basmaktansa basmamayı seçtik. Boya kodu arıyorsanız üreticinin
kendi kartelasına bakmak tek güvenilir yoldur.
6. CMYK değerine neden “yaklaşık” diyoruz?
Ekran renkleri ışıkla (RGB), baskı renkleri mürekkeple (CMYK) üretilir ve ikisinin kapsadığı renk
aralığı aynı değildir. Gerçek dönüşüm, kullanılan kâğıt ve baskı makinesine ait bir ICC profiline
bağlıdır. Araçtaki CMYK değeri profilsiz, doğrudan formülle bulunan yaklaşıktır: yön verir, matbaaya
gönderilecek kesin değer değildir.
7. Araç hangi girdileri reddeder?
Bir renk aracının sessizce “düzeltmesi” en tehlikeli davranıştır: kullanıcının yazmadığı bir renge cevap
vermiş olur. Bu yüzden eksik ya da aralık dışı girdiler kabul edilmez:
| Girdi | Sonuç |
|---|---|
#12345 |
HEX kodu 3, 4, 6 ya da 8 haneli olmalı (#f00, #ff0000 gibi). |
rgb(256,0,0) |
rgb() kanalları 0-255 arasında olmalı: 256 |
kırmızımsı |
Anlaşılmayan renk: "kırmızımsı". #ff0000, rgb(255,0,0), hsl(0,100%,50%) ya da renk adı yazın. |
Örneğin rgb(256,0,0) girdisi 255’e kırpılmaz; kırpılsaydı ekranda kırmızı görünür ama
kullanıcı yazdığı değerin geçersiz olduğunu hiç öğrenmezdi.
8. Sık sorulan sorular
Beyazın renk kodu nedir?
Beyaz, CSS’te white adıyla tanımlıdır ve kodu #FFFFFF, yani rgb(255, 255, 255). Üç kanalın da en yüksek değerde olması beyazı verir.
Siyahın renk kodu nedir?
Siyahın kodu #000000 (rgb(0, 0, 0)); üç kanal da sıfırdır. Siyah ile beyaz arasındaki kontrast oranı 21:1’dir ve bu ulaşılabilecek en yüksek orandır.
HEX kodu kaç haneli olmalı?
3, 4, 6 ya da 8 haneli olabilir. Üç hane her hanenin iki kez yazılması demektir (#f90 = #FF9900); dört ve sekiz haneli yazımlarda son bölüm saydamlığı belirtir. 5 ya da 7 haneli bir kod geçersizdir.
Bordo rengin kodu nedir?
CSS’te bordoya en yakın adlandırılmış renk maroon‘dur: #800000. “Bordo” bir ton aralığını anlatır, tek bir resmî kodu yoktur; daha koyu ya da mora çalan tonlar için araçtaki basamak şeridinden seçim yapabilirsiniz.
Bir rengin üstüne siyah mı beyaz mı yazmalıyım?
Araç her renk için iki seçeneğin kontrast oranını hesaplar ve yüksek olanı önerir. Normal boyutta yazı için WCAG’in AA ölçütü en az 4,5:1, büyük yazı için 3:1’dir.
RAL ya da Pantone karşılığını veriyor musunuz?
Hayır. RAL ve Pantone özel kartela sistemleridir; kod → ekran rengi karşılıkları resmî olarak yayımlanmadığı için doğrulanabilir bir eşleşme veremiyoruz. İnternetteki listeler birbirini tutmuyor.
Girdiğim renk kodu bir yere kaydediliyor mu?
Hayır. Bütün dönüşümler tarayıcınızda yapılır; yazdığınız kod sunucuya gönderilmez.