Konverter Warna: HEX, RGB, HSL, HSV, HWB, CMYK, LAB, dan OKLCH
Ubah warna antara HEX, RGB, HSL, HSV, HWB, CMYK, CIELAB, dan OKLCH, lihat nama CSS serta kontras WCAG pada putih dan hitam. Gratis, di browser Anda.
Menerima HEX (#rgb, #rrggbb, #rrggbbaa), rgb()/rgba(), hsl()/hsla(), hsv(), hwb(), cmyk(), lab(), oklch(), dan 148 nama warna CSS.
dodgerblue#1e90ffrgb(30, 144, 255)hsl(209.6, 100%, 55.9%)hsv(209.6, 88.2%, 100%)hwb(209.6 11.8% 0%)cmyk(88.2%, 43.5%, 0%, 0%)lab(58.36% 0.89 -64.78)oklch(65.2% 0.1901 253.21)CIELAB memakai titik putih D50 seperti CSS Color 4. Nilai hanya dibulatkan saat ditampilkan; konversi memakai presisi penuh. Alpha diabaikan untuk CMYK, HSV, dan kontras.
Apa itu Konverter Warna?
Tempel warna dalam notasi umum apa pun dan dapatkan dalam delapan model warna sekaligus: HEX, RGB(A), HSL(A), HSV, HWB, CMYK, CIELAB, dan OKLCH. Alat ini juga menampilkan nama warna CSS yang cocok (jika ada yang persis sama) dan rasio kontras WCAG warna tersebut pada latar putih dan hitam.
Cara menggunakan Konverter Warna
- Ketik atau tempel warna ke Warna (format apa pun), misalnya
#1e90ff,rgb(30 144 255),hsl(210 100% 56%),oklch(65% 0.19 253), atautomato, atau pilih dengan pemilih warna. - Baca nilai hasil konversi pada daftar hasil; setiap baris punya tombol Salin sendiri.
- Periksa Nama CSS untuk kecocokan nama warna persis dan kartu Kontras di atas putih / hitam untuk hasil WCAG AA dan AAA.
- Jika nilai LAB atau OKLCH berada di luar sRGB, peringatan akan memberi tahu bahwa warna dipangkas ke warna terdekat yang dapat ditampilkan.
Contoh
#ff0000
rgb(255, 0, 0) · hsl(0, 100%, 50%) · hsv(0, 100%, 100%) · hwb(0 0% 0%) · cmyk(0%, 100%, 100%, 0%) · lab(54.29% 80.8 69.89) · oklch(62.8% 0.2577 29.23) · CSS name: red
Kontras di atas putih adalah 3,99:1, sehingga merah murni gagal WCAG AA untuk teks normal.
Kapan menggunakan Konverter Warna
Gunakan saat memindahkan warna antara alat desain dan CSS, saat Anda butuh model perseptual seperti OKLCH untuk membuat palet, atau untuk memeriksa kontras teks dengan cepat. Jangan pakai keluaran CMYK untuk proof cetak profesional: pencetakan sungguhan memerlukan profil warna ICC, yang diabaikan rumus sederhana ini.
Cara kerja Konverter Warna
Setiap input diurai menjadi kanal sRGB berenkode gamma ditambah alfa. HSL, HSV, dan HWB adalah transformasi silindris standar dari sRGB; CMYK memakai rumus sederhana yang tidak bergantung perangkat, K = 1 − max(R,G,B). Untuk LAB, nilai sRGB dilinearkan, diubah ke CIE XYZ (D65), diadaptasi secara kromatik ke D50 dengan matriks Bradford, lalu diubah menjadi CIELAB, persis seperti di CSS Color 4. OKLCH memakai matriks OKLab karya Björn Ottosson pada sRGB linear. Nilai dibulatkan hanya untuk tampilan (bilangan bulat untuk RGB, satu desimal untuk HSL/HSV/HWB/CMYK, dua untuk LAB). Kontras mengikuti luminans relatif WCAG 2.x: (L1 + 0,05) / (L2 + 0,05).
Kasus Penggunaan Umum
- Mengubah kode HEX merek dari panduan gaya menjadi
hsl()atauoklch()untuk variabel CSS - Mengonversi nilai
rgba()dari DevTools menjadi HEX 8 digit dengan alfa - Memeriksa apakah warna teks lolos WCAG AA (4,5:1) di latar putih
- Mencari kata kunci CSS untuk nilai HEX seperti
#663399(rebeccapurple) - Mendapatkan perkiraan persentase CMYK untuk cetakan kantor
Pertanyaan Umum
Mengapa nilai LAB berbeda dari Photoshop?
Alat ini mengikuti CSS Color 4, yang memakai titik putih D50 dengan adaptasi Bradford. Sebagian aplikasi menampilkan LAB relatif terhadap D65, sehingga angkanya sedikit berbeda.
Apa arti “di luar gamut sRGB”?
LAB dan OKLCH bisa menggambarkan warna yang tidak dapat ditampilkan layar sRGB biasa. Input seperti itu dipangkas per kanal ke warna terdekat yang dapat ditampilkan, dan peringatan memberi tahu bahwa nilai HEX/RGB hanyalah perkiraan.
Bagaimana rasio kontras dibulatkan?
Dipotong (bukan dibulatkan ke atas) hingga dua desimal agar rasio 4,499 tidak pernah tampil lolos 4,5:1.
Apakah alfa dipertahankan di semua format?
Alfa dipertahankan di HEX (8 digit), rgba(), hsla(), HWB, LAB, dan OKLCH. HSV dan CMYK tidak punya kanal alfa, dan kontras dihitung untuk warna yang buram penuh.