Cara menggunakan
- Masukkan warna — #0f766e, rgb(15 118 110), hsl(175 77% 26%), oklch(…) — atau pilih dengan pemilih warna.
- Salin format yang Anda perlukan dari daftar.
- Atur warna latar belakang untuk memeriksa rasio kontras dan hasil WCAG AA/AAA.
- Klik salah satu warna di Gradasi untuk memakainya.
Penjelasan opsi
- HEX / RGB
- Warna layar sebagai merah, hijau, dan biru dari 0–255. #rrggbbaa dan rgb(… / 50%) menambahkan transparansi.
- HSL / HSV
- Hue, saturasi, dan lightness (atau value). Praktis untuk membuat warna lebih terang atau lebih gelap secara manual.
- OKLCH
- Ruang warna perseptual di CSS Color 4. Mengubah lightness tetap menjaga hue dan kesan kepekatan warna, sehingga ideal untuk palet dan tema gelap.
- CMYK
- Konversi sederhana sebagai referensi saja. Warna cetak sebenarnya bergantung pada profil warna printer, jadi mintalah nilai pastinya ke percetakan Anda.
- Rasio kontras
- WCAG 2.2 mensyaratkan 4,5:1 untuk teks normal dan 3:1 untuk teks besar (18pt, atau 14pt tebal) pada level AA; 7:1 dan 4,5:1 pada level AAA.
Contoh
#0f766e sama dengan rgb(15 118 110), hsl(175 77% 26%), dan oklch(51.1% 0.086 186.4). Di atas latar putih, rasio kontrasnya sekitar 5,5:1, sehingga lulus WCAG AA untuk semua ukuran teks.
Warna umum dalam setiap format
Warna bernama CSS beserta nilainya. CMYK di sini hanyalah konversi matematis sederhana; untuk percetakan profesional, gunakan nilai CMYK dari profil warna printer Anda.
| Nama CSS | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
Format mana yang dipakai
HEX adalah cara tersingkat menulis warna di CSS dan alat desain: dua digit heksadesimal masing-masing untuk merah, hijau, dan biru.
RGB adalah informasi yang sama dalam desimal, dan rgb(255 0 0 / 50%) menambahkan transparansi.
HSL menggambarkan rona, saturasi, dan kecerahan, sehingga mudah membuat warna yang lebih terang atau lebih gelap dari warna yang sama hanya dengan mengubah angka terakhir.
OKLCH adalah format CSS yang lebih baru, di mana langkah kecerahan yang sama terlihat sama berbedanya oleh mata — berguna untuk palet warna yang aksesibel.
Pertanyaan yang sering diajukan
Berapa rasio kontras yang baik untuk teks?
Minimal 4,5:1 untuk teks isi (WCAG AA). Hitam murni di atas putih bernilai 21:1; abu-abu #767676 yang umum di atas putih bernilai 4,54:1, nyaris lulus.
Mengapa nilai CMYK berbeda dari Photoshop?
Photoshop mengonversi melalui profil warna ICC untuk mesin cetak dan kertas tertentu. Alat ini memakai rumus matematis sederhana, yang cukup untuk perkiraan tetapi tidak untuk proof cetak.
Apa perbedaan HSL dan OKLCH?
HSL hanyalah susunan ulang RGB, sehingga kuning dan biru dengan lightness yang sama terlihat sangat berbeda kecerahannya. OKLCH dirancang agar lightness yang sama terlihat sama terangnya di mata.
Apakah OKLCH sudah bisa dipakai di CSS sekarang?
Ya. oklch() berfungsi di semua browser utama versi terbaru.
Privasi
Alat ini berjalan sepenuhnya di browser Anda. File dan teks Anda diproses di perangkat Anda dan tidak pernah diunggah ke server kami.