Outils Pantone

HSV vers HSL

Convertissez les valeurs de couleur HSV en HSL pour une manipulation polyvalente des couleurs dans les systèmes de conception

Transformez entre des modèles de couleurs intuitifs pour une flexibilité de conception améliorée

Convertisseur de couleurs

HSV Input

180° 360°
100%
0% 50% 100%
100%
0% 50% 100%

Cliquez sur les échantillons de couleurs pour des exemples

HSL Output

hsl(0°, 100%, 50%)

HSL Values

Teinte

0-360° color wheel position

Saturation 100%

0-100% color intensity

Légèreté 50%

0-100% brightness

hsl(0°, 100%, 50%)

Formats supplémentaires

HSV Value

hsv(0°, 100%, 100%)

RGB Value

rgb(255, 0, 0)

Utilisation du CSS

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

Informations sur la conversion

Ce rouge vif maintient une saturation complète dans les deux modèles de couleurs, mais présente des mesures de luminosité différentes, démontrant la différence clé entre la valeur (HSV) et la luminosité (HSL).

Exemples de conversion

Rouge vif

HSV 0°, 100%, 100%
HSL 0°, 100%, 50%
Différence Légèreté = 50% de la valeur

Vert forêt

HSV 120°, 75%, 55%
HSL 120°, 60%, 35%
Différence Ajusté pour l'échelle de luminosité

Bleu royal

HSV 220°, 75%, 88%
HSL 220°, 70%, 55%
Différence Légèreté équilibrée pour la perception

Rose doux

HSV 340°, 40%, 95%
HSL 340°, 70%, 80%
Différence Saturation augmentée en HSL

Violet atténué

HSV 270°, 30%, 70%
HSL 270°, 30%, 60%
Différence Luminosité ajustée à la baisse

Ton gris

HSV 0°, 0%, 50%
HSL 0°, 0%, 50%
Différence Identique pour les niveaux de gris

Outils recommandés

À propos de cet outil

Ce convertisseur HSV vers HSL facilite la transition transparente entre deux modèles de couleurs intuitifs, chacun avec des avantages distincts pour différentes tâches de conception et flux de travail.

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.

Bien que les deux modèles partagent les composantes Teinte et Saturation, leur traitement de la luminosité (Valeur vs Luminosité) crée des comportements fondamentalement différents. Ce convertisseur utilise des algorithmes mathématiques précis pour effectuer la conversion entre ces modèles tout en préservant la cohérence visuelle, permettant ainsi aux concepteurs d'exploiter les atouts de chaque modèle tout au long de leur processus.

Questions fréquemment posées