Developer Konversi warna
Ubah warna antar format HEX, RGB, HSL, dan OKLCH, lengkap dengan pemeriksaan rasio kontras untuk aksesibilitas.
Hex, rgb(), rgba(), hsl() or hsla().
HEX
#21d540RGB
rgb(33, 213, 64)HSL
hsl(130, 73%, 48%)WCAG contrast
- On white
- 1.97:1 · Fails
- On black
- 10.66:1 · AAA
- Hue
- 130°
- Saturation
- 73%
- Lightness
- 48%
- Alpha
- 1.00
WCAG 2.2 asks for 4.5:1 on body text and 3:1 on large text (18.66px bold or 24px regular). AAA raises those to 7:1 and 4.5:1.
Ready. Runs locally on your device.
File Anda tetap berada di perangkat Anda. Alat ini bekerja langsung di browser Anda, menggunakan perangkat Anda untuk memproses file Anda. Tidak ada yang dikirim ke server kami, dan kami tidak pernah menerima, menyimpan, atau melihat file maupun angka Anda.
Bagikan hasil
Kutip
Kutip halaman ini
Reembun. (2026, 31 Juli). Konversi warna. https://reembun.com/id/konversi-warna
Cara menggunakannya
Masukkan warnanya
Ketik kode hex, atau tulis rgb(), rgba(), hsl(), maupun hsla(). Bisa juga memilih dari kotak warna yang tersedia.
Sesuaikan
Pengatur hue, saturation, lightness, dan alpha menggeser warnanya, sementara semua notasi ikut diperbarui.
Periksa kontrasnya
Warna itu diuji di atas putih dan hitam terhadap ambang WCAG AA dan AAA, dan itulah yang menentukan teks di atasnya terbaca atau tidak.
Salin notasi yang Anda pakai
HEX, RGB, dan HSL punya tombol salin masing masing.
Format yang didukung
| Format | Contoh | Kapan dipakai |
|---|---|---|
| HEX | #3B82F6 | Paling umum di desain dan CSS |
| RGB | rgb(59 130 246) | Saat nilai kanal perlu dihitung |
| HSL | hsl(217 91% 60%) | Saat membuat varian terang dan gelap |
| OKLCH | oklch(0.62 0.19 259) | Saat konsistensi antar rona penting |
Cara konversi dilakukan
HEX ke RGB adalah pengubahan basis sederhana:
#3B82F6 → 3B = 59, 82 = 130, F6 = 246RGB ke HSL mencari nilai kanal terbesar dan terkecil, lalu menurunkan rona dari selisihnya, kejenuhan dari jaraknya terhadap abu abu, dan kecerahan dari titik tengah keduanya.
RGB ke OKLCH melewati beberapa tahap: menghapus koreksi gamma, mengubah ke ruang warna XYZ, lalu ke Oklab, dan akhirnya ke koordinat silindris. Rumitnya di dalam, tetapi hasilnya jauh lebih mudah dipakai.
Kenapa OKLCH berguna untuk sistem warna
Cobalah menurunkan kecerahan 20% pada HSL untuk warna kuning dan warna biru. Yang biru terlihat sedikit lebih gelap, yang kuning terlihat berubah menjadi cokelat. Ini karena HSL tidak memperhitungkan bahwa mata manusia jauh lebih peka terhadap terang kuning daripada terang biru.
OKLCH memperhitungkannya. Karena itu, membuat skala warna dengan langkah kecerahan yang seragam menghasilkan skala yang benar benar terasa seragam, dan inilah sebabnya sistem desain modern beralih ke sana.
Rasio kontras dan aksesibilitas
| Tingkat | Teks normal | Teks besar |
|---|---|---|
| AA | 4,5 banding 1 | 3 banding 1 |
| AAA | 7 banding 1 | 4,5 banding 1 |
Teks besar berarti minimal 24 piksel, atau 18,66 piksel bila tebal. Rasio dihitung dari luminansi relatif kedua warna, bukan dari selisih angkanya, sehingga dua warna yang terlihat berbeda jauh belum tentu memenuhi syarat.
Kontras yang cukup bukan hanya soal kepatuhan. Layar ponsel di bawah sinar matahari Jakarta memangkas kontras efektif secara drastis, dan warna abu abu muda di atas putih yang terlihat elegan di layar kantor menjadi tidak terbaca sama sekali di luar ruangan.
Privasi
Kode warna yang Anda masukkan tidak dikirim ke mana pun. Seluruh konversi berjalan di dalam browser Anda.
Pertanyaan umum
Bagaimana cara mengubah HEX menjadi RGB?
Pisahkan kode enam digit menjadi tiga pasang, lalu ubah setiap pasang dari heksadesimal ke desimal. Kode 3B82F6 menjadi 3B, 82, F6, yang bernilai 59, 130, 246, sehingga hasilnya rgb(59 130 246).
Apa itu HEX tiga digit?
Bentuk singkat yang menggandakan setiap digit. Kode f0a sama dengan ff00aa. Bentuk ini hanya bisa menyatakan 4.096 warna dari 16,7 juta warna yang mungkin, jadi hanya cocok untuk warna yang kebetulan berpola.
Kenapa HSL lebih mudah dipakai daripada HEX?
Karena ketiga angkanya bermakna langsung, yaitu rona, kejenuhan, dan kecerahan. Untuk membuat varian warna yang lebih gelap, Anda cukup menurunkan angka ketiga. Pada HEX, perubahan yang sama menuntut menghitung ulang tiga pasang digit sekaligus.
Apa itu OKLCH dan kenapa mulai dipakai?
OKLCH adalah ruang warna yang seragam secara persepsi, artinya jarak yang sama pada angkanya terasa sebagai perbedaan yang sama oleh mata. Menurunkan kecerahan 10% pada OKLCH menghasilkan pergeseran yang konsisten pada semua rona, sedangkan pada HSL warna kuning dan biru berperilaku sangat berbeda.
Berapa rasio kontras minimal yang harus dipenuhi?
Panduan WCAG menetapkan minimal 4,5 banding 1 untuk teks berukuran normal dan 3 banding 1 untuk teks besar pada tingkat AA. Untuk tingkat AAA, angkanya menjadi 7 banding 1 dan 4,5 banding 1. Alat ini menghitungnya otomatis untuk pasangan warna yang Anda pilih.
Terakhir ditinjau
