Pourquoi ajuster la luminosité d'une couleur ?
Ajuster la luminosité est l'une des operations les plus courantes en design. A partir d'une couleur de marque, vous avez besoin de variantes plus claires pour les fonds et les états inactifs, et de variantes plus sombres pour les textes et les états actifs. La luminosité permet de créer une hierarchie visuelle tout en restant dans la même famille chromatique. Notre calculatrice travaille dans l'espace HSL pour garantir que la teinte reste constante : seule la luminosité change, preservant l'identité de votre couleur.
Comprendre la luminosité en HSL
En HSL, la luminosité (L) va de 0% (noir) à 100% (blanc). A 50%, la couleur est a son expression la plus pure. En dessous de 50%, elle s'assombrit progressivement vers le noir. Au-dessus, elle s'eclaircit vers le blanc. Cette échelle linéaire et intuitive est bien plus pratique que de manipuler les composantes RGB individuellement pour ajuster la clarte d'une couleur. Notre outil affiche les valeurs HSL à chaque étape pour que vous compreniez exactement ce qui change.
Créer une échelle de luminosité pour votre système de design
Les systèmes de design comme Tailwind CSS ou Material Design reposent sur des échelles de luminosité pour chaque couleur (50, 100, 200, ..., 900). Notre générateur d'échelle produit automatiquement 10 paliers repartis uniformement entre la version la plus claire et la plus sombre de votre couleur. Copiez les codes HEX de chaque palier pour les intégrer directement dans votre configuration Tailwind, vos variables CSS ou votre design system Figma.