Menukar warna antara HEX, RGB dan HSL
Diterbitkan pada · Dikemas kini pada 2 minit bacaan
HEX, RGB dan HSL menerangkan warna yang sama dengan tiga cara. Alat ini memaparkan ketiga-tiganya serentak dan menerima tulisan yang lazim; HSL yang dibundarkan kepada integer menerangkan perbezaan satu tahap yang kelihatan apabila kembali ke HEX.
Tiga tulisan bagi warna yang sama
Teroka dan tukar warna secara lalai memaparkan ketiga-tiga bentuk, disertai pratonton warna. Untuk hijau #2F4A3F:
| Bentuk | Hasil |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
Tiga butang HEX, RGB dan HSL pada panel meringkaskan hasil kepada satu bentuk sahaja, praktikal untuk disalin seadanya.
Tulisan yang diterima
| Tulisan | Contoh | Hasil HEX |
|---|---|---|
| HEX pendek | #fff | #ffffff |
| HEX dengan ketelusan | #2F4A3F80 | #2f4a3f80 |
| RGB dengan koma | rgb(47, 74, 63) | #2f4a3f |
| RGB dengan ruang | rgb(47 74 63) | #2f4a3f |
| RGB dalam peratus | rgb(100%, 0%, 0%) | #ff0000 |
| HSL dengan ruang | hsl(156 22% 24%) | #304b40 |
Nama warna seperti “rouge”, dan saluran di luar 0 hingga 255 seperti rgb(300, 0, 0), ditolak dengan mesej yang menyenaraikan tulisan yang diterima.
Ketelusan
Ketelusan ditulis dalam HEX dengan lapan digit, atau selepas garis condong dengan ruang. Warna rgb(47 74 63 / 50%) menghasilkan #2f4a3f80 dalam HEX dan rgba(47, 74, 63, 0.5) dalam RGB. Sebaliknya, #2F4A3F80 menghasilkan kelegapan 0.502, kerana 80 dalam heksadesimal ialah 128 daripada 255.
Mengapa berulang-alik mengubah satu tahap
HSL dipaparkan dalam nombor bulat: rona dalam darjah, ketepuan dan kecerahan dalam peratus. Kembali daripada HSL ke HEX oleh itu mendarat pada warna di sekitarnya, bukan warna asal.
| Permulaan | HSL yang dipaparkan | Kembali ke HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
Perbezaannya satu tahap pada setiap saluran, tidak kelihatan oleh mata. Untuk token reka bentuk atau jenama, jadikan HEX asal sebagai rujukan dan jangan melalui HSL lagi.
Kelabu
Warna kelabu mempunyai ketepuan sifar dan rona tanpa kesan: #808080 menghasilkan rgb(128, 128, 128) dan hsl(0, 0%, 50%).
Apa yang tidak diukur oleh alat
Penukaran format tidak mengatakan apa-apa tentang kebolehbacaan. Alat ini tidak mengira kontras antara teks dan latarnya: semak secara berasingan sebelum menerbitkan. Kes kod QR, yang kontrasnya menentukan kebolehbacaan, dibincangkan dalam Menjana kod QR yang dapat diimbas pada imbasan pertama.
Semak sesuatu penukaran
- Tampal warna ke dalam medan: pratonton mesti sepadan dengan jangkaan anda.
- Salin bentuk yang diminta oleh sistem anda.
- Untuk mengekalkan warna yang tepat, simpan HEX atau RGB dan bukan HSL.