Warna dalam CSS

Hex, rgb, hsl, transparansi, dan currentColor.

Pahami konsepnya

CSS mengenal warna lewat beberapa format, dan semuanya saling terjemah. Format hex #ff6b35 menulis campuran merah-hijau-biru dalam heksadesimal — ringkas dan paling umum. Format fungsional rgb(255, 107, 53) menulis nilai yang sama secara lebih terbaca, dan rgba menambahkan alpha keempat untuk transparansi: rgba(255, 107, 53, 0.5) setengah tembus.

Format hsl berpikir seperti pelukis: hue (derajat pada roda warna 0-360), saturation (kejenuhan %), lightness (terang %). hsl(14, 100%, 60%) mudah divariasikan — naikkan lightness untuk versi muda, turunkan untuk bayangan; membuat palet warna konsisten jadi aritmetika sederhana, bukan tebak-tebakan hex.

Dua pemain lain: opacity pada elemen membuat seluruh isinya ikut transparan (teks ikut memudar), sedangkan alpha pada warna hanya memudarkan warnanya itu — inilah alasan overlay rgba lebih aman daripada div ber-opacity. Dan currentColor adalah variabel otomatis: ia menyalin warna teks elemen saat itu, sehingga border: 2px solid currentColor selalu serasi dengan tulisannya.

Coba contoh kode

:root {
  --utama: hsl(14, 100%, 60%);
  --utama-tua: hsl(14, 100%, 45%);
}

.tombol {
  background: var(--utama);
  color: #fff;
}
.tombol:hover { background: var(--utama-tua); }

.overlay {
  background: rgba(0, 0, 0, 0.45);  /* gelap tanpa memudarkan teks anak */
}

.ikon {
  color: teal;
  border: 2px solid currentColor;  /* selalu senada teks */
}

Pasangan hsl --utama dan --utama-tua memperlihatkan kekuatan format ini: satu roda warna, dua tingkat terang — basis palet tombol. Overlay rgba menggelapkan latar tanpa menyentuh opasitas anak-anaknya; bandingkan dengan opacity: 0.45 pada elemen yang juga memudarkan tulisannya. currentColor membuat ikon berbingkai senada otomatis.

Latihan singkat

Buat palet tiga tingkat dari satu hue hsl (muda, normal, tua) lalu terapkan pada tombol dengan status hover, plus overlay rgba di atas gambar hero.