Générateur d'ombres couleur

Un générateur d'ombres de couleur prend un hex CSS de base et un nombre de pas, puis renvoie une échelle complète d'ombres plus sombres et de teintes plus claires en ne déplaçant que le canal de luminosité dans l'espace HSL. La teinte et la saturation restent fixes, de sorte que les bleus de marque restent bleus et les rouges de marque restent rouges tandis que les surfaces progressent en douceur du quasi-noir, en passant par la base, jusqu'au quasi-blanc. Les chaînes hex invalides et les nombres de pas hors de l'intervalle entier autorisé sont rejetés avec une erreur de validation claire au lieu d'un écrêtage silencieux.

Comment teintes claires et ombres font avancer la luminosité

Parte d'une couleur hex CSS telle que hash trois trois six six c c ou la forme courte hash trois six c. L'analyseur développe 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 se projettent en teinte, saturation et luminosité selon 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 des couleurs, les gris achromatiques rapportant une teinte nulle. Les ombres ne se mélangent pas vers le noir en RGB ; elles abaissent seulement le pourcentage de luminosité tandis que teinte et saturation restent fixes.

Pour l'indice de pas k de un au nombre de pas choisi, chaque ombre utilise une luminosité égale à la luminosité de base multipliée par un moins k sur les pas, de sorte que l'ombre la plus lointaine aboutit au noir pur avec luminosité zéro et la plus proche se place juste sous la base.

Les teintes claires élèvent la luminosité vers le blanc de la même manière : la luminosité devient la luminosité de base plus la distance restante jusqu'à cent, mise à l'échelle par k sur les pas, de sorte que la teinte la plus lointaine est le blanc pur. Une fois chaque nouvelle luminosité connue, le même chemin CSS teinte-vers-rgb reconvertit HSL en canaux entiers et en code hex à six chiffres en minuscules.

Il n'y a ni graines aléatoires, ni horodatages d'horloge, ni appels réseau, de sorte que les mêmes entrées donnent toujours la même échelle ordonnée. Les formes hex alpha à quatre ou huit chiffres sont rejetées car ce contrat est uniquement RGB opaque. Les pas non entiers ou les valeurs hors de un à vingt échouent à la validation pour que les clients ne dépassent pas en silence l'intervalle autorisé.

Ce que vous envoyez et ce que vous recevez

Envoyez deux champs : color comme chaîne hex et steps comme entier entre un et vingt inclus. Chaque échantillon inclut role, index, step, hex, entiers r g b, nombres de teinte saturation luminosité et chaînes imprimables rgb et hsl. Role vaut shade pour les pas plus sombres, base pour l'original et tint pour les pas plus clairs ; step est négatif pour les ombres, zéro pour la base et positif pour les teintes claires afin que les clients trient ou filtrent sans redériver la luminosité.

Une courte chaîne formula documente les règles de progression de L pour la documentation et le support. Contrôles typiques : trois pas sur hash trois trois six six c c, cinq pas sur le rouge pur, et confirmation qu'un hex invalide échoue à la validation. Utilisez le formulaire gratuit du navigateur pour les revues de design et les rampes rapides, puis appelez le contrat identique depuis des scripts pour la génération en masse d'échelles de tokens.

Maintenez steps dans l'intervalle documenté plutôt que de compter sur des écrêtages silencieux — cet outil échoue de façon explicite pour que les systèmes de design restent prévisibles.

Où les échelles d'ombre interviennent dans le travail réel

Les designers produit construisent des rampes d'interface complètes en générant des états active plus sombres et des fonds hover plus clairs à partir d'un primaire de marque sans dériver la teinte, de sorte qu'une échelle de CTA bleu marine reste bleu marine de l'état pressé à la surface douce. Les revues d'accessibilité explorent des compagnons de couleurs de texte ou d'icônes le long d'une échelle de luminosité, puis remettent les candidats à un vérificateur de contraste plutôt que de deviner les demi-teintes à l'œil.

Les équipes marketing produisent des pastels de campagne et des accents profonds à 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 afin qu'une seule couleur de marque rende une échelle documentée pour graphiques, puces, badges et boutons secondaires.

Si vous avez ensuite besoin d'un seul pas d'éclaircissement, de convertir HSL en RGB, de construire une palette analogue ou de vérifier le contraste WCAG, traitez-les comme des intentions de recherche et des pages d'atterrissage distinctes plutôt que de surcharger cette page d'ombres.