Konverter Kode Warna
Warna dalam pengembangan web dapat ditentukan dalam berbagai format: hex, RGB, HSL, dan named colors. Alat ini mengonversi antar semua format, menampilkan pratinjau visual, menghitung rasio kontras untuk aksesibilitas, dan menghasilkan palet warna komplementer.
Spesifikasi
Kasus Penggunaan Umum
- Mengonversi warna hex dari desainer ke HSL untuk manipulasi yang lebih mudah
- Memeriksa apakah warna teks memenuhi standar aksesibilitas WCAG
- Menghasilkan palet warna untuk desain UI
- Debug nilai warna CSS yang tidak ditampilkan seperti yang diharapkan
- Menemukan padanan hex dari CSS named colors
Fitur
- Mengurai hex (#RGB, #RRGGBB, #RRGGBBAA), RGB, RGBA, HSL, HSLA, dan named colors
- Mengonversi antar semua format warna secara instan
- Output HEX8 (hex 8 digit dengan alpha)
- Pratinjau warna visual dengan toggle latar belakang gelap/terang
- Pratinjau teks contoh pada latar belakang putih dan hitam
- Menghitung rasio kontras WCAG terhadap hitam dan putih
- Klasifikasi warna terang/gelap
- Menghasilkan palet warna komplementer, analog, triadik, tetradik, dan monokromatik
- Menampilkan luminansi dan rekomendasi aksesibilitas
Contoh
Tips
- HSL sering lebih mudah digunakan: H adalah warna, S adalah kecerahannya, L adalah tingkat terangnya.
- Untuk teks yang aksesibel, targetkan rasio kontras minimal 4.5:1 (WCAG AA).
- Format hex 8 digit (#RRGGBBAA) menyertakan transparansi alpha.
- CSS4 memperkenalkan ruang warna baru seperti oklch() untuk keseragaman perseptual yang lebih baik.
Pemahaman Konverter Kode Warna
Nilai warna CSS mendefinisikan warna untuk styling web menggunakan beberapa sistem notasi. Yang paling umum adalah heksadesimal (#RRGGBB), di mana setiap pasangan digit hex merepresentasikan kanal merah, hijau, dan biru dari 00 (0) hingga FF (255). Singkatan #RGB menggandakan setiap digit (#F00 sama dengan #FF0000). Bentuk 8 digit #RRGGBBAA menambahkan kanal transparansi alpha.
Notasi fungsional menyediakan spesifikasi warna yang lebih intuitif. RGB (rgb(255, 0, 0)) menentukan kanal sebagai bilangan bulat 0-255 atau persentase. HSL (hsl(0, 100%, 50%)) menggunakan hue (roda warna 0-360 derajat), saturation (0-100%), dan lightness (0-100%), yang menurut banyak desainer lebih intuitif untuk membuat palet warna dan menyesuaikan warna. Baik RGB maupun HSL mendukung transparansi alpha dengan rgba() dan hsla() atau sintaks modern rgb(255 0 0 / 50%).
Aksesibilitas warna adalah perhatian kritis dalam pengembangan web. WCAG 2.1 mendefinisikan rasio kontras minimum: 4.5:1 untuk teks normal (Level AA), 3:1 untuk teks besar, dan 7:1 untuk kontras yang ditingkatkan (Level AAA). Kontras yang tidak memadai membuat teks sulit atau tidak mungkin dibaca bagi pengguna dengan penglihatan rendah atau defisiensi penglihatan warna.
CSS juga mendukung 148 named colors (seperti rebeccapurple, cornflowerblue, tomato), kata kunci currentColor, dan ruang warna yang lebih baru seperti HWB (hue-whiteness-blackness), LAB, LCH, dan OKLCH yang menyediakan manipulasi warna yang seragam secara perseptual. Ruang yang lebih baru ini sangat berguna untuk menghasilkan palet warna yang harmonis dan gradien yang halus.
Hex (#FF0000) dan RGB (rgb(255,0,0)) keduanya menentukan nilai kanal merah, hijau, dan biru — hex menggunakan basis-16 sementara RGB menggunakan bilangan bulat desimal. HSL (hsl(0,100%,50%)) merepresentasikan warna menggunakan hue (warna itu sendiri pada roda 0-360 derajat), saturation (intensitas), dan lightness (kecerahan), yang menurut banyak developer lebih intuitif untuk membuat variasi. Ketiga format dapat merepresentasikan warna yang sama, tetapi HSL memudahkan untuk menghasilkan varian yang lebih terang, lebih gelap, atau lebih redup dengan menyesuaikan satu nilai.
Kanal alpha mengontrol transparansi pada skala dari 0 (sepenuhnya transparan) hingga 1 (sepenuhnya buram). Dalam notasi hex, alpha ditambahkan sebagai dua digit tambahan — #FF000080 merepresentasikan merah transparan 50% (80 hex = 128 desimal). Dalam notasi fungsional, sintaksnya adalah rgba(255,0,0,0.5) atau bentuk modern rgb(255 0 0 / 50%). Transparansi alpha sangat penting untuk overlay, watermark, dan elemen UI berlapis. Untuk kepatuhan WCAG, Level AA membutuhkan rasio kontras minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar (tebal 18px+ atau reguler 24px+), sementara Level AAA membutuhkan 7:1 untuk teks normal dan 4.5:1 untuk teks besar. Elemen non-teks seperti ikon, border, dan kontrol form membutuhkan kontras minimal 3:1 terhadap warna yang berdekatan.
LAB dan OKLCH adalah ruang warna yang seragam secara perseptual di mana perubahan numerik yang sama menghasilkan perbedaan warna yang terlihat sama, menjadikannya lebih unggul untuk menghasilkan palet dan gradien yang halus. OKLCH (Lightness, Chroma, Hue) sangat berguna dalam CSS karena menyesuaikan lightness menghasilkan hasil yang alami dan dapat diprediksi. Keduanya didukung dalam CSS modern dengan fungsi oklch() dan lab().