Warna di CSS

Empat cara menulis warna

.teks {
  color: red;               /* nama: 140 pilihan, terbatas */
  color: #ff0000;           /* hex: paling populer */
  color: rgb(255, 0, 0);    /* rgb: 0-255 per kanal */
  color: hsl(0, 100%, 50%); /* hsl: hue, saturation, lightness */
}

Keempatnya menghasilkan merah yang sama. Hex adalah standar industri untuk kode. HSL paling intuitif buat manusia: geser hue untuk ganti warna, turunkan lightness untuk versi gelap.

Transparansi: alpha

Tambahkan kanal alpha (0 = transparan, 1 = solid):

.overlay {
  background: rgba(0, 0, 0, 0.5); /* hitam 50% */
  background: #00000080;          /* hex dengan alpha: 80 hex = 50% */
  color: hsl(0, 0%, 100% / 0.8);  /* sintaks modern dengan slash */
}

Jangan pakai opacity kalau cuma background yang mau transparan: opacity membuat seluruh elemen termasuk teksnya transparan.

Memilih warna yang enak

• Batasi palet: 1 warna primer + 1 aksen + netral (putih/abu/hitam).
• Untuk varian gelap/terang dari satu warna, ubah lightness di HSL, jangan tebak-tebak hex.
• Cek kontras teks: rasio minimal 4.5:1 untuk teks kecil (pakai tool kontras browser).

Catatan teknis: currentColor adalah kata kunci spesial berisi warna teks elemen saat itu. Berguna misal untuk border mengikuti warna teks: border: 1px solid currentColor;.

Analogi: toko cat

Format warna seperti cara memesan cat di toko: "merah" (nama, terbatas), "kode #ff0000" (heksadesimal, presisi), atau "campur 255 merah, 0 hijau, 0 biru" (rgb, eksplisit). HSL seperti berkata "warna merah (hue), yang agak pucat (saturation rendah), agak terang (lightness tinggi)": cara manusia berpikir tentang warna.

Kenapa banyak format?

• Nama (red, navy): cepat untuk prototipe, tapi hanya 140 pilihan.
• Hex (#38bdf8): standar desain, disalin dari Figma/palette.
• rgb()/rgba(): eksplisit, mudah dimanipulasi via JavaScript.
• hsl(): intuitif untuk membuat varian (lebih terang/gelap tinggal ubah lightness).

KENAPA ini penting: membuat sistem warna yang konsisten butuh cara berpikir yang tepat. Dengan HSL, membuat 5 tingkat kecerahan satu warna semudah mengubah satu angka.

Contoh bertahap: sistem warna tombol

Level 1, warna flat:

.tombol {
  background: #38bdf8;
}

Level 2, varian hover lebih gelap dengan HSL (cukup turunkan lightness):

.tombol {
  background: hsl(199, 89%, 60%);
}

.tombol:hover {
  background: hsl(199, 89%, 50%); /* sama, tapi lebih gelap */
}

.tombol:disabled {
  background: hsl(199, 30%, 80%); /* pucat */
}

Satu hue (199 = biru), tiga lightness. Jauh lebih sistematis daripada menebak-nebak kode hex.

Level 3, transparansi untuk overlay:

.overlay {
  background: rgba(15, 23, 42, 0.6); /* hitam 60% */
}

Kesalahan umum pemula

Salah: opacity vs alpha tertukar. opacity: 0.5 membuat SELURUH elemen (termasuk teks) transparan. rgba(..., 0.5) hanya background-nya. Untuk overlay dengan teks tajam, pakai rgba.

/* SALAH: teks ikut pudar */
.kartu { background: black; opacity: 0.5; }

/* BENAR: hanya background yang transparan */
.kartu { background: rgba(0, 0, 0, 0.5); }

Salah: kontras terlalu rendah. Teks abu-abu muda di atas putih terlihat estetik tapi tidak terbaca sebagian orang. Cek kontras minimal 4.5:1 untuk teks normal (pakai tool cek kontras browser).

Salah: terlalu banyak warna. Website pemula sering punya 8-10 warna acak. Batasi: 1 warna primer, 1 aksen, 1 netral gelap, 1 netral terang. Konsistensi mengalahkan variasi.

Latihan kilat

1. Tulis warna biru langit dalam tiga format: nama, hex, dan rgb.
2. Buat overlay hitam 50% transparan TANPA membuat teks di dalamnya pudar. Tulis CSS-nya.
3. Kamu punya background: hsl(200, 80%, 60%). Bagaimana membuat versi lebih gelap untuk hover TANPA menebak hex baru?

Kunci: (1) skyblue, #87ceeb, rgb(135, 206, 235). (2) background: rgba(0, 0, 0, 0.5); (jangan opacity). (3) Turunkan lightness: hsl(200, 80%, 45%).

Rangkuman

Hex untuk kode sehari-hari, HSL saat butuh eksplorasi varian, alpha untuk transparansi. Jaga palet tetap sedikit dan pastikan kontras teks terbaca.