CSS 03: Warna, Transparansi, dan Kontras

Warna digunakan pada teks, border, latar, ikon, dan banyak bagian lain. Tujuannya bukan menghafal kode warna, tetapi memahami format dan memilih warna yang tetap terbaca.

1. Format Warna dalam Satu Contoh

• Named color mudah dibaca tetapi pilihannya terbatas.
• HEX memakai format #RRGGBB.
• RGB menulis nilai merah, hijau, dan biru.
• HSL menulis hue, saturation, dan lightness.
• Alpha mengatur tingkat transparansi.

HSL nyaman ketika Anda ingin membuat warna hover yang lebih gelap dengan mengubah nilai lightness.

2. currentColor dan Keadaan Hover

currentColor mengambil nilai color elemen saat ini sehingga border mengikuti warna teks. Pesan error juga memakai kata “Error”, bukan warna merah saja, agar maknanya tetap jelas.

Kesalahan Umum

• Memilih teks abu-abu terlalu muda di atas latar putih.
• Menggunakan warna sebagai satu-satunya penanda keadaan.
• Memakai alpha tanpa memeriksa warna di belakangnya.
• Mencampur terlalu banyak format warna tanpa alasan.

Latihan

Jalankan contoh pertama, lalu buat satu kotak baru menggunakan HEX. Tambahkan keadaan hover menggunakan HSL dan pastikan teks tetap mudah dibaca.

Rangkuman

CSS menyediakan beberapa format warna yang sama-sama valid. Pilih format yang mudah dipelihara, gunakan alpha dengan sadar, dan selalu prioritaskan kontras. Background dan gradient dibahas pada CSS 03B.