Mengubah warna antara HEX, RGB, dan HSL
Dipublikasikan · Diperbarui 2 menit baca
HEX, RGB, dan HSL menggambarkan warna yang sama dengan tiga cara. Alat ini menampilkan ketiganya sekaligus dan menerima penulisan yang lazim; HSL yang dibulatkan ke bilangan bulat menjelaskan selisih satu tingkat yang terlihat saat kembali ke HEX.
Tiga penulisan untuk warna yang sama
Jelajahi warna secara bawaan menampilkan ketiga bentuk, disertai pratinjau warna. Untuk hijau #2F4A3F:
| Bentuk | Hasil |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
Tiga tombol HEX, RGB, dan HSL pada panel meringkas hasil menjadi satu bentuk saja, praktis untuk disalin apa adanya.
Penulisan yang diterima
| Penulisan | Contoh | Hasil HEX |
|---|---|---|
| HEX pendek | #fff | #ffffff |
| HEX dengan transparansi | #2F4A3F80 | #2f4a3f80 |
| RGB dengan koma | rgb(47, 74, 63) | #2f4a3f |
| RGB dengan spasi | rgb(47 74 63) | #2f4a3f |
| RGB dalam persen | rgb(100%, 0%, 0%) | #ff0000 |
| HSL dengan spasi | hsl(156 22% 24%) | #304b40 |
Nama warna seperti “rouge”, dan kanal di luar 0 sampai 255 seperti rgb(300, 0, 0), ditolak dengan pesan yang mencantumkan penulisan yang diterima.
Transparansi
Transparansi ditulis dalam HEX dengan delapan digit, atau setelah garis miring dengan spasi. Warna rgb(47 74 63 / 50%) menghasilkan #2f4a3f80 dalam HEX dan rgba(47, 74, 63, 0.5) dalam RGB. Sebaliknya, #2F4A3F80 menghasilkan opasitas 0,502, karena 80 dalam heksadesimal adalah 128 dari 255.
Mengapa bolak-balik berubah satu tingkat
HSL ditampilkan dalam bilangan bulat: rona dalam derajat, saturasi dan kecerahan dalam persen. Kembali dari HSL ke HEX karena itu jatuh pada warna di sekitarnya, bukan warna awal.
| Awal | HSL yang ditampilkan | Kembali ke HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
Selisihnya satu tingkat pada tiap kanal, tidak terlihat oleh mata. Untuk design token atau merek, jadikan HEX asli sebagai acuan dan jangan melewati HSL lagi.
Abu-abu
Warna abu-abu memiliki saturasi nol dan rona tanpa pengaruh: #808080 menghasilkan rgb(128, 128, 128) dan hsl(0, 0%, 50%).
Yang tidak diukur alat
Konversi format tidak mengatakan apa pun tentang keterbacaan. Alat ini tidak menghitung kontras antara teks dan latarnya: periksa secara terpisah sebelum menerbitkan. Kasus kode QR, tempat kontras menentukan keterbacaan, dibahas di Membuat kode QR yang terbaca pada pemindaian pertama.
Periksa sebuah konversi
- Tempel warna ke dalam kolom: pratinjaunya harus sesuai dengan yang Anda harapkan.
- Salin bentuk yang diminta sistem Anda.
- Untuk mempertahankan warna yang persis, simpan HEX atau RGB, bukan HSL.