CodeKitHubApa Itu Alat Ini?
Warna di web ditulis dalam beberapa format yang setara. HEX (#4f46e5) adalah bentuk ringkas yang dipakai di mana-mana dalam CSS dan serah terima desain. RGB (rgb(79, 70, 229)) menyatakan komponen merah, hijau, dan biru secara langsung, yang sering dibutuhkan kode program. HSL (hsl(243, 75%, 59%)) menggambarkan hue, saturation, dan lightness — format paling intuitif untuk menyesuaikan warna, misalnya membuatnya lebih gelap atau kurang jenuh.
Ketiganya menggambarkan warna yang sama persis; alat ini mengonversinya secara akurat dan menampilkan pratinjau agar kamu bisa memastikan itu memang warna yang kamu maksud.
Mengapa Menggunakannya?
- Menerima format apa pun sebagai input — HEX (3 atau 6 digit), RGB, atau HSL — dan menghasilkan semua format sekaligus.
- Swatch pratinjau langsung sehingga kamu melihat warnanya, bukan cuma angka.
- Color picker visual jika kamu lebih suka memilih dengan mata.
- Salin sekali klik untuk tiap format, siap dipakai di CSS atau kode.
- Gratis, instan, tanpa unggah.
Cara Menggunakan
- Ketik atau tempel warna: #4f46e5, rgb(79, 70, 229), atau hsl(243, 75%, 59%) semuanya berfungsi.
- Atau klik color picker dan pilih secara visual.
- Baca ketiga format pada hasil dan periksa swatch pratinjau.
- Klik "Salin" di sebelah format yang kamu butuhkan.
Contoh
Input
#4f46e5Output
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Tiga notasi, satu warna yang identik.
Format mana yang sebaiknya kamu pakai?
Ketiganya menggambarkan warna yang sama persis — pilihannya soal mana yang paling mudah dipakai untuk tugas tertentu, bukan soal akurasi.
| Format | Cocok untuk | Alasan |
|---|---|---|
| HEX (#4f46e5) | CSS, serah terima desain, salin-tempel cepat | Paling singkat untuk diketik dan ditempel; format universal di alat desain seperti Figma. |
| RGB (rgb(79,70,229)) | Kode yang memanipulasi channel langsung, kerja canvas/gambar | Sesuai dengan cara API grafis dan data piksel gambar menyimpan warna. |
| HSL (hsl(243,75%,59%)) | Menyesuaikan warna — lebih terang, lebih gelap, lebih/kurang jenuh | Lightness dan saturation adalah angka terpisah yang bisa langsung kamu atur, berbeda dengan HEX/RGB di mana setiap channel ikut berubah. |
Kasus penggunaan umum
- Memilih warna secara visual di alat desain, lalu mengonversinya ke nilai HEX atau RGB yang tepat untuk CSS atau kode.
- Membuat rangkaian shade terkait (varian lebih terang/gelap) dengan mengonversi ke HSL, menyesuaikan lightness, lalu mengonversi kembali.
- Mencocokkan warna merek di berbagai alat yang masing-masing mengharapkan format berbeda — file logo dalam RGB, panduan gaya dalam HEX, variabel CSS yang butuh HSL untuk theming.
- Memverifikasi bahwa warna yang diambil dari tangkapan layar atau file desain (sering diberikan sebagai RGB) cocok dengan nilai HEX di stylesheet.
Pertanyaan yang Sering Diajukan
Kapan sebaiknya menggunakan HSL dibanding HEX atau RGB?
Saat kamu ingin menalar sebuah warna. Membuat warna 10% lebih gelap di HSL berarti menurunkan lightness sebanyak 10 poin; di HEX atau RGB kamu harus menghitung ulang semua channel. Sistem desain sering mendefinisikan palet dalam HSL justru karena alasan ini.
Apakah alat ini mendukung HEX 3 digit seperti #fff?
Ya. #fff adalah singkatan dari #ffffff — setiap digit digandakan. Kedua bentuk diterima dan hasilnya ditampilkan dalam bentuk 6 digit lengkap.
Bagaimana dengan alpha (transparansi)?
Alat ini mengonversi warna solid (nilai RGB/HSL). Jika kamu butuh transparansi, tambahkan alpha sendiri: rgba(79, 70, 229, 0.5) atau #4f46e580 — bagian warnanya tetap sama.
Mengapa nilai HSL-ku berbeda 1 poin dengan alat lain?
Pembulatan. Konversi HSL↔RGB menghasilkan nilai pecahan, dan tiap alat membulatkannya berbeda. Selisih ±1 pada hue atau persen tidak terlihat kasat mata dan wajar terjadi.
Apakah nama warna seperti 'red' didukung?
Belum di Tahap 1 — alat ini fokus pada tiga format numerik yang paling sering dikonversi developer. Masukkan nilai HEX/RGB/HSL warnanya, atau pilih secara visual dengan picker.