Menerjemahkan hex code brand ke rgb() dengan alpha untuk overlay CSS. Konversi antara HSL dan OKLCH saat migrasi design system ke warna perseptual. Membaca rgb(52, 152, 219) yang ditempel dari tool screenshot kembali ke hex code untuk stylesheet-mu. Sanity check nilai chroma OKLCH (apa pun di atas ~0,4 kemungkinan di luar sRGB gamut).

Lightness OKLCH pakai 0–1, bukan 0–100. CSS menerima keduanya ( 0.65 atau 65% ); tool ini menerima keduanya. Beberapa nilai OKLCH jatuh di luar sRGB (mis. chroma tinggi untuk biru). Tool melakukan clamp ke sRGB yang dapat ditampilkan saat konversi — hasilnya perkiraan, bukan persis. HSL tidak sama dengan HSV. "Value" HSV adalah channel paling terang; "lightness" HSL adalah titik tengah antara paling terang dan paling gelap. Round-tripping tidak selalu lossless. hex → hsl → hex bisa menggeser satu integer karena pembulatan. Untuk reproduksi persis, simpan hex. Hex dan RGB default sRGB, bukan Display P3 atau Rec. 2020. Kalau tool desain-mu di profil wide-gamut, hex yang sama tampak berbeda.

Konverter Warna

Konversi warna apa pun antara hex, RGB, HSL, dan OKLCH. Pratinjau langsung, salin sekali klik.

Hex

RGB

HSL

OKLCH

Picker

Hasil

Dibuat oleh JXXR1 · ♥ Jadi sponsor · ☕ Belikan saya kopi

Untuk apa ini?

Desainer dan developer front-end terus-menerus memindahkan warna antar format — Figma memberimu hex, spec design tokens ingin OKLCH, CSS-mu pakai HSL, dan gambar yang kamu ambil dalam RGB. Tool ini menjaga semua notasi tetap sinkron: edit satu, yang lain update live. Termasuk format modern oklch() yang ditambahkan di CSS Color Module 4 (dan didukung di semua browser utama sejak 2023), yang menghasilkan warna seragam secara perseptual yang jauh lebih mudah dipahami daripada HSL.

Kapan digunakan

Menerjemahkan hex code brand ke rgb() dengan alpha untuk overlay CSS.
Konversi antara HSL dan OKLCH saat migrasi design system ke warna perseptual.
Membaca rgb(52, 152, 219) yang ditempel dari tool screenshot kembali ke hex code untuk stylesheet-mu.
Sanity check nilai chroma OKLCH (apa pun di atas ~0,4 kemungkinan di luar sRGB gamut).

Referensi cepat format

Hex — #RRGGBB (atau shorthand 3 digit #RGB). Universal, tanpa alpha kecuali 8 digit (#RRGGBBAA).
RGB — rgb(0–255, 0–255, 0–255). Nilai channel sRGB aktual yang diterima layar.
HSL — hue (0–360°), saturation (0–100%), lightness (0–100%). Mudah untuk berpikir tentang keluarga warna, tapi lightness tidak perseptual: hijau HSL 50% terlihat lebih terang dari biru HSL 50%.
OKLCH — lightness perseptual (0–1), chroma (0–~0,4 di sRGB), hue (0–360°). Dua warna dengan L sama tampak sama-sama terang; ideal untuk design system dan aksesibilitas.

Kesalahan umum

Lightness OKLCH pakai 0–1, bukan 0–100. CSS menerima keduanya (0.65 atau 65%); tool ini menerima keduanya.
Beberapa nilai OKLCH jatuh di luar sRGB (mis. chroma tinggi untuk biru). Tool melakukan clamp ke sRGB yang dapat ditampilkan saat konversi — hasilnya perkiraan, bukan persis.
HSL tidak sama dengan HSV. "Value" HSV adalah channel paling terang; "lightness" HSL adalah titik tengah antara paling terang dan paling gelap.
Round-tripping tidak selalu lossless. hex → hsl → hex bisa menggeser satu integer karena pembulatan. Untuk reproduksi persis, simpan hex.
Hex dan RGB default sRGB, bukan Display P3 atau Rec. 2020. Kalau tool desain-mu di profil wide-gamut, hex yang sama tampak berbeda.