Konverter HSB / HSV ke HSLA
Tempel nilai HSB / HSV, langsung dapat HSLA. Format lain juga bisa.
Tabel opasitas: alpha HEX dan HSLA
Pada HEX 8 digit, dua digit terakhir menentukan opasitas: FF berarti buram penuh, 80 sekitar 50%, dan 00 transparan penuh. Tabel menampilkan warna contoh setiap 5%.
| Opasitas | Alpha HEX | HEX | HSLA |
|---|---|---|---|
| 100% | ff | #ff5733 | hsla(10.59, 100%, 60%, 1) |
| 95% | f2 | #ff5733f2 | hsla(10.59, 100%, 60%, 0.95) |
| 90% | e6 | #ff5733e6 | hsla(10.59, 100%, 60%, 0.9) |
| 85% | d9 | #ff5733d9 | hsla(10.59, 100%, 60%, 0.85) |
| 80% | cc | #ff5733cc | hsla(10.59, 100%, 60%, 0.8) |
| 75% | bf | #ff5733bf | hsla(10.59, 100%, 60%, 0.75) |
| 70% | b3 | #ff5733b3 | hsla(10.59, 100%, 60%, 0.7) |
| 65% | a6 | #ff5733a6 | hsla(10.59, 100%, 60%, 0.65) |
| 60% | 99 | #ff573399 | hsla(10.59, 100%, 60%, 0.6) |
| 55% | 8c | #ff57338c | hsla(10.59, 100%, 60%, 0.55) |
| 50% | 80 | #ff573380 | hsla(10.59, 100%, 60%, 0.5) |
| 45% | 73 | #ff573373 | hsla(10.59, 100%, 60%, 0.45) |
| 40% | 66 | #ff573366 | hsla(10.59, 100%, 60%, 0.4) |
| 35% | 59 | #ff573359 | hsla(10.59, 100%, 60%, 0.35) |
| 30% | 4d | #ff57334d | hsla(10.59, 100%, 60%, 0.3) |
| 25% | 40 | #ff573340 | hsla(10.59, 100%, 60%, 0.25) |
| 20% | 33 | #ff573333 | hsla(10.59, 100%, 60%, 0.2) |
| 15% | 26 | #ff573326 | hsla(10.59, 100%, 60%, 0.15) |
| 10% | 1a | #ff57331a | hsla(10.59, 100%, 60%, 0.1) |
| 5% | 0d | #ff57330d | hsla(10.59, 100%, 60%, 0.05) |
| 0% | 00 | #ff573300 | hsla(10.59, 100%, 60%, 0) |
Contoh HSB / HSV ke HSLA
Tentang HSB / HSV dan HSLA
HSV, disebut juga HSB, memakai rona, saturasi, dan value. Photoshop, Figma, dan kebanyakan pemilih warna memakainya untuk area pemilih berbentuk kotak.
HSLA adalah HSL dengan kanal alpha untuk opasitas, ditulis hsla(11, 100%, 60%, 0.5). Alpha bernilai dari 0 (transparan penuh) sampai 1 (buram penuh), dan CSS modern juga menerimanya di dalam hsl().
Cara kerja konversinya
Kami membaca nilai HSB / HSV, mengubahnya ke CIE XYZ dengan matriks dari spesifikasi CSS Color 4, lalu ke HSLA. Nilai di luar gamut tujuan dipetakan dengan algoritma CSS Color 4, yang mempertahankan kecerahan dan rona serta menurunkan kroma.
Tanya jawab
Bagaimana cara mengonversi HSB / HSV ke HSLA?
Tempel atau ketik nilai HSB / HSV di kolom di atas. PickShade mengonversinya dengan rumus CSS Color 4 saat Anda mengetik, dan sekali klik menyalin nilai HSLA.
Apakah konversi HSB / HSV ke HSLA ini akurat?
Perhitungannya akurat, dan hasilnya hanya dibulatkan untuk tampilan, dengan digit yang cukup untuk dikonversi balik ke warna yang sama. Jika warna tidak muat di gamut tujuan, PickShade memberi peringatan dan menampilkan warna terdekat yang muat.
Bisakah saya mendapatkan format lain sekaligus?
Bisa. Semua format lain, termasuk OKLCH, Display P3, Tailwind, SwiftUI, Flutter, dan Android, tercantum di bawah hasil dan bisa disalin dengan sekali klik.
Apakah konverter ini gratis?
Ya. Gratis, tanpa daftar, dan sepenuhnya berjalan di browser Anda.