Renk Gösterimleri

Ö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.

// 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:

.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:

: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

/* 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.