Éclaircisseur de couleur

Un éclaircisseur de couleur prend un code hex CSS et un pourcentage, puis renvoie une version plus claire en n'élevant que le canal de luminosité dans l'espace HSL. Teinte et saturation restent inchangées, ainsi les bleus de marque restent bleus et les rouges restent rouges, tandis que la surface s'adoucit pour les états de survol, les arrière-plans et les teintes accessibles. La quantité est un pourcentage de la marge restante entre la luminosité actuelle et le blanc pur : zéro pour cent laisse l'échantillon inchangé, cent pour cent produit du blanc pur, et les valeurs intermédiaires s'échelonnent en douceur. Les chaînes hex invalides et les pourcentages hors de zéro à cent sont rejetés avec une erreur de validation claire au lieu d'être tronqués en silence.

Comment fonctionne l'éclaircissement en HSL

Partez d'une couleur hex CSS telle que #3366cc ou la forme courte #36c. L'analyseur étend les codes à trois chiffres, met les chiffres en minuscules et convertit chaque paire en entiers rouge, vert et bleu de zéro à deux cent cinquante-cinq.

Ces canaux sont projetés en teinte, saturation et luminosité avec les formules standard CSS et W3C : la luminosité est la moyenne des fractions maximale et minimale du canal, la saturation dépend de cette luminosité, et la teinte se mesure en degrés autour de la roue chromatique, les gris achromatiques signalant une teinte zéro. Éclaircir ne mélange pas la couleur vers le blanc en RGB ; cela n'élève que le pourcentage de luminosité tandis que teinte et saturation restent fixes.

La nouvelle luminosité est l'ancienne plus la distance restante jusqu'à cent, mise à l'échelle par la quantité sur cent. À amount zéro la formule est une identité pure ; à amount cent le résultat est du blanc pur avec luminosité cent ; à amount vingt un bleu de ton moyen avance de vingt pour cent de sa luminosité actuelle vers le blanc. Une fois la nouvelle luminosité connue, le même chemin CSS teinte-vers-rgb reconvertit HSL en canaux entiers et un code hex à six chiffres en minuscules.

Il n'y a ni graines aléatoires, ni horodatages, ni appels réseau, donc les mêmes entrées donnent toujours la même sortie. Les formes hex alpha à quatre ou huit chiffres sont rejetées car ce contrat est RGB opaque uniquement. Les pourcentages sous zéro ou au-dessus de cent échouent à la validation pour que les clients ne dépassent pas silencieusement l'intervalle autorisé.

Ce que vous envoyez et ce que vous recevez

Envoyez deux champs : color comme chaîne hex et amount comme nombre fini entre zéro et cent inclus. En cas de succès la réponse renvoie la couleur normalisée à six chiffres et l'amount nettoyé, puis fournit les échantillons original et result. Chaque échantillon inclut role, hex, entiers r g b, nombres de teinte saturation luminosité et chaînes imprimables rgb et hsl.

Une courte chaîne formula documente la règle L prime pour la documentation et le support. Contrôles typiques : éclaircir #3366cc de vingt pour cent, éclaircir le rouge pur de cinquante pour cent, et confirmer qu'amount zéro renvoie l'hex d'origine. Utilisez le formulaire gratuit du navigateur pour les revues de design et teintes rapides, puis appelez le même contrat depuis des scripts pour la génération en masse de jetons hover ou d'échelles de thème.

Gardez amount dans l'intervalle documenté plutôt que de compter sur des troncatures silencieuses — cet outil échoue explicitement pour que les design systems restent prévisibles.

Où les éclaircisseurs de couleur interviennent au travail

Les designers produit construisent des états hover et active en éclaircissant les primaires de marque sans dériver la teinte, de sorte qu'un éclaircissement de vingt pour cent d'un CTA marine reste marine au lieu de virer au gris ou au cyan. Les relecteurs d'accessibilité explorent des compagnons plus clairs de couleurs de texte ou d'icône avec des fonds sombres, puis passent les candidats à un vérificateur de contraste plutôt que d'estimer les demi-tons à l'œil.

Les équipes marketing produisent des pastels de campagne à partir de logos saturés pour bannières sociales et en-têtes d'e-mail tout en préservant l'identité de teinte de la marque. Les ingénieurs frontend scriptent des rampes d'ombre en intégration continue pour qu'une seule couleur de marque produise une échelle documentée de pas plus clairs pour graphiques, puces et boutons secondaires.

Si vous devez ensuite assombrir une couleur, convertir HSL en RGB, bâtir une palette analogue ou vérifier le contraste WCAG, traitez-les comme des intentions de recherche et pages distinctes plutôt que de surcharger cette page d'éclaircissement.