--- title: 'Renk Gösterimleri' source: 'https://academia.sh/tr/kurslar/css-temelleri/renk-gosterimleri' course: 'CSS ile Görsel Sunum' language: tr updated: '2026-08-17T18:09:18+00:00' license: 'CC BY-SA 4.0' --- # Renk Gösterimleri Adlandırılmış, onaltılık ve fonksiyonel renk yazımları; RGB ile HSL arasındaki dönüşüm ve renk uzayı seçiminin ölçek üretmedeki sonucu. Önceki konu kutuların ölçüsünü, dizilişini ve sınırlarını kurdu. Ortaya çıkan sayfa yapılı ama renksiz: bütün kararlar geometriye ilişkindi. Bu konu görsel özellikleri ele alır ve ilk soru rengin kendisidir. Bir rengin CSS'te dört ayrı yazımı vardır ve aralarında geçiş hesapla yapılır. Yazımın seçilmesi bir üslup tercihi değildir: bazı yazımlar bir rengi **değiştirmeyi** ötekilerden daha uygulanabilir kılar ve bir tasarımın renk ölçeği bu yüzden belirli bir gösterimde kurulur. ## Dört Yazım **Adlandırılmış renk (named color)** sabit bir sözlükten gelen bir addır: `red`, `darkslategray`, `transparent`. Sözlük sabittir ve genişlemez; adlar bir renk sistemi oluşturmaz, tarihsel bir listedir. Tasarımda kullanılmaz. **Onaltılık gösterim (hexadecimal notation)** kırmızı, yeşil ve mavi bileşenlerini onaltılık tabanda yazar: `#143a52`. Bilgisayarlar Nasıl Çalışır kursunda tanımlanan onaltılık taban burada karşılığını bulur — her bileşen bir bayt, iki onaltılık basamak. **Fonksiyonel gösterim (functional notation)** bileşenleri açıkça yazar: `rgb(20 58 82)`, `hsl(203 61% 20%)`, `oklch(30% 0.06 240)`. Fonksiyon adı, sayıların hangi **renk uzayında** okunacağını söyler. **Anahtar sözcükler** bağlamdan renk alır: `currentcolor` ögenin `color` değerini, `transparent` ise tam saydam siyahı verir. ## RGB ile HSL Arasındaki Dönüşüm RGB ve HSL aynı renk kümesini tanımlar; farkları koordinat sistemidir. RGB üç ışık bileşenini, HSL ise ton, doygunluk ve açıklık eksenlerini kullanır. Dönüşüm iki yönlü ve kayıpsızdır. ```js // renk.mjs — onaltilik, rgb ve hsl gosterimleri arasinda cevrim yapar function hexToRgb(hex) { let h = hex.replace("#", ""); if (h.length === 3) h = [...h].map((c) => c + c).join(""); if (h.length === 4) h = [...h].map((c) => c + c).join(""); const r = parseInt(h.slice(0, 2), 16); const g = parseInt(h.slice(2, 4), 16); const b = parseInt(h.slice(4, 6), 16); const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1; return { r, g, b, a }; } function rgbToHsl({ r, g, b }) { const rn = r / 255, gn = g / 255, bn = b / 255; const enB = Math.max(rn, gn, bn), enK = Math.min(rn, gn, bn); const fark = enB - enK; const l = (enB + enK) / 2; let h = 0, s = 0; if (fark !== 0) { s = fark / (1 - Math.abs(2 * l - 1)); if (enB === rn) h = 60 * (((gn - bn) / fark) % 6); else if (enB === gn) h = 60 * ((bn - rn) / fark + 2); else h = 60 * ((rn - gn) / fark + 4); if (h < 0) h += 360; } return { h: Math.round(h), s: +(s * 100).toFixed(1), l: +(l * 100).toFixed(1) }; } const renkler = ["#143a52", "#8a1c1c", "#f5f7f8", "#fff", "#1c2733", "#8a5b00", "#d5dbe0"]; console.log("onaltilik rgb() hsl()"); for (const hex of renkler) { const c = hexToRgb(hex); const h = rgbToHsl(c); console.log( `${hex.padEnd(11)} rgb(${c.r} ${c.g} ${c.b})`.padEnd(34) + `hsl(${h.h} ${h.s}% ${h.l}%)` ); } console.log("\n--- kisa yazimlarin acilimi ---"); for (const hex of ["#fff", "#0a3", "#143a52cc"]) { const c = hexToRgb(hex); console.log(`${hex.padEnd(11)} -> rgb(${c.r} ${c.g} ${c.b}) alfa=${c.a.toFixed(3)}`); } console.log("\n--- ayni tonun acikligi degistirilerek olcek uretimi ---"); const taban = rgbToHsl(hexToRgb("#143a52")); for (const l of [12, 24, 36, 50, 72, 90, 96]) { console.log(`hsl(${taban.h} ${taban.s}% ${l}%)`); } ``` ``` onaltilik rgb() hsl() #143a52 rgb(20 58 82) hsl(203 60.8% 20%) #8a1c1c rgb(138 28 28) hsl(0 66.3% 32.5%) #f5f7f8 rgb(245 247 248) hsl(200 17.6% 96.7%) #fff rgb(255 255 255) hsl(0 0% 100%) #1c2733 rgb(28 39 51) hsl(211 29.1% 15.5%) #8a5b00 rgb(138 91 0) hsl(40 100% 27.1%) #d5dbe0 rgb(213 219 224) hsl(207 15.1% 85.7%) --- kisa yazimlarin acilimi --- #fff -> rgb(255 255 255) alfa=1.000 #0a3 -> rgb(0 170 51) alfa=1.000 #143a52cc -> rgb(20 58 82) alfa=0.800 --- ayni tonun acikligi degistirilerek olcek uretimi --- hsl(203 60.8% 12%) hsl(203 60.8% 24%) hsl(203 60.8% 36%) hsl(203 60.8% 50%) hsl(203 60.8% 72%) hsl(203 60.8% 90%) hsl(203 60.8% 96%) ``` ## Onaltılık Yazımın Kısaltmaları Çıktının ikinci bloğu üç kısaltmayı açıyor. Üç basamaklı yazımda her basamak **ikiye katlanır**: `#fff` yazımı `#ffffff` demektir, `#0a3` yazımı `#00aa33`. Bu, üç basamakla yazılabilen renklerin sayısının 4096 olduğu anlamına gelir — tam kümenin küçük bir alt kümesi. `#0a3` bir yaklaşım değil, tam olarak `#00aa33`'tür. Sekiz basamaklı yazımda son iki basamak **alfa kanalını** taşır. `#143a52cc` yazımında `cc` onaltılık değeri 204'tür ve 255'e bölündüğünde 0.8 verir. Alfa kanalı bir sonraki derste ele alınacak. ## Renk Uzayı Seçimi Bir Ölçek Kararıdır Çıktının ilk bloğunda `#143a52` rengi `hsl(203 60.8% 20%)` olarak yazılıyor. İki gösterim aynı rengi verir; farkları, değiştirmek istendiğinde ortaya çıkar. Bu rengin daha açık bir tonunu üretmek gerekirse, onaltılık gösterimde üç bileşenin de ayrı ayrı hesaplanması gerekir ve ton kayabilir. HSL gösteriminde yalnızca üçüncü sayı değiştirilir; ton ve doygunluk sabit kalır. Çıktının üçüncü bloğu bunu gösteriyor: tek bir tondan yedi basamaklı bir ölçek, yalnızca açıklık değeri değiştirilerek üretildi. Bir tasarımın renk ölçeği bu yüzden ton eksenli bir gösterimde kurulur. HSL'in bilinen bir sınırı vardır: eşit açıklık farkları **algılanan** eşit farklara karşılık gelmez. Aynı açıklık değerinde sarı, maviden belirgin biçimde daha parlak görünür. `oklch()` gibi algısal olarak daha düzgün uzaylar bu sorunu azaltmak üzere tanımlanmıştır ve aynı üç eksene sahiptir: açıklık, renklilik, ton. Bir gösterimin gerçekleştirimlerce tanınıp tanınmadığı sınanabilir: ```css .uyari { background-color: #8a5b00; } @supports (color: oklch(50% 0.1 40)) { .uyari { background-color: oklch(45% 0.12 75); } } ``` Blok, koşul sağlanmazsa yok sayılır ve ilk bildirim yerinde kalır. Önceki derslerde gördüğümüz "geçersiz bildirim atılır" kuralı da aynı sonucu verirdi; `@supports` yazmak niyeti açık kılar. ## Renk Değişkenleri Bir renk ölçeği bir kez tanımlanıp her yerde adıyla çağrılmalıdır. Bunun aracı özel özelliklerdir: ```css :root { --ton: 203; --marka-koyu: hsl(var(--ton) 61% 20%); --marka-orta: hsl(var(--ton) 61% 36%); --marka-acik: hsl(var(--ton) 61% 90%); --zemin: hsl(var(--ton) 18% 97%); --metin: hsl(211 29% 16%); --uyari: hsl(0 66% 33%); } ``` Özel özellikler iki nokta önekiyle tanımlanır ve `var()` ile okunur. Kalıtılan özelliklerdir: kök ögede tanımlanan bir değer bütün alt ağaçta okunabilir. Bu, bir bileşenin içinde değeri yeniden tanımlayarak o alt ağaç için değiştirmeyi de mümkün kılar. Buradaki yazımın bir yan sonucu var: `--ton` tek bir yerde tutulduğu için bütün ölçek tek bir sayının değiştirilmesiyle kaydırılabilir. Bir uyarı gerekir: özel özelliğin değeri ayrıştırma sırasında doğrulanmaz. `--marka-koyu` değerine geçersiz bir şey yazılırsa hata, değerin kullanıldığı yerde ortaya çıkar ve o bildirim düşer. ## İstasyon Sayfasının Renk Ölçeği ```css /* istasyon.css — 16. adım: renk ölçeği */ :root { --ton: 203; --marka-koyu: hsl(var(--ton) 61% 20%); --marka-acik: hsl(var(--ton) 61% 90%); --zemin: hsl(var(--ton) 18% 97%); --cizgi: hsl(207 15% 86%); --metin: hsl(211 29% 16%); --metin-soluk: hsl(211 12% 45%); --uyari: hsl(0 66% 33%); --dikkat: hsl(40 100% 27%); } body { color: var(--metin); } .kunye { background-color: var(--zemin); border-block-end-color: var(--marka-koyu); } .olcum-cizelgesi th, .olcum-cizelgesi td { border-block-end-color: var(--cizgi); } .eksik { color: var(--uyari); } .kaynak-notu { color: var(--metin-soluk); } ``` Ölçekteki adlar rengi değil **işlevi** adlandırıyor: `--uyari`, `--cizgi`, `--metin-soluk`. Bu, seçicilerdeki adlandırma ilkesinin renklere uygulanmış hâlidir. `--kirmizi` adlı bir değişken, uyarı rengi turuncuya çevrildiğinde yalan söylemeye başlar. `currentcolor` anahtar sözcüğü bu ölçekle birlikte kullanışlıdır: bir kenarlığa `border-color: currentcolor` yazmak, kenarlığı metin rengine bağlar ve `.eksik` sınıfı metni kırmızıya çevirdiğinde kenarlık da onunla birlikte değişir. Tek bir bildirim iki özelliği eşzamanlı tutar. ## Özet - Bir renk dört biçimde yazılır: adlandırılmış sözlükten, onaltılık gösterimle, fonksiyonel gösterimle ve bağlamdan renk alan anahtar sözcüklerle. - Onaltılık yazımda üç basamaklı biçim her basamağı ikiye katlar; sekiz basamaklı biçimde son iki basamak alfa kanalını taşır. - RGB ve HSL aynı renk kümesini farklı koordinatlarla tanımlar; dönüşüm iki yönlüdür ve gösterim seçimi rengi değiştirmenin ne kadar uygulanabilir olduğunu belirler. - Bir renk ölçeği ton eksenli bir gösterimde kurulur: tek bir tonun açıklığı değiştirilerek tutarlı bir basamak dizisi üretilir. - Renk değişkenleri rengi değil işlevi adlandırır; kalıtılan özel özellikler olarak tanımlanır ve bir alt ağaçta yeniden tanımlanarak yerel olarak değiştirilebilir. ## Sonraki Adım Bu derste renkler tam donuk kabul edildi; sekiz basamaklı yazımda görülen alfa kanalı açıklanmadan geçildi. Saydam bir renk üst üste bindiğinde ortaya çıkan renk nedir ve o rengin metinle kontrastı nasıl hesaplanır? Sonraki ders alfa harmanlamasını ve WCAG kontrast oranını sayıyla ele alır.