Warna di CSS
Menulis warna dengan nama, hex, rgb, hsl, dan transparansi (rgba, opacity). Memilih kombinasi warna yang nyaman dibaca.
Dua properti warna paling penting
| Properti | Mengatur |
|---|---|
color | Warna teks |
background-color | Warna latar |
body {
color: #1b1f1a;
background-color: #f6f2e9;
}Lima cara menulis warna
| Format | Contoh | Keterangan |
|---|---|---|
| Nama warna | tomato, navy, gold | Ada ±140 nama; mudah diingat tetapi terbatas |
| Hex | #ff6347, #f63 | Paling umum. Format #RRGGBB; 3 digit adalah singkatan |
| RGB | rgb(255, 99, 71) | Campuran merah-hijau-biru, masing-masing 0–255 |
| RGBA | rgba(0, 0, 0, 0.5) | RGB + transparansi (0 = bening, 1 = pekat) |
| HSL | hsl(9, 100%, 64%) | Hue (0–360°), saturasi, kecerahan: mudah dibuat variasinya |
Memahami hex
Hex #RRGGBB terdiri dari tiga pasang digit untuk merah, hijau, dan biru, tiap pasang bernilai 00 (tidak ada) sampai ff (penuh):
#ff0000= merah penuh#00ff00= hijau penuh#000000= hitam,#ffffff= putih#ffff00= merah + hijau = kuning
HSL: lebih mudah dipikirkan manusia
- Hue: posisi di roda warna (0 merah, 120 hijau, 240 biru).
- Saturation: kepekatan (0% abu-abu, 100% warna penuh).
- Lightness: terang (0% hitam, 50% normal, 100% putih).
Untuk membuat versi lebih gelap dari sebuah warna, cukup kurangi lightness-nya: hsl(210, 80%, 50%) → hsl(210, 80%, 35%).
Transparansi
.lapisan { background: rgba(0, 0, 0, 0.5); } /* hanya latarnya transparan */
.pudar { opacity: 0.5; } /* seluruh elemen + isinya transparan */Kontras: warna harus terbaca
Teks abu-abu muda di latar putih sulit dibaca, apalagi oleh pengguna dengan penglihatan rendah. Panduan WCAG menyarankan rasio kontras minimal 4,5 : 1 untuk teks biasa. Teks gelap di latar terang (atau sebaliknya) hampir selalu aman.
Pilih paling banyak 2–3 warna utama, lalu variasikan terang-gelapnya. Palet yang terlalu ramai membuat halaman melelahkan.