Pernah pesen cat tembok di toko bangunan? Ada yang bilang nama warna ("biru langit"), ada yang nunjukkin sample kartu warna, ada juga yang sebut kode persis dari brand cat ("Dulux 47BB 28/214"). Semua valid — beda level presisi aja. CSS sama: properti color ngatur warna tulisan, dan kamu bisa nyebutnya pake banyak format tergantung seberapa presisi kamu butuh.

🤔 Kenapa hex pake huruf A-F? Hex (#FF0000) itu sistem angka basis 16: 0-9 + A-F (jadi 16 simbol total). Tiap pasangan 2-digit ngwakilin nilai 0-255 buat satu channel warna (R, G, B). FF = 255 (max). Manusia liat warna karena 3 jenis "cone" di mata yang beda sensitif merah, hijau, biru. Hex langsung nge-encode persis 3 channel itu — itu kenapa standar warna digital semua nge-mirror anatomi mata manusia.

Format yang umum:

• Nama warna — blue, limegreen, deepskyblue (~140 nama bawaan). Sederhana, terbatas pilihannya.
• RGB — rgb(R, G, B), tiap channel 0-255. Mix presisi.
• HEX — #RRGGBB basis 16. Sama dengan RGB tapi lebih ringkas. Standar industri (Figma, Photoshop, brand book).
• HSL — hsl(hue, saturation, lightness). Paling intuitif buat tweak: ubah H cuma rotate warna, ubah L bikin lebih terang/gelap.
• RGBA / HSLA — tambahan A buat alpha (transparansi 0-1).

color: lightblue;

🎭 Analogi sehari-hari

Pilihan format = cara nyebut warna ke tukang cat. Nama warna = "biru" (cepet, tapi mana biru-nya?). RGB/HEX = kode persis dari kartu warna. HSL = "warna biru, agak pucat, agak terang" — tweak rasa, bukan kode.

⚠️ Jebakan yang sering ditemui

• Kontras teks rendah = teks abu-abu di latar abu-abu = tidak terbaca. Cek WCAG contrast ratio min 4.5:1 (Lighthouse / DevTools).
• color: red vs color: rgb(255, 0, 0) sama hasilnya — pilih berdasar konsistensi.
• Alpha channel rgba/hsla untuk transparansi. color: rgba(0,0,0,0.5) = hitam 50%.
• Color currentColor keyword — sama dengan color aktif (warisi). Berguna untuk SVG icon.
• Browser default link #0000EE susah dibaca — selalu override.
• HSL lebih intuitif untuk variasi: ubah cuma H (hue) untuk variasi color, ubah L (lightness) untuk shade.