Générateur de palette monochrome

Un générateur de palette monochrome prend une couleur hex CSS et un nombre entier de pas, puis renvoie N échantillons qui partagent la même teinte et la même saturation tandis que la clarté avance par incréments égaux du noir au blanc. Les designers choisissent cette harmonie classique à une teinte lorsqu'un bleu marine de marque doit rester bleu marine des surfaces profondes aux fonds pâles, sans dériver vers une teinte voisine comme le ferait un schéma analogue. L'outil convertit l'hex en HSL, conserve H et S, et place la clarté à i fois cent divisé par N moins un, de sorte que cinq pas tombent à zéro, vingt-cinq, cinquante, soixante-quinze et cent pour cent.

Comment une palette monochrome fait avancer la clarté

Partez d'une couleur hex CSS telle que #3366cc ou la forme courte #36c. L'analyseur retire les espaces, met les chiffres en minuscules, développe les codes à trois chiffres selon la règle CSS de doublement 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 clarté selon les formules habituelles de CSS et W3C : la clarté est la moyenne des fractions maximale et minimale du canal, la saturation dépend de cette clarté, et la teinte se mesure en degrés autour de la roue des couleurs, les gris achromatiques rapportant une teinte nulle.

Un schéma monochrome ne fait pas tourner la teinte et ne mélange pas vers le noir ou le blanc en RGB ; il ne fait varier que le pourcentage de clarté tandis que teinte et saturation restent exactement celles de la couleur de base.

Pour l'indice de pas i de zéro à N moins un, la clarté vaut i fois cent divisé par N moins un, de sorte que le premier échantillon est toujours le noir pur à clarté zéro, le dernier est toujours le blanc pur à clarté cent, et les arrêts intermédiaires sont également espacés en clarté HSL. Une fois chaque nouvelle clarté connue, le même chemin CSS teinte-vers-rgb reconvertit HSL en canaux entiers et en code hex à six chiffres en minuscules.

Cinq pas sur un bleu de clarté moyenne donnent donc noir, un marine profond, un ton moyen proche de l'original, un ciel pâle et blanc — tous conservant encore la teinte et la saturation d'origine. 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 palette 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 deux à vingt-et-un é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 deux et vingt-et-un inclus. Chaque échantillon de palette inclut index, hex, les entiers r g b, les nombres de teinte saturation clarté et les chaînes imprimables rgb et hsl. La couleur d'origine est toujours renvoyée comme base afin que les clients puissent afficher la graine à côté de la rampe ; cette graine n'apparaît dans swatches que lorsque sa clarté tombe exactement sur un arrêt pair, par exemple clarté cinquante avec cinq pas.

Les contrôles typiques comprennent cinq pas sur #3366cc, trois pas sur le rouge court #f00, et la confirmation qu'une chaîne non hex échoue à la validation. Branchez le formulaire gratuit du navigateur pour les revues de design et les rampes rapides, puis appelez le contrat identique depuis des scripts lorsque vous avez besoin d'une génération en masse d'échelles de jetons. Conservez steps dans l'intervalle documenté plutôt que de compter sur des écrêtages silencieux — cet outil échoue de façon explicite afin que les systèmes de design restent prévisibles.

Où les palettes monochromes apparaissent dans le travail réel

Les designers produit construisent des rampes d'IU à une teinte pour qu'un primaire de marque couvre texte, surfaces, pastilles et états désactivés sans introduire une seconde teinte qui lutterait contre l'identité. Les relecteurs d'accessibilité explorent les compagnons d'une couleur de texte ou d'icône le long d'une échelle de clarté, puis remettent des candidats à un vérificateur de contraste plutôt que de deviner les tons moyens à l'œil.

Les équipes marketing produisent des pastels de campagne et des accents profonds à partir d'un logo saturé pour les bannières sociales et les en-têtes d'e-mail, en préservant l'identité de teinte de la marque. Les ingénieurs frontend scriptent des rampes monochromes en intégration continue afin qu'une seule couleur de marque produise une échelle documentée pour graphiques, badges et boutons secondaires.

Les auteurs de programmes qui enseignent l'harmonie des couleurs peuvent montrer qu'un schéma monochrome est le membre à une teinte de la famille classique qui comprend aussi les rotations complémentaire, analogue, triadique et tétradique — ces autres pages font tourner la teinte, tandis que celle-ci ne parcourt que la clarté.

Si vous avez ensuite besoin d'un opposé complémentaire, d'une paire de voisins analogues, d'une triade à cent vingt degrés ou d'un seul pas d'éclaircissement, traitez-les comme des intentions de recherche et des pages distinctes plutôt que de surcharger cette page monochrome. Les couleurs CSS nommées telles que tomato sont hors périmètre ; résolvez-les d'abord en hex.