Buta hijau
Buta merah
Buta biru
148 Warna CSS Bernama
Klik warna apa pun untuk memuatnya ke pemilih. Cari berdasarkan nama atau nilai hex.
| Contoh Warna | Nama | Hex | RGB |
|---|
Semua 148 warna CSS bernama standar sesuai spesifikasi CSS Color Level 4.
Cara Kerja Kode Warna
Kode Hex
Kode warna hex seperti #FF5733 mengodekan warna sebagai tiga angka heksadesimal 2 digit: merah (FF = 255), hijau (57 = 87), biru (33 = 51). Hex berkisar dari #000000 (hitam) hingga #FFFFFF (putih). Singkatan seperti #F60 diperluas menjadi #FF6600.
RGB
RGB menentukan intensitas cahaya Merah, Hijau, dan Biru, masing-masing dari 0 hingga 255. rgb(255, 0, 0) adalah merah murni; rgb(0, 0, 255) adalah biru murni. Kamu juga bisa menentukan alfa: rgba(255, 87, 51, 0.5) adalah 50% transparan.
HSL
HSL (Hue, Saturation, Lightness) lebih intuitif: hue adalah sudut warna (0°=merah, 120°=hijau, 240°=biru), saturasi adalah intensitas warna (0%=abu-abu, 100%=vivid), dan lightness adalah kecerahan (0%=hitam, 50%=normal, 100%=putih). Sangat baik untuk variasi warna secara programatik.
CMYK
Digunakan dalam desain cetak: Cyan, Magenta, Yellow, dan Key (Hitam). Konversi dari RGB adalah perkiraan — alur kerja cetak profesional menggunakan profil ICC untuk akurasi. Nilai yang ditampilkan hanya sebagai referensi; selalu verifikasi dengan printer kamu.
Contoh Perhitungan
Warna CSS tomato adalah #FF6347. Rinciannya: R=255 (FF), G=99 (63), B=71 (47). Dalam HSL: hue≈9°, saturasi=100%, lightness=64%. Kontras WCAG vs putih: ~3,0:1 (gagal AA untuk teks kecil). Vs hitam: ~7,0:1 (lulus AAA). Jadi gunakan teks tomat di latar gelap untuk keterbacaan terbaik.
Pertanyaan yang Sering Diajukan
Apa itu kode warna hex?
Kode warna hex adalah angka heksadesimal 6 digit (seperti #FF5733) yang mewakili warna dengan mencampur cahaya merah, hijau, dan biru. Dua digit pertama adalah merah, dua berikutnya hijau, dua terakhir biru — masing-masing dari 00 (tidak ada) hingga FF (penuh). Kode 3 digit yang lebih pendek (#F60) adalah singkatan yang valid di mana setiap digit digandakan.
Apa perbedaan antara RGB dan HSL?
RGB mencampur nilai cahaya merah, hijau, dan biru (masing-masing 0–255), sesuai cara kerja layar. HSL mendeskripsikan Hue (sudut warna 0–360°), Saturation (vivid 0–100%), dan Lightness (kecerahan 0–100%), sesuai cara manusia mempersepsikan warna. HSL memudahkan pembuatan varian lebih terang/lebih gelap hanya dengan menyesuaikan nilai L.
Rasio kontras WCAG berapa yang saya butuhkan?
WCAG 2.1 AA mensyaratkan 4,5:1 untuk teks normal dan 3:1 untuk teks besar (18pt atau 14pt tebal). AAA mensyaratkan 7:1 dan 4,5:1 masing-masing. Rasio ini berlaku untuk teks terhadap latar belakangnya. Grafis dekoratif dan komponen UI tidak aktif dikecualikan. Gunakan pemeriksa kontras di atas untuk memverifikasi kombinasi warnamu.
Apa itu warna komplementer, analog, dan triadik?
Warna komplementer berada di sisi berlawanan pada roda warna (180° terpisah) dan menciptakan kontras kuat. Warna analog berdekatan (±30°) dan menciptakan palet yang harmonis dan kohesif. Warna triadik tersebar merata di 120° dan memberikan keseimbangan vibrant. Ketiganya ditampilkan di bagian "Harmoni Warna" di atas.
Apakah eyedropper berfungsi di semua browser?
EyeDropper API saat ini didukung di Chrome 95+, Edge 95+, dan Opera 81+. Tidak tersedia di Firefox atau Safari. Tombol pemilih disembunyikan otomatis di browser yang tidak didukung — pemilih warna utama dan semua format kode berfungsi di semua browser modern.
Apa itu warna CSS bernama?
CSS mendefinisikan 148 warna bernama — dari aliceblue hingga yellowgreen — yang bisa langsung digunakan dalam CSS tanpa nilai hex atau rgb. Warna-warna ini merupakan bagian dari spesifikasi CSS Color Level 4 dan mencakup warna web-safe klasik (seperti red, blue) serta banyak nama deskriptif (seperti cornflowerblue, mediumaquamarine). Tabel lengkap dapat dicari di atas.