HSV kepada HSL

Tukar nilai warna HSV kepada HSL untuk manipulasi warna serba boleh dalam sistem reka bentuk

Berubah antara model warna intuitif untuk fleksibiliti reka bentuk yang dipertingkatkan

Penukar Warna

HSL Output

hsl(0°, 100%, 50%)

HSL Values

Hue 0°

0-360° color wheel position

Ketepuan 100%

0-100% color intensity

Keringanan 50%

0-100% brightness

hsl(0°, 100%, 50%)

Format Tambahan

HSV Value

hsv(0°, 100%, 100%)

RGB Value

rgb(255, 0, 0)

Penggunaan CSS

color: hsl(0°, 100%, 50%);
background-color: hsl(0°, 100%, 50%);

Insight Penukaran

Merah terang ini mengekalkan ketepuan penuh dalam kedua-dua model warna tetapi menunjukkan ukuran kecerahan yang berbeza, menunjukkan perbezaan utama antara Nilai (HSV) dan Kecerahan (HSL).

Contoh Penukaran

Merah Bersemangat

HSV 0°, 100%, 100%

HSL 0°, 100%, 50%

Perbezaan Ringan = 50% daripada Nilai

Hijau Hutan

HSV 120°, 75%, 55%

HSL 120°, 60%, 35%

Perbezaan Dilaraskan untuk skala ringan

Biru Diraja

HSV 220°, 75%, 88%

HSL 220°, 70%, 55%

Perbezaan Ringan seimbang untuk persepsi

Merah Jambu Lembut

HSV 340°, 40%, 95%

HSL 340°, 70%, 80%

Perbezaan Ketepuan meningkat dalam HSL

Ungu yang disenyapkan

HSV 270°, 30%, 70%

HSL 270°, 30%, 60%

Perbezaan Keringanan dilaraskan ke bawah

Nada Kelabu

HSV 0°, 0%, 50%

HSL 0°, 0%, 50%

Perbezaan Sama untuk skala kelabu

Alat yang Disyorkan

HSL to HSV Converter

Tukar nilai warna HSL kembali kepada HSV untuk manipulasi warna alternatif

Penjana Harmoni Warna

Cipta skema warna seimbang menggunakan perhubungan warna berasaskan HSL

HSL Color Scales

Hasilkan warna, warna dan ton sebarang warna menggunakan pelarasan HSL

Pembanding Model Warna

Visualisasikan cara warna muncul merentas model HSV, HSL, RGB dan CMYK

Mengenai Alat Ini

Penukar HSV ke HSL ini memudahkan peralihan lancar antara dua model warna intuitif, setiap satu dengan kelebihan berbeza untuk tugas reka bentuk dan aliran kerja yang berbeza.

HSV (Hue, Saturation, Value) represents colors based on human perception, with Value controlling the brightness from black to full color. This makes it particularly intuitive for tasks like adjusting lightness while preserving chromatic intensity, common in interface design.

HSL (Hue, Saturation, Lightness) structures color around perceived lightness, with Lightness ranging from black through the pure color to white. This model excels at creating consistent color scales and harmonies, as equal increments in lightness produce perceptually consistent steps.

Walaupun kedua-dua model berkongsi komponen Hue dan Ketepuan, rawatan mereka terhadap kecerahan (Nilai lwn. Kecerahan) mencipta gelagat yang berbeza secara asasnya. Penukar ini menggunakan algoritma matematik yang tepat untuk menterjemah antara model ini sambil mengekalkan konsistensi visual, membolehkan pereka bentuk memanfaatkan kekuatan setiap model sepanjang aliran kerja mereka.