Assombrir couleur hex par %

Les designers, ingénieurs front-end et auteurs de design systems ont constamment besoin de teintes plus sombres d’une couleur de marque pour les états survol, bordures, ombres et texte accessible sur fonds clairs. Deviner un nouvel hex à l’œil est lent et incohérent d’un outil à l’autre. Cette capacité accepte une couleur hex et un pourcentage d’assombrissement de zéro à cent, convertit la couleur en HSL, multiplie la luminosité par un moins ce pourcentage, plafonne le résultat au noir et renvoie l’hex plus sombre avec les détails RGB et HSL. Zéro pour cent conserve la couleur d’origine ; cent pour cent produit le noir.

Ce que signifie assombrir par pourcentage en HSL

Les couleurs sur le web sont souvent stockées en hex ou RGB, mais les pas de teinte perceptifs sont plus simples en HSL : la teinte porte le ton, la saturation la pureté et la luminosité la proximité de l’échantillon avec le noir ou le blanc. Assombrir d’un pourcentage signifie réduire la luminosité en gardant teinte et saturation fixes, de sorte qu’un bleu de marque reste bleu — simplement plus profond.

Cet outil multiplie la luminosité actuelle par un moins le pourcentage sur cent, puis plafonne le résultat pour que la luminosité ne descende jamais sous zéro. À zéro pour cent la luminosité est inchangée, donc la sortie correspond à l’hex d’entrée normalisé. À cinquante pour cent la luminosité est divisée par deux.

À cent pour cent la luminosité devient zéro et le résultat est un noir pur quelle que soit la teinte de départ. Ce modèle relatif correspond à la façon dont de nombreux jetons de design mettent à l’échelle les états interactifs : un seul jeton de base plus un facteur d’assombrissement pour le survol ou l’appui. La soustraction absolue de points de luminosité peut dépasser sur des couleurs déjà sombres ; l’échelle relative avec plafond noir reste toujours dans la plage et n’invente jamais une luminosité négative.

Contrat d’entrée : couleurs hex et pourcentage 0–100

Passez la couleur comme chaîne hex en forme courte ou longue : #RGB ou #RRGGBB, avec ou sans le dièse initial. Les formes courtes s’étendent canal par canal, ainsi #F0A devient #FF00AA avant conversion. Le champ percent est obligatoire et doit être un nombre fini entre zéro et cent inclus.

Des valeurs telles que moins dix, cent un ou un texte non numérique sont rejetées ; l’échec de validation n’est pas facturé. En cas de succès, la réponse inclut original comme hex normalisé de six chiffres en majuscules, hex comme résultat assombri, le percent numérique que vous avez envoyé, rgb avec des canaux entiers de zéro à deux cent cinquante-cinq, et hsl avec la teinte en degrés et la saturation et la luminosité sur une échelle de zéro à cent après l’étape d’assombrissement.

L’arrondi est déterministe, de sorte que relancer la même paire ne dérive pas. Utilisez percent zéro pour normaliser et développer un hex court sans changer la teinte, ou percent cent lorsque vous avez besoin d’un ancrage noir véritable issu du même chemin de code que les assombrissements partiels pour des pipelines de jetons cohérents.

Pour une nuance ou tous les états d’un bouton

Pour une vérification ponctuelle — confirmer qu’un bleu primaire s’assombrit proprement pour le survol d’un bouton, ou qu’un pas de vingt pour cent respecte encore les objectifs de contraste sur blanc — utilisez l’outil gratuit dans le navigateur sur cette page. Il n’y a pas d’appel réseau dans la transformation, ni de modèle, ni de dépendance d’horloge, donc les résultats sont sûrs en périphérie et mis en cache.

Placez le point d’accès dans un pont de plugin Figma, un complément Storybook qui prévisualise les couleurs d’état, ou une étape serveur qui matérialise des surfaces mode sombre à partir d’une palette de base claire. Si vous convertissez déjà les formats avec un convertisseur de couleurs séparé, conservez-le pour les allers-retours HEX–RGB–HSL ; utilisez cet assombrisseur lorsque l’intention de recherche est précisément une teinte plus sombre par pourcentage.

Associez les deux dans un pipeline si vous avez besoin d’un export CMYK après assombrissement, mais l’étape d’assombrissement elle-même n’a besoin que d’hex en entrée et de couleur structurée en sortie avec le noir plafonné à cent pour cent.