Konverter warna
Konversi warna antara HEX, RGB, HSL, dan HSV, beserta kontrasnya terhadap hitam dan putih.
Berjalan sepenuhnya di browser Anda. Tidak ada yang diunggah, dicatat, atau disimpan.
Heksadesimal
#3498DB
- RGB
- rgb(52 152 219)
- HSL
- hsl(204.1 69.9% 53.1%)
- HSV
- hsv(204.1 76.3% 85.9%)
- Luminans relatif
- 0,2830
- Kontras di atas putih
- 3,15:1
- Kontras di atas hitam
- 6,66:1
HEX, RGB, HSL, dan HSV adalah empat cara menulis warna sRGB yang sama. Mana yang nyaman bergantung pada apa yang sedang Anda kerjakan: heksadesimal untuk menyalin nilai dari desain, HSL untuk membuat sesuatu sedikit lebih terang tanpa mengubah rona.
Cara kerja
Input dibaca menjadi kanal merah, hijau, dan biru delapan bit ditambah alfa, dan setiap keluaran dihitung dari kanal-kanal itu. Tidak ada yang dikonversi dari keluaran lain, jadi sebuah nilai tidak bisa bergeser karena rantai pembulatan.
Angka kontras mengikuti WCAG 2.1: setiap kanal dilinearkan, diberi bobot sesuai kontribusinya bagi mata, dan rasionya adalah (yang lebih terang + 0,05) dibagi (yang lebih gelap + 0,05). Skalanya dari 1 untuk dua warna identik hingga 21 untuk hitam di atas putih.
Contoh
| Kasus | Masukan | Hasil |
|---|---|---|
| Nilai heksadesimal dari file desain | #3498db | rgb(52 152 219), hsl(204 70% 53%) |
| Bentuk singkat, yang menggandakan setiap digit | #39d | #3399DD, not #039D |
| Dengan transparansi | rgb(52 152 219 / 0.5) | #3498DB80 |
Pertanyaan umum
Apakah kontras 4,5 berarti teks saya lolos?
Bergantung pada teksnya, dan karena itulah yang diberikan adalah angka, bukan vonis. WCAG meminta 4,5 untuk teks biasa dan 3 untuk teks besar, dengan teks besar berarti minimal 18 poin, atau 14 poin jika tebal. Alat yang hanya melihat dua warna tidak bisa tahu aturan mana yang berlaku.
Mengapa konversi ke HSL lalu kembali kadang mengubah satu digit?
Karena heksadesimal punya 256 langkah per kanal dan HSL tidak terbagi pas ke dalamnya. Konversi bolak-balik bisa meleset satu langkah. Di sini setiap notasi dihitung dari kanal aslinya, jadi nilai yang ditampilkan selalu yang paling dekat dengan yang Anda ketik.
Apa beda HSL dan HSV?
Keduanya sama dalam rona dan berbeda dalam hal lainnya. Di HSL, kecerahan 100% adalah putih dan 50% adalah warna murni. Di HSV, nilai 100% adalah warna murni dan putih baru muncul ketika saturasi turun ke nol. Alat desain biasanya menampilkan HSV; CSS memakai HSL.
Apakah warna bernama seperti “rebeccapurple” didukung?
Tidak. Daftar kata kunci CSS adalah tabel sekitar 150 nama yang merupakan bagian dari spesifikasi, bukan aritmetika, dan alat ini mengonversi antarnotasi, bukan mencari nama.
Perlu diketahui
- Semua di sini adalah sRGB, ruang warna yang selalu diasumsikan web. Ruang yang lebih luas yang ditambahkan CSS Color 4 — lab, oklch, display-p3 — menggambarkan warna yang tidak terjangkau sRGB, dan konversi ke sana memerlukan keputusan tentang apa yang dilakukan dengan warna di luar jangkauan. Keputusan itu tidak diambil di sini.
- Angka kontras adalah angka, bukan vonis. Apakah sebuah pasangan warna lolos bergantung pada ukuran dan ketebalan teks, yang tidak diketahui oleh warna itu sendiri.