La plupart des palettes commencent par une couleur que quelqu'un aime déjà : un bleu de marque, le vert d'un logo, un échantillon de tissu pour un mariage La partie difficile est tout après ce premier choix Quelles couleurs vont avec, combien en avez-vous besoin, et pourquoi un ensemble qui semble équilibré dans un outil de conception s'effondre-t-il une fois le texte posé dessus ?
L'harmonie des couleurs répond aux deux premières questions avec une géométrie simple sur une roue chromatique Le contraste répond à la troisième, et c'est celle que les gens sautent Ce guide couvre les deux, avec des valeurs HEX réelles que vous pouvez vérifier, et montre comment le libre générateur de palette de couleurs transforme une couleur de base en six types de palette.
tl;dr : Un générateur de palette de couleurs fait pivoter une couleur de base' ; s teinte autour de la roue chromatique HSL par des angles fixes (180 degrés pour complémentaire, 120 pour triadique, 90 pour tétradique, 30 et 60 pour analogue) ou déplace sa légèreté pour faire des nuances, teintes et ensembles monochromatiques Le générateur de palette de couleurs Toolz fait cette paire client-side, libre, sans inscription : choisissez une base, choisissez l'un des six modes, cliquez sur un échantillon pour copier son code HEX, ou copiez l'ensemble comme propriétés personnalisées CSS. HSL n'est pas perceptuellement uniforme, alors vérifiez n'importe quelle paire de texte et d'arrière-la par rapport avec les rapports de contraste WCAG avant de.
Qu'est-ce qu'un générateur de palette de couleurs ?
Un générateur de palette de couleurs est un outil qui prend une couleur de départ et en calcule les couleurs associées en utilisant des règles fixes, de sorte que l'ensemble semble coordonné sans essais ni erreurs. Les règles proviennent de la roue chromatique : les couleurs opposées contrastent, les couleurs les unes à côté des autres se mélangent et les couleurs espacées uniformément autour du balancier des roues.
Le générateur Toolz fonctionne en HSL, qui décrit une couleur comme teinte, saturation et légèreté La teinte est un angle de 0 à 360 degrés autour de la roue (rouge à 0, vert à 120, bleu à 240).La saturation est la vivacité de la couleur, de 0 % de gris à 100 % de couleur. La luminosité va de 0 % de noir à 100 % de blanc. HSL est définie pour la toile dans le Module de couleur CSS niveau 4 spécification, et chaque navigateur le convertit aux mêmes valeurs RVB.
Travailler en HSL rend les règles d'harmonie faciles à exprimer Une couleur complémentaire est la même saturation et légèreté avec 180 ajoutés à la teinte C'est un ajout au lieu de beaucoup de violon avec les curseurs RVB.
Quels sont les six modes d'harmonie ?
Chaque mode est une recette pour s'éloigner de la couleur de base Voici exactement ce que fait le générateur Toolz dans chacun, tiré de son code source.
| mode | Ce qui change | Échantillons | Positions de teinte |
|---|---|---|---|
| Nuances et ampères ; Teintes | Légèreté uniquement, réglée sur 90, 75, 60, la valeur de base, 35, 22 et 12 | 7 | Teinte de base |
| monochromatique | Légèreté et saturation ensemble | 5 | Teinte de base |
| complémentaire | La teinte bascule de 180 degrés, avec une base plus claire et un complément plus foncé | 4 | Base, base + 180 |
| analogue | Teinte pas à 30 degrés dans chaque sens | 5 | -60, -30, base, +30, +60 |
| triadique | Hue espacée d'un tiers du cercle | 3 | Base, +120, +240 |
| Tétradique | Teinte espacée d'un quart du cercle | 4 | Base, +90, +180, +270 |
Deux détails comptent en pratique Analogues, triadiques et tétradiques gardent la couleur de base' ; s saturation et légèreté sur chaque échantillon, de sorte qu'ils ne changent que de teinte Nuances & amp ; Les teintes et Monochromatic gardent la teinte et changent de légèreté, de sorte qu'ils produisent des versions claires et sombres d'une seule couleur.
Un exemple concret : chaque mode à partir du #4466ee
Le générateur s'ouvre avec #4466ee, un bleu moyen Converti en HSL c'est la teinte 228, la saturation 83 %, la légèreté 60 %. Voici ce que chaque mode renvoie pour cette base Ce sont les codes HEX que l'outil imprime, et vous pouvez les reproduire avec la conversion standard HSL en RVB dans la spécification CSS.
triadique ajoute 120 et 240 à la teinte : 228, puis 348, puis 108 (468 s'enroule jusqu'à 108).
#4466ee hsl(228, 83%, 60%) blue
#ee4466 hsl(348, 83%, 60%) pink-red
#66ee44 hsl(108, 83%, 60%) green
Remarquez le motif A la même saturation et légèreté, en tournant d'exactement un tiers de la roue remanie les trois mêmes valeurs de canal RVB : 44, 66 et ee places de commerce.
complémentaire ajoute 180, qui atterrit sur la teinte 48, un jaune chaud Le mode comprend également une version plus claire de la base et une version plus foncée du complément, vous obtenez donc quatre échantillons : #8aa0f4, #4466ee, #eecc44 et #d2ac14.
analogue étapes 30 degrés à la fois de 168 à 288 : #44eecc, #44bbee, #4466ee, #7744ee, #cc44ee. Il se lit comme une bande allant de la sarcelle au bleu en passant par le violet.
Tétradique ajoute 90, 180 et 270 : #4466ee, #ee44bb, #eecc44, #44ee77.
monochromatique conserve la teinte 228 et échange la saturation contre la légèreté dans les deux sens : #c4cded, #879ae8, #4466ee, #0936ec, #0225b1.
Nuances et ampères ; Teintes définit la légèreté sur 90, 75, 60, la valeur de base, 35, 22 et 12 : #d0d9fb, #8aa0f4, #4466ee, #4466ee, #0f2da3, #0a1c67, #050f38.
La dernière montre une bizarrerie qui mérite d'être connue L'échelle de teinte utilise des pas de légèreté fixes plus la base' ; sa propre légèreté Lorsque la base se trouve à exactement 90, 75, 60, 35, 22 ou 12 pour cent de légèreté, comme le fait le #4466ee à 60, deux échantillons sortent identiques. Nudgez la légèreté de base d'un pas si vous voulez sept couleurs distinctes.
Comment choisir la bonne harmonie pour un travail ?
Choisissez l'harmonie en fonction du contraste dont le design a besoin. Les schémas à faible contraste semblent calmes et faciles à maintenir cohérents ; les schémas à contraste élevé attirent l’attention et sont faciles à exagérer.
| but | Bon mode de démarrage | pourquoi |
|---|---|---|
| Une échelle de couleurs UI (100 à 700) | Nuances et ampères ; Teintes | Des pas clairs et prévisibles, de la lumière au noir |
| Une marque minimale et cohésive | monochromatique | Tout partage une teinte, rien ne se heurte |
| Un appel à l'action qui se démarque | complémentaire | La teinte opposée est le contraste le plus fort |
| Un look doux et naturel | analogue | Mélange de teintes voisines |
| Un set ludique, équilibré | triadique | Trois teintes régulièrement espacées, aucune dominante |
| Graphiques avec plusieurs séries | Tétradique | Quatre teintes distinctes qui se rapportent encore |
Une règle empirique courante pour les mises en page est de laisser une couleur couvrir la majeure partie de la zone, une seconde prendre une part plus petite et un accent apparaître avec parcimonie. Cela fonctionne bien avec les palettes complémentaires et triadiques, où donner à toutes les couleurs un espace égal a tendance à paraître fort.
Pourquoi une palette semble-t-elle équilibrée mais mal lue ?
Une palette peut paraître équilibrée en HSL tout en échouant à l'écran car la légèreté de la HSL n'est pas la luminosité d'une couleur pour une personne. HSL traite chaque teinte à 60 % de luminosité comme une lumière égale. La vision humaine ne le fait pas.
L'exemple complémentaire ci-dessus rend cela concret. #4466ee et #eecc44 ont tous deux une légèreté HSL de 60 %. Leur luminance relative, la mesure utilisée par les directives d'accessibilité du contenu Web pour la luminosité perçue, est très différente : environ 0,17 pour le bleu et environ 0,62 pour le jaune. Le jaune est plusieurs fois plus brillant à l’œil.
Cet écart apparaît comme contraste. En utilisant la formule WCAG, rapport de contraste = (L1 + 0,05) /(L2 + 0,05), où L1 est la couleur plus claire' ;s luminance :
| Paire | Rapport de contraste | WCAG AA pour le texte normal (4.5 :1) |
|---|---|---|
| Texte blanc sur #4466ee | vers 4h77:1 | Passe |
| Texte blanc sur #eecc44 | vers 1,57:1 | échoue |
| Texte noir sur #eecc44 | vers 13h4:1 | Passe |
Le générateur lui-même réagit déjà à cela : chaque swatch sélectionne le texte en marque sombre ou blanche à partir d'une estimation de luminosité, c'est pourquoi les swatches jaunes obtiennent des étiquettes sombres Pour les conceptions réelles, exécutez les paires de texte et d'arrière-plan que vous prévoyez d'utiliser via a vérificateur de contraste de couleurs. Les seuils proviennent de WCAG 2.2: 4,5 :1 pour le texte normal et 3 :1 pour le texte volumineux au niveau AA. Le guide de contraste de couleurs parcourt les mathématiques de luminance étape par étape.
Comment exportez-vous une palette en tant que variables CSS ?
Cliquez sur Copier CSS et le générateur place la palette actuelle sur votre presse-papiers en tant que propriétés personnalisées CSS :root. Les noms sont numérotés par pas de 100 dans l'ordre d'échange Pour l'exemple triadique : X, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y compris les noms
:root {
--color-100: #4466ee;
--color-200: #ee4466;
--color-300: #66ee44;
}
Collez-le en haut d'une feuille de style et référencez les couleurs n'importe où :
.button-primary {
background: var(--color-100);
color: #ffffff;
}
La numérotation suit l'ordre d'échange, pas la légèreté Dans les nuances et amp ; Mode teintes qui s'avère aller de la lumière à l'obscurité, donc --color-100 est la teinte la plus légère En mode triadique ou analogue les nombres ne sont que des positions Renommez les variables à quelque chose de significatif tel que --brand, --accent et --surface une fois que vous avez choisi, parce que --color-200 cela ne signifie rien pour la personne suivante qui lit votre CSS.
Pour copier une seule couleur à la place, cliquez sur son swatch Le code HEX va dans le presse-papiers et le swatch montre " ; Copié" ; pendant un instant.
Pouvez-vous faire un mariage ou une palette de pastel avec ?
Oui, tant que vous apportez la couleur de départ Il n'y a pas de préréglages de mariage ou de thèmes organisés, donc la palette est aussi bonne que la base que vous choisissez.
Pour un mariage, prenez une couleur de quelque chose de réel : les fleurs, le stock de cartes d'invitation, un tissu de robe de demoiselle d'honneur Entrez son code HEX et essayez chaque mode En partant d'un vert sauge, #9caf88, Complementary retourne #c2ceb6, #9caf88, une lavande poussiéreuse #9b88af et un #755e8d plus profond Cette lavande contre sauge est un accord classique, et le math l'a trouvé en un clic.
Pour les pastels, partez d'une base pâle et sofly saturée telle que #a7c7e7. analogique, triadique et tétradique gardent cette légèreté et cette saturation sur chaque échantillon, de sorte que l'ensemble reste doux Nuances & amp ; Les teintes et monochromatiques déplacent délibérément la légèreté, de sorte qu'ils ajoutent des couleurs sombres, jusqu'à #0d1f30 pour ce bleu Il n'y a pas de curseur de luminosité séparé ; la couleur de base est le contrôle.
Les couleurs de l'écran et les couleurs imprimées diffèrent Un moniteur mélange la lumière rouge, verte et bleue, tandis qu'une imprimante dépose l'encre cyan, magenta, jaune et noire sur le papier, et certaines couleurs d'écran vives n'ont pas d'équivalent d'encre exact Si une palette va sur la papeterie, commandez une épreuve imprimée avant une course complète.
Quels sont les erreurs et les cas d'erreur courants ?
La plupart des problèmes de palette proviennent de l'entrée ou d'une confiance trop grande dans les mathématiques.
La palette devient bleue pendant que vous tapez. Jusqu'à ce que la zone de texte contienne un code HEX valide, le générateur retombe à #4466ee. Une valeur à moitié typée comme #9c ou #9caf8 affiche la palette bleue par défaut Le champ accepte trois ou six chiffres hexagonaux, avec ou sans le #, donc #9ca en route vers #9caf88 montre brièvement une palette pour #99ccaa.
L'échantillon de base est à un pas de distance. Les couleurs sont arrondies à des numéros HSL entiers avant d'être reconverties, de sorte que certaines bases n'arrondirent pas exactement. #c08081, par exemple, revient sous la forme #c18182. la différence est d'une unité par canal et invisible, mais cela importe si vous faites correspondre exactement un code de marque : conservez le HEX officiel pour la base et utilisez les générés pour le reste.
Utiliser chaque couleur partout. Une palette analogue à cinq couleurs est une gamme parmi laquelle choisir, et non cinq couleurs qui nécessitent toutes un travail.
Contraste sautant. Comme indiqué ci-dessus, deux couleurs à la même luminosité HSL peuvent différer de plus de trois fois en luminance Vérifiez les paires de texte.
Attendre une uniformité perceptuelle. Les pas d'ombre sont même dans la légèreté HSL, pas dans la façon dont ils semblent légers Si vous avez besoin d'une échelle qui semble uniforme, ajustez les pas individuels à l'œil ou travaillez dans un espace perceptuel tel que OKLCH, que CSS Color 4 définit également.
Comment cela se compare-t-il avec d'autres outils couleur ?
La génération de palette est une étape dans un flux de travail plus long Le tableau montre quel outil correspond à chaque étape.
| Tâche | outil | Ce que ça te donne |
|---|---|---|
| Trouver ou échantillonner une couleur de départ | Cueilleur de couleurs | HEX, RVB et HSL pour n'importe quelle couleur |
| Construire un ensemble coordonné | Générateur de palette de couleurs | Six modes d'harmonie, exportation CSS |
| Faites une gamme fine d'une couleur | Générateur de nuances de couleurs | Une rampe dédiée à la teinte et à l'ombre |
| Mélangez deux couleurs | Mélangeur de couleurs | Couleurs intermédiaires entre deux entrées |
| Vérifier la lisibilité du texte | Vérificateur de contraste de couleur | Rapport WCAG et réussite ou échec |
Si l'échelle compte plus que l'harmonie, le guide pour générer des nuances et des teintes va plus loin sur la construction de 50 à 900 rampes Chaque outil de couleur est répertorié sur le hub d'outils couleur.
Le générateur est-il privé et fonctionne-t-il hors ligne ?
Oui. Tous les mathématiques et le rendu HSL s'exécutent dans votre navigateur avec JavaScript. Rien de ce que vous tapez n'est téléchargé et une fois la page chargée, le générateur de palette continue de fonctionner sans connexion réseau La copie d'un swatch ou du CSS compte dans une limite d'utilisation quotidienne, qui enregistre le mode dans lequel vous étiez, et non vos couleurs.
