Konverter HSLA ke HSB / HSV

Tempel nilai HSLA, langsung dapat HSB / HSV. Format lain juga bisa.

Dari HSLA

Dibaca sebagai HSL

Nilai HSB / HSVhsv(10.59 80% 100% / 0.8)

HSB / HSV ke HSLA

Warna yang sama tanpa transparansi, sebagai HSB / HSV solid

Sesuaikan warna

Rona11°

Opasitas80%

Kecerahan68%

Kroma0,210

Rona34°

Semua format lain

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 HSLA ke HSB / HSV

Warna	HSLA	HSB / HSV
	hsla(0, 100%, 50%, 1)	hsv(0 100% 100%)
	hsla(120, 100%, 50%, 1)	hsv(120 100% 100%)
	hsla(240, 100%, 50%, 1)	hsv(240 100% 100%)
	hsla(0, 0%, 100%, 1)	hsv(0 0% 100%)
	hsla(0, 0%, 0%, 1)	hsv(0 0% 0%)
	hsla(0, 0%, 50.2%, 1)	hsv(0 0% 50.2%)
	hsla(10.59, 100%, 60%, 1)	hsv(10.59 80% 100%)
	hsla(217.22, 91.22%, 59.8%, 1)	hsv(217.22 76.02% 96.47%)
	hsla(160.12, 84.08%, 39.41%, 1)	hsv(160.12 91.35% 72.55%)
	hsla(37.69, 92.13%, 50.2%, 1)	hsv(37.69 95.51% 96.08%)
	hsla(258.31, 89.53%, 66.27%, 1)	hsv(258.31 62.6% 96.47%)
	hsla(330.37, 81.19%, 60.39%, 1)	hsv(330.37 69.49% 92.55%)

Tentang HSLA dan HSB / HSV

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().

HSV, disebut juga HSB, memakai rona, saturasi, dan value. Photoshop, Figma, dan kebanyakan pemilih warna memakainya untuk area pemilih berbentuk kotak.

Cara kerja konversinya

Kami membaca nilai HSLA, mengubahnya ke CIE XYZ dengan matriks dari spesifikasi CSS Color 4, lalu ke HSB / HSV. Nilai di luar gamut tujuan dipetakan dengan algoritma CSS Color 4, yang mempertahankan kecerahan dan rona serta menurunkan kroma.

Tanya jawab

Bagaimana cara mengonversi HSLA ke HSB / HSV?

Tempel atau ketik nilai HSLA di kolom di atas. PickShade mengonversinya dengan rumus CSS Color 4 saat Anda mengetik, dan sekali klik menyalin nilai HSB / HSV.

Apakah konversi HSLA ke HSB / HSV 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.