Kode Warna di Web: HEX, RGB dan HSL
Dalam pengembangan web, warna didefinisikan terutama melalui tiga format: HEX, RGB, dan HSL. Alat ini mengonversi warna apa pun secara instan ke ketiga format dan juga menampilkan nama CSS dan warna komplementer.
Kode Warna HEX
HEX adalah format warna paling umum di web. Ditulis sebagai #RRGGBB, setiap pasang menunjukkan intensitas saluran (Merah, Hijau, Biru) dari 00 hingga FF (0–255). Dengan 256 nilai per saluran, HEX mendukung 16.777.216 warna. Notasi singkat #RGB juga valid.
Model Warna RGB
RGB mencerminkan struktur fisik layar. Setiap saluran mengambil nilai 0–255. Dalam CSS: rgb(255, 87, 51) atau dengan transparansi rgba(255, 87, 51, 0.8).
Model Warna HSL
HSL (Hue-Saturasi-Kecerahan) lebih intuitif untuk desainer. Membuat variasi terang atau gelap mudah: pertahankan hue dan saturasi, sesuaikan kecerahan saja.
Warna Komplementer
Warna komplementer berjarak 180° di roda warna: Merah ↔ Cyan, Hijau ↔ Magenta, Biru ↔ Kuning. Menciptakan kontras maksimum untuk tombol CTA dan visualisasi data.
Aksesibilitas Web (WCAG)
Sekitar 8% pria memiliki buta warna. WCAG 2.1 AA mensyaratkan rasio kontras minimal 4,5:1 untuk teks normal. Jangan sampaikan informasi hanya melalui warna.
Privasi
Semua perhitungan dilakukan secara lokal di browser Anda. Tidak ada data yang dikirim ke server.
Pemeriksaan praktis hasil
Konverter warna sebaiknya dipakai sebagai generator kerja: atur parameter, lihat pratinjau, lalu salin hanya hasil yang sesuai dengan kebutuhan. Alat ini mencakup HEX, RGB, HSL, dan nama CSS; membandingkan warna dan menyalin nilai untuk stylesheet. Untuk kode, warna, hash, identitas unik, kata sandi, JSON, QR, atau kode batang, catat juga pengaturan yang menghasilkan output tersebut. Catatan kecil ini memudahkan pengulangan proses, audit desain, atau penjelasan kepada anggota tim lain.
Sebagian besar proses berjalan di browser setelah halaman dimuat, sehingga penggunaan sehari-hari cepat dan tidak memerlukan akun. Meski begitu, jangan menempelkan rahasia produksi, kata sandi nyata, kunci API, token, atau data pribadi jika Anda tidak yakin bagaimana hasilnya akan disimpan setelah disalin. Sebelum dipakai di produksi, uji output di tempat tujuan: CSS di komponen asli, JSON di parser aplikasi, QR atau barcode dengan pemindai, dan kata sandi di pengelola kata sandi. Pemeriksaan ini membantu menemukan masalah spasi, karakter khusus, panjang maksimum, kontras, dan kompatibilitas pustaka sebelum hasil digunakan secara publik.
Setelah hasil dibuat, lakukan uji kecil di lingkungan tujuan sebelum menganggapnya siap. Warna perlu dilihat di latar sebenarnya, gradient harus diuji bersama teks, JSON perlu dibaca parser aplikasi, hash harus dibandingkan dengan input yang tepat, sedangkan QR dan barcode sebaiknya dipindai. Untuk kata sandi dan identifier, pastikan panjang, karakter khusus, dan aturan sistem tujuan cocok. Jika output berubah saat disalin, perbaiki formatnya lebih dulu agar tidak menjadi masalah saat dipakai tim atau pengguna.
Komentar