Color Variables

Warna adalah keputusan desain yang paling sering kita tulis, dan juga yang paling mudah meleset: satu halaman bisa menyimpan lima variasi hijau yang mirip tetapi tidak identik. Setelah mekanisme var() kita kuasai, kita bisa mengubah warna-warna itu menjadi sistem: sekumpulan token bernama yang menjadi satu-satunya sumber kebenaran. Chapter ini menyusun sistem tersebut — dari pemilihan nama, skala bayangan, mode gelap, hingga variasi :hover yang diturunkan secara otomatis.

Nama Semantik, Bukan Nama Warna #

Kesalahan paling umum saat menyusun token warna adalah menamai variabel sesuai isinya: --biru-500, --hijau-700. Nama semacam itu menggambarkan nilai, bukan peran. Begitu desain berpindah dari biru ke ungu, --biru-500 berisi ungu dan setiap pembaca stylesheet harus menebak maksudnya. Nama semantik menggambarkan kegunaan, sehingga tetap benar meski nilainya berganti:

:root {
  --warna-teks: #1f2933;
  --warna-latar: #ffffff;
  --warna-aksen: #1f6f54;
  --warna-bahaya: #b42318;
}

body {
  color: var(--warna-teks);
  background-color: var(--warna-latar);
}

a {
  color: var(--warna-aksen);
}

Mengganti tema tinggal mengganti empat baris, bukan memburu puluhan aturan.

Keempat token di atas sudah cukup untuk menata halaman kecil: teks, latar, link, dan pesan galat:

Perhatikan juga awalan --warna- yang seragam pada semua token. Awalan yang konsisten membuat DevTools menampilkan seluruh keluarga warna sekaligus saat kita mengetik, dan membuat token warna mudah dibedakan dari token spasi atau tipografi. Jaga jumlah token inti tetap kecil — empat hingga delapan sudah cukup untuk mayoritas halaman; sisanya diturunkan, bukan ditambah.

Skala Mentah plus Token Semantik #

Sistem warna yang sehat biasanya memiliki dua lapis. Lapis pertama adalah skala mentah: satu hue dalam beberapa tingkat kecerahan, diberi nomor seperti pada palet oklch() yang kita bahas di chapter Format Warna. Lapis kedua adalah token semantik yang menjadi alias dari skala itu:

:root {
  --hijau-100: #d7f0e4;
  --hijau-500: #1f6f54;
  --hijau-700: #14503a;

  --warna-aksen: var(--hijau-500);
  --warna-aksen-teks: var(--hijau-700);
}

.kartu-statistik {
  background-color: var(--hijau-100);
  color: var(--warna-aksen-teks);
}

Dua lapis ini memberi fleksibilitas: komponen boleh memakai tingkat mana pun dari skala, tetapi makna formal tetap melewati token semantik.

Skala dan aliasnya berdampingan begini:

Angka pada skala bukan satuan apa pun — 500 tidak berarti lima puluh persen, melainkan urutan. Konvensi yang lazim: 100 paling muda, 900 paling pekat, dengan langkah antar tingkat yang cukup jelas untuk dibedakan mata. Ketika desainer berkata “pakai yang 700”, seluruh tim membaca tingkat yang sama tanpa membuka palet.

Mode Gelap Menjadi Perubahan Kecil #

Manfaat terbesar nama semantik terasa saat kebutuhan mode gelap datang. Karena seluruh komponen membaca token, kita cukup menukar nilai token di dalam media query prefers-color-scheme — tidak ada satu pun komponen yang perlu disentuh:

@media (prefers-color-scheme: dark) {
  :root {
    --warna-teks: #e6edf3;
    --warna-latar: #10161c;
    --warna-aksen: #5ec9a0;
  }
}

CSS modern juga menyediakan fungsi light-dark() yang memilih dua nilai sekaligus; fitur itu masih tergolong baru, jadi pola token semantik di atas tetap fondasi yang paling aman.

Variasi hover dengan color-mix() #

Token membuat variasi state juga bisa diturunkan, bukan ditulis manual. Fungsi color-mix() — yang kita kenal pada chapter Format Warna — mencampur dua warna; jika salah satu campurannya adalah token, hasilnya otomatis senada dengan tema apa pun:

.tombol-aksen {
  background-color: var(--warna-aksen);
}

.tombol-aksen:hover {
  background-color: color-mix(in oklab, var(--warna-aksen), black 15%);
}

Ganti --warna-aksen menjadi ungu, dan variasi :hover-nya ikut menjadi ungu yang lebih pekat — tidak ada nilai hex kedua yang harus dijaga. Arah pencampurannya bebas kita tentukan: tombol pada latar gelap biasanya lebih cocok memuda, dan itu cukup diganti dengan mencampur token yang sama ke white, bukan ke black.

Demo berikut merangkai seluruh pola chapter ini dalam satu panel kecil:

Arahkan kursor ke kedua tombol: versi hover-nya muncul dari color-mix() yang membaca token yang sama, sehingga tidak mungkin tidak senada.

Ringkasan #

Sistem warna yang terkelola memisahkan nama mentah dan nama semantik: skala --hijau-500 menyimpan nilai, sedangkan --warna-aksen menyimpan makna. Berkat pewarisan variabel, mode gelap cukup menukar nilai token di dalam prefers-color-scheme, dan variasi :hover cukup diturunkan lewat color-mix(). Pola yang sama berlaku untuk keputusan desain berikutnya yang sering tidak konsisten: jarak dan spasi.