Properti color mengatur warna teks. Nilainya bisa nama warna bahasa Inggris (blue) atau kode angka (hex, rgb(), hsl()), dan keempat cara itu bisa menghasilkan warna yang persis sama.
🧪 Tebakan cepat:
rgb(255, 255, 255)itu hitam atau putih? Tebak dulu, jawabannya ada di bagian "Satu warna, empat cara tulis".
Mewarnai teks dengan color
h1 {
color: rebeccapurple;
}
h1adalah selector: elemen yang mau diwarnai, di sini semua<h1>.coloradalah properti warna teks, danrebeccapurplenilainya. Titik dua di antara keduanya, titik koma di akhir.
Hasilnya, semua judul <h1> jadi ungu. rebeccapurple salah satu dari sekitar 140 nama warna bawaan CSS, semuanya bahasa Inggris dan ditulis tanpa spasi: red, blue, yellow, white, lightblue. Kalau aturannya sudah ada, misalnya h1 { color: black; }, cukup ganti nilainya.
Nama properti juga bahasa Inggris ejaan Amerika: color, bukan colour. Properti yang salah eja dilewati browser diam-diam, jadi teksnya tetap berwarna lama tanpa pesan error. color cuma mewarnai hurufnya. Kotak di belakang teks diwarnai background-color, di pelajaran berikutnya.
Satu warna, empat cara tulis
color: rebeccapurple; /* nama warna */
color: #663399; /* hex */
color: rgb(102, 51, 153); /* rgb */
color: hsl(270, 50%, 40%); /* hsl */
Empat baris ini warnanya sama persis, cukup pilih salah satu.
- Hex:
#lalu enam digit, tiga pasang buat merah, hijau, dan biru. Tiap pasang dari00(kosong) sampaiff(penuh).#ffffffputih,#000000hitam,#ff0000merah. Kalau tiap pasang kembar, boleh disingkat:#fff. - rgb(): tiga angka dari 0 sampai 255 buat merah, hijau, dan biru.
- hsl(): hue (posisi di roda warna, 0 sampai 360: 0 merah, 120 hijau, 240 biru), saturation (kepekatan), lightness (0% hitam, 100% putih). Mau versi lebih terang atau gelap? Ubah angka terakhirnya saja.
Jawaban tebakan: putih. Merah, hijau, dan biru sama-sama penuh.
Transparan dan currentColor
rgba(0, 0, 0, 0.5): angka keempat adalah alpha, dari0(tembus pandang) sampai1(pekat).0.5berarti setengah transparan.hsla()bekerja sama.currentColorartinya "nilaicolorelemen ini". Properti lain yang diisicurrentColor, misalnya warna garis tepi, ikut warna teksnya. Ubahcolorsekali, semuanya ikut.
⚠️ Jebakan yang sering ketemu
- Lupa
#di hex.color: ff0000;diabaikan. Tulis#ff0000. - Spasi di nama warna.
light bluegak dikenal. Namanyalightblue. - Kontras rendah. Teks abu-abu muda di latar putih susah dibaca. Pilih warna teks yang jauh beda terangnya dengan latarnya.
TL;DR: color mewarnai teks: h1 { color: blue; }. Warnanya bisa ditulis pakai nama (blue), hex (#0000ff), rgb(0, 0, 255), atau hsl(240, 100%, 50%). Angka keempat di rgba() atau hsla() mengatur transparansi, dan currentColor memakai ulang warna teks. Eja propertinya color, bukan colour.
