Format Warna

Warna hadir di hampir setiap baris CSS yang kita tulis: warna teks, latar, border, dan bayangan semuanya membutuhkan nilai warna. CSS menyediakan beberapa format untuk menuliskan warna yang sama persis, mulai dari nama bawaan seperti seagreen hingga fungsi modern seperti oklch(). Pilihan format tidak mengubah hasil di layar, tetapi sangat menentukan seberapa mudah kode dibaca, diubah, dan dikembangkan menjadi palet yang konsisten. Pada chapter ini kita berkenalan dengan setiap format, membandingkannya pada satu warna yang sama, lalu menyusun panduan kapan sebaiknya memakai yang mana.

Named Colors: Praktis untuk Prototipe #

.status-sukses {
  color: seagreen;
  border-color: rebeccapurple;
}

Demo berikut memakai dua nama itu pada elemen sungguhan:

CSS menyediakan lebih dari 140 nama warna bawaan yang bisa dipakai tanpa hitung-hitungan apa pun; daftar lengkapnya ada di MDN.

Kelebihan format ini adalah keterbacaannya — seagreen jauh lebih mudah dibaca manusia daripada deretan angka. Kelemahannya ada pada cakupan: palet terbatas, presisi rasa warna sulit dicapai, dan sebagian nama justru menyesatkan — darkgray ternyata lebih terang daripada gray. Karena itu named colors cocok untuk demo dan prototipe, sedangkan sistem warna produk sebaiknya memakai format numerik.

Hex: Format Paling Umum #

Notasi #rrggbb menuliskan dua digit heksadesimal untuk setiap kanal merah, hijau, dan biru — masing-masing bernilai 00 sampai ff (0–255):

.tombol-utama {
  background-color: #1f6f54;
  color: #ffffff;
}

Hex adalah format yang paling banyak kita temui — hampir semua alat desain menyalinnya, dan hampir semua codebase memakainya.

Tiga bentuk turunan yang perlu dikenali:

• #rgb — bentuk ringkas yang hanya valid bila tiap pasangan digitnya kembar: #116644 boleh ditulis #164.
• #rrggbbaa — digit keempat mengatur transparansi (alpha): #1f6f5480 berarti hijau yang sama dengan opasitas 50%.
• Hex tidak peka huruf besar-kecil: #1F6F54 sama dengan #1f6f54.

rgb() dan rgba(): Kanal Merah, Hijau, Biru #

Fungsi rgb() menuliskan kanal yang sama dengan hex, tetapi dalam desimal:

.kartu-notifikasi {
  color: rgb(31 111 84);
  border-color: rgb(31 111 84 / 40%);
}

Aturan membacanya: setiap kanal bernilai 0–255, dan alpha ditulis setelah garis miring — boleh 0–1 atau persen. Bentuk lama rgb(31, 111, 84, 0.4) ber-koma masih valid dan masih banyak ditemukan di kode lama; bentuk baru yang dipisah spasi kini jadi konvensi. rgba() juga masih ada, tetapi kini hanya alias dari rgb() — keduanya identik.

hsl(): Roda Warna yang Intuitif #

hsl() menuliskan warna dari tiga sudut pandang manusia: hue, saturation, dan lightness. Hue diukur pada roda warna 0–360 derajat — 0 merah, 120 hijau, 240 biru. Saturation 0% menghasilkan abu-abu, sedangkan lightness 0% hitam dan 100% putih.

.hijau-dasar  { background-color: hsl(160 56% 28%); }
.hijau-terang { background-color: hsl(160 56% 45%); }
.hijau-gelap  { background-color: hsl(160 56% 18%); }

Ketiga deklarasi di atas dipasang pada kotak-kotak berikut:

Di sinilah keunggulan hsl: satu angka (hue) menentukan rasa warna, sehingga membuat varian tinggal menggeser lightness tanpa menyentuh angka lain. Seperti rgba(), fungsi hsla() kini juga hanya alias dari hsl().

oklch(): Format Modern yang Merata Secara Persepsi #

Satu kelemahan hsl: lightness 50% pada warna kuning terlihat jauh lebih terang daripada lightness 50% pada warna biru, karena skala hsl tidak mengukur terang sesuai persepsi mata. Format modern oklch() memperbaiki hal ini dan sudah didukung seluruh browser modern — layak dijadikan fondasi design system.

• L (lightness): 0% hitam, 100% putih, terukur persepsi.
• C (chroma): 0 berarti abu-abu; makin besar makin pekat.
• H (hue): roda warna 0–360, seperti hsl.

:root {
  --hijau-300: oklch(75% 0.07 166);     /* varian terang */
  --hijau-600: oklch(48.6% 0.088 166);  /* warna utama */
  --hijau-800: oklch(30% 0.06 166);     /* varian gelap */
}

Karena L menjanjikan terang yang konsisten, dua warna berbeda hue dengan L sama akan terasa sama terang di mata — inilah dasar palet berskala (300/600/800) yang rapi.

Dua fungsi pendamping perlu kita kenali sekilas: color-mix() mencampur dua warna dalam proporsi tertentu — color-mix(in oklab, #1f6f54, white) menghasilkan versi muda dari hijau course ini — sedangkan light-dark() memilih warna secara otomatis untuk tema terang dan gelap. Keduanya sudah didukung browser modern, dengan light-dark() masih tergolong baru; periksa dukungan bila akan dipakai.

Satu Hijau dalam Empat Format #

Keempat penulisan di atas digambar berdampingan berikut — ditambah seagreen sebagai pembanding:

Perhatikan swatch kelima: palet nama terbatas dan tidak selalu menyediakan rasa warna yang kita inginkan.

Kapan Memakai yang Mana #

Kesalahan Umum #

Ringkasan #

CSS menerima warna dalam banyak format: named colors untuk kecepatan, hex dan rgb() untuk presisi kanal, hsl() untuk variasi berbasis roda warna, dan oklch() untuk palet yang merata secara persepsi. Hasil rendernya sama; yang berbeda adalah kemudahan membaca dan mengembangkannya. Dengan bekal format warna ini, chapter berikutnya membahas dua property yang paling sering menerimanya: color untuk teks dan background-color untuk kotak.