Konverter Kode Warna

Konverter warna online gratis yang menerjemahkan secara instan antara kode HEX, RGB, HSL, dan OKLCH serta menghitung rasio kontras WCAG.

HEX

#3b82f6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

OKLCH

oklch(0.623 0.188 259.8)

Penyesuaian HSL

H217S91%L60%

Rasio Kontras (WCAG)

Warna pembanding:

샘플 텍스트

Rasio kontras: 3.68:1

WCAG: AA Large

Sematkan

<iframe src="https://devtools.patrache.studio/id/converters/color-converter/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="Konverter Kode Warna — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/id/converters/color-converter/">Konverter Kode Warna</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Terakhir diperbarui: 2026 · Alat online gratis

Apa itu Konverter Kode Warna?

Konverter warna online gratis yang menerjemahkan secara instan antara kode HEX, RGB, HSL, dan OKLCH serta menghitung rasio kontras WCAG.

Cara Penggunaan

1
Masukkan warna— Gunakan pemilih warna atau input teks. Format HEX, rgb(), dan hsl() didukung.
2
Lihat format— Format HEX, RGB, HSL, dan OKLCH ditampilkan secara bersamaan.
3
Salin nilai— Gunakan tombol salin untuk setiap format untuk menyalin nilai CSS.
4
Periksa rasio kontras— Atur warna pembanding untuk memeriksa rasio kontras WCAG.

Alat Terkait

Generator Gradien CSSGenerator gradien CSS visual untuk gradien linear, radial, dan conic: tambah color stop, atur sudut, lalu salin CSS-nya. Cocok untuk latar dan tombol, gratis di browser.

Generator CSS Box ShadowGenerator box-shadow CSS dengan kontrol offset, blur, spread, warna, dan inset serta pratinjau bayangan langsung. Salin kode CSS siap pakai untuk elemen apa pun, gratis.

Referensi Satuan CSSReferensi satuan CSS px, em, rem, %, vw, vh, vmin, vmax, dan ch yang tersusun per kategori. Dengan penjelasan jelas kapan memakai tiap satuan absolut dan relatif, gratis.

Konverter PX-REMKonverter PX ke REM yang mengubah piksel dan rem dua arah memakai ukuran font root yang bisa disetel, termasuk nilai desimal. Dilengkapi tabel referensi dan cuplikan CSS.

Pertanyaan yang Sering Diajukan

OKLCH adalah representasi silindris dari ruang warna Oklab, ruang warna yang paling seragam secara perseptual. Didukung di CSS Color Level 4.

Mengukur perbedaan kecerahan antara teks dan warna latar belakang. AA membutuhkan minimal 4,5:1, AAA membutuhkan 7:1.

Saat ini hanya warna solid (RGB, HEX 6 digit) yang didukung. RGBA dan HSLA akan ditambahkan di pembaruan mendatang.

Ya. Anda dapat menempelkan output setiap format langsung ke CSS.

Tidak. Semua konversi warna dilakukan di browser Anda.