Konverter Warna
Konversi warna antara HEX, RGB, HSL, dan OKLCH dengan pratinjau langsung
Tentang alat ini
Masukkan warna dalam notasi umum mana pun — #hex, rgb(), hsl(), atau nama warna CSS — dan dapatkan semua format sekaligus: HEX, RGB, HSL, dan OKLCH, berdampingan dengan contoh warna langsung. Kanal alfa dipertahankan lintas format, dan keluarannya memakai sintaksis CSS modern (kanal dipisah spasi) yang menempel rapi ke lembar gaya masa kini.
OKLCH disertakan karena ke sanalah warna di CSS bergerak: berbeda dari HSL, sumbu terangnya seragam secara persepsi, jadi dua warna dengan L yang sama benar-benar tampak sama terangnya, dan mengubah rona tidak diam-diam menggeser terang yang dirasakan. Memindahkan palet yang sudah ada ke OKLCH adalah langkah pertama membangun skala warna yang konsisten.
Matematika konversinya berjalan lokal memakai transformasi sRGB↔OKLab yang telah dipublikasikan, dan nilainya bolak-balik utuh: RGB yang Anda peroleh kembali dari masukan HSL persis sama dengan yang akan dihitung browser.
Pertanyaan yang sering diajukan
- Kenapa nilai terang di HSL dan OKLCH tidak sepakat?
- Terang pada HSL adalah properti geometris nilai RGB, bukan properti penglihatan manusia — kuning hsl(60 100% 50%) tampak jauh lebih terang daripada biru hsl(240 100% 50%) meski L-nya identik. Sumbu L OKLCH dirancang mengikuti persepsi, jadi L yang sama berarti terang tampak yang sama. Ketidaksepakatan itulah alasan keberadaan OKLCH.
- Apa arti nilai alfa dan di mana letaknya pada tiap format?
- Alfa adalah keburaman, dari 0 (bening) sampai 1 (pekat). Pada hex delapan digit ia adalah bita terakhir (#RRGGBBAA); pada sintaksis fungsional modern ia mengikuti garis miring: rgb(76 141 255 / 0.5). Konverter ini membawa alfa melewati setiap format secara otomatis.
- Apakah setiap warna OKLCH bisa ditampilkan dalam sRGB?
- Tidak — OKLCH mencakup gamut lebar, dan sebagian kombinasi kroma/terang tidak punya padanan sRGB. Mengonversi dari sRGB (seperti yang dilakukan alat ini) selalu tetap dapat direpresentasikan; ke arah sebaliknya, warna di luar gamut harus dipangkas atau dipetakan — itu sebabnya hijau P3 yang menyala tampak lebih kusam di layar sRGB.
- Kenapa rgb(76 141 255) dipisah spasi, bukan koma?
- CSS Color Module Level 4 membakukan kanal berpemisah spasi dengan /alfa opsional, dan setiap browser modern mendukungnya. Bentuk berkoma masih berfungsi, tetapi bentuk berspasi itulah yang dipakai spesifikasi baru (dan alat ini).