Comment utiliser

1. Cliquez n'importe où sur la roue chromatique pour choisir une couleur, ou ajustez les curseurs de teinte, saturation et luminosité.
2. Voyez la couleur sélectionnée aux formats HEX, RGB et HSL sous la roue.
3. Cliquez sur un échantillon d'harmonie pour voir les schémas complémentaire, analogue, triadique et complémentaire divisée.

Questions fréquentes

Qu'est-ce qu'une harmonie de couleurs ?

L'harmonie de couleurs désigne un agencement agréable de couleurs fondé sur leur position sur la roue chromatique. Les harmonies courantes comprennent complémentaire (opposée), analogue (adjacente) et triadique (équidistante).

Quelle est la différence entre HEX, RGB et HSL ?

Le HEX est un code hexadécimal à 6 chiffres (#RRGGBB). Le RGB utilise les valeurs rouge, vert et bleu (0-255). Le HSL utilise teinte (0-360°), saturation (0-100 %) et luminosité (0-100 %).

Puis-je utiliser ces couleurs dans mes designs ?

Oui ! Copiez n'importe quelle valeur et collez-la directement dans votre CSS, un logiciel de design ou une application web. Toutes les valeurs sont conformes aux standards et largement prises en charge.

Une brève histoire de la roue chromatique

Isaac Newton a dessiné la première. Dans Opticks (1704), il rapporte les expériences de prisme qu'il avait d'abord présentées à la Royal Society en 1672, démontrant que la lumière blanche est un mélange de couleurs spectrales, et il a disposé le spectre en un cercle fermé pour que l'extrémité rouge puisse rejoindre l'extrémité violette. Il a nommé sept couleurs (rouge, orange, jaune, vert, bleu, indigo, violet) choisies par analogie avec les sept notes de la gamme musicale diatonique, car il croyait que la couleur et l'harmonie partageaient une structure mathématique. L'indigo comme bande distincte du bleu est la victime la plus célèbre de ce choix esthétique.

La Théorie des couleurs de Goethe (1810) a recadré la roue autour de la perception plutôt que de la physique. Il a disposé les couleurs symétriquement en moitiés chaudes « plus » et froides « moins », et a noté que les couleurs opposées « s'évoquent réciproquement dans l'œil », une articulation précoce de la théorie des processus antagonistes qui anticipait la loi du contraste simultané que Michel Eugène Chevreul publierait en 1839 depuis la manufacture de tapisseries des Gobelins.

A Color Notation d'Albert Munsell (1905) a été la première roue fondée sur une perception humaine mesurée plutôt que sur la convention, séparant la teinte, la valeur (luminosité) et le chroma (saturation) en dimensions indépendantes, l'ancêtre direct de tous les espaces colorimétriques perceptuels modernes, dont CIELAB et OKLCH. La roue que la plupart des designers ont apprise à l'école est plus récente : Johannes Itten a codifié la roue RYB à 12 couleurs au Bauhaus entre 1919 et 1922, identifiant trois primaires (rouge, jaune, bleu), trois secondaires, six tertiaires et sept sortes de contraste de couleur. Les roues réellement utilisées à l'écran sont encore différentes : HSL et HSV sont des reparamétrages cylindriques de RGB inventés au PARC et dans d'autres laboratoires graphiques dans les années 1970, pour qu'un designer puisse penser en trois curseurs intuitifs (« cette teinte, plus vive, plus claire ») au lieu de trois canaux RGB opaques. L'étape la plus récente est OKLCH (Björn Ottosson, décembre 2020), désormais dans le CSS Color Module Level 4, une roue où des pas angulaires égaux ressemblent à des pas de teinte perçus égaux.

Trois familles de roue

« Roue chromatique » masque le fait qu'il en existe trois sortes différentes, chacune correcte pour une situation physique différente :

• RYB (rouge, jaune, bleu), la roue pédagogique artistique qu'Itten a popularisée. C'est une convention fondée sur l'expérience des pigments, pas un modèle de la physique. Aucune combinaison de peintures rouge, jaune et bleue ne peut mélanger toutes les couleurs visibles.
• RGB (rouge, vert, bleu) : additif. Utilisé partout où la couleur est émise : moniteurs, téléphones, projecteurs, éclairage de scène. Ancré dans la physiologie : les rétines humaines ont trois types de cônes sensibles aux grandes, moyennes et courtes longueurs d'onde. Les navigateurs et CSS travaillent en RGB, donc la roue HSL de cet outil est un reparamétrage polaire de sRGB.
• CMY / CMYK (cyan, magenta, jaune + key/noir), soustractif. Utilisé partout où la couleur est réfléchie : impression, encre, teinture. Le mélange diminue la luminosité ; les imprimeurs commerciaux ajoutent du noir pour de vrais noirs et pour économiser l'encre.

La conséquence pratique : les valeurs HEX, RGB et HSL exportées par cette roue sont fidèles à l'écran. Elles ne sont pas fidèles à la peinture, et un tirage d'impression CMYK nécessitera sa propre conversion, une étape que les imprimeurs gèrent généralement pour vous.

Comment HSL se projette sur un cercle

HSL signifie teinte, saturation, luminosité (hue, saturation, lightness). La teinte est un angle autour d'un axe central, avec le rouge à 0°, le vert à 120°, le bleu à 240°, et un retour au rouge à 360°. La saturation va de 0 % (gris) à 100 % (pleinement vive). La luminosité va de 0 % (noir), en passant par la teinte naturelle à 50 %, jusqu'au blanc à 100 %. Géométriquement, le modèle est un bicône (deux cônes pointe contre pointe) avec les couleurs les plus saturées à l'équateur. HSV est similaire mais utilise la valeur (Value) au lieu de la luminosité, avec des couleurs pleinement saturées à V=100 et le modèle entier en forme de cône unique.

La fonction hsl() de CSS prend les trois mêmes nombres. La syntaxe moderne est séparée par des espaces, avec un alpha facultatif après une barre oblique :

hsl(210 80% 50%)
hsl(210 80% 50% / 0.5)
hsl(0.5turn 80% 50%)        /* turns also accepted */

L'ancienne notation séparée par des virgules hsl(210, 80%, 50%) et l'alias hsla() sont encore pris en charge pour la rétrocompatibilité. Le CSS Color Module Level 4 est largement disponible dans les navigateurs depuis 2015 environ pour le HSL de base, la syntaxe moderne étant arrivée plus tard.

Mise en garde honnête : HSL n'est pas perceptuellement uniforme. Un jaune à L=50 % paraît bien plus lumineux qu'un bleu à L=50 % alors que les deux ont le même nombre de luminosité, et une roue découpée par teinte à S et L constants aura des jaunes visuellement lourds et des bleus faibles. Pour la visualisation de données et les palettes de marque soigneusement calibrées, le nouvel espace colorimétrique oklch() est un meilleur choix : des pas angulaires égaux ressemblent à des pas de teinte perçus égaux. Pour choisir une couleur et récupérer un HEX, HSL convient.

Les harmonies classiques, avec les calculs

Chaque schéma d'harmonie est défini par un ensemble de décalages angulaires par rapport à une teinte de base. Soit B la teinte que vous avez sélectionnée :

Schéma	Teintes	Ambiance
Monochromatique	B (ne faire varier que S et L)	Subtile, peu contrastée, paisible
Analogue	B − 30°, B, B + 30°	Riche, harmonieuse, couchers de soleil, feuillage
Complémentaire	B, B + 180°	Dynamique, accrocheuse
Complémentaire divisée	B, B + 150°, B + 210°	Fort contraste mais plus doux que la complémentaire pure
Triadique	B, B + 120°, B + 240°	Contraste net avec équilibre et richesse
Tétradique (rectangulaire)	B, B + 60°, B + 180°, B + 240°	Deux paires complémentaires, laissez-en une dominer
Carré	B, B + 90°, B + 180°, B + 270°	Répartition régulière en quatre, l'équilibre est plus difficile

Ces angles sont des conventions pédagogiques héritées de Goethe et d'Itten, pas des lois psychophysiques. Ils produisent de façon fiable du contraste et de l'équilibre, ce qui explique pourquoi les designers s'en servent, mais ce sont des heuristiques plutôt que des règles. Considérez les échantillons d'harmonie ci-dessus comme des points de départ à partir desquels itérer.

Quand recourir à une roue

• Conception web et d'interface. Choisissez une couleur de marque primaire, dérivez une complémentaire pour l'accent danger / appel à l'action, dérivez une troisième couleur triadique pour les graphiques. Puis vérifiez le contraste avec votre arrière-plan et votre texte.
• Identité de marque. Une couleur de logo plus une palette documentée d'harmonies pour les supports marketing.
• Visualisation de données. Palettes catégorielles (plus de 10 teintes distinctes à distance perceptuelle égale) et échelles séquentielles ou divergentes, mieux réalisées en OKLCH qu'en HSL dès que vous dépassez trois ou quatre séries.
• Décoration intérieure. Une couleur de mur de base, une finition analogue, un accent complémentaire dans les coussins ou les œuvres d'art.
• Étalonnage des couleurs en photographie. Le sarcelle-et-orange (une paire complémentaire) est le cliché du cinéma moderne parce que des teints chauds sur des ombres froides se lisent comme cinématographiques.
• Art et illustration de jeux. Distinguer les personnages des environnements par la teinte, avec des accents complémentaires pour les points focaux.

Le daltonisme et la roue

Environ 8 % des hommes et 0,5 % des femmes d'ascendance nord-européenne présentent une forme de déficience de vision des couleurs (le taux varie selon la population). Les gènes des cônes L et M se situent sur le chromosome X, ce qui explique pourquoi la condition est bien plus fréquente chez les hommes. Plusieurs harmonies (en particulier les paires complémentaires rouge/vert) se réduisent à un quasi-monochrome pour les formes les plus courantes :

• Deutéranopie / deutéranomalie : cônes à moyenne longueur d'onde non fonctionnels ou faibles. La forme la plus courante (environ 6 % des hommes). Le rouge et le vert sont confondus.
• Protanopie / protanomalie : cônes à grande longueur d'onde non fonctionnels ou faibles (environ 2 % des hommes). Les rouges paraissent atténués, parfois confondus avec le noir.
• Tritanopie / tritanomalie : cônes à courte longueur d'onde non fonctionnels ou faibles. Très rare. Les bleus et les jaunes sont confondus.

Le principe « ne pas se fier à la seule couleur » de WCAG 2.1 est directement pertinent : n'utilisez jamais la couleur comme seul vecteur d'information. Ajoutez un contraste de luminosité par-dessus le contraste de teinte, utilisez des motifs ou des formes en plus de la couleur dans les graphiques, et passez toute harmonie que vous générez dans un simulateur de daltonisme avant de valider. Vérifiez aussi le contraste WCAG : au minimum 4,5:1 pour le texte normal en AA, 7:1 en AAA.

Plus de questions

Pourquoi le rouge, le jaune et le bleu sont-ils appelés couleurs « primaires » ?

Dans la tradition artistique / RYB (la roue qu'Itten enseignait au Bauhaus), ce sont les trois pigments à partir desquels on supposait que tous les autres pouvaient être mélangés. Cette supposition relève de la convention plutôt que de la physique : aucune combinaison de vrais pigments rouge, jaune et bleu ne peut mélanger toutes les couleurs visibles. En lumière additive, les vraies primaires sont le rouge, le vert et le bleu (RGB) ; en impression soustractive, ce sont le cyan, le magenta et le jaune (CMY). Le RYB persiste dans l'enseignement artistique parce qu'il est pédagogiquement simple et donne des résultats raisonnables lors du mélange de peintures réelles.

Le 16:9 est-il la même chose que le nombre d'or pour la couleur ?

Non, ce sont deux concepts sans rapport. Le « nombre d'or » intervient dans les proportions (rectangles, mise en page) et vaut environ 1,618. Les harmonies de la théorie des couleurs proviennent de la géométrie angulaire sur le cercle des teintes : 180° pour la complémentaire, 120° pour la triadique, 90° pour le carré. Il n'y a pas d'harmonie fondée sur le nombre d'or intégrée à l'enseignement standard de la roue chromatique.

Les couleurs que je vois ici correspondront-elles à ce qui est imprimé ?

Presque certainement pas exactement. Cette roue est du HSL au-dessus de sRGB, une couleur additive, conçue pour les écrans. L'impression est du CMYK soustractif. Les bleus vifs et les verts éclatants qui semblent corrects sur un moniteur se désaturent souvent fortement sur le papier, et les conversions hors gamut peuvent décaler les teintes. Les concepteurs pour l'impression gardent généralement une épreuve calibrée sous les yeux ou travaillent directement en CMYK dans l'outil de conception. Utilisez cette roue pour la maquette à l'écran, puis convertissez.

La « psychologie des couleurs » (rouge = passion, bleu = calme) repose-t-elle sur des preuves réelles ?

Elle a une force populaire, mais un soutien empirique faible et culturellement variable. Différentes cultures associent les mêmes couleurs à des idées très différentes (le blanc est une couleur de mariage en Europe occidentale et une couleur de deuil dans certaines parties de l'Asie de l'Est). Utilisez la psychologie des couleurs comme point de départ de conception et comme vocabulaire pour parler aux clients, pas comme une loi.

Quelque chose est-il envoyé à un serveur ?

Non. La roue est rendue dans un canevas HTML5 ; les angles d'harmonie sont calculés en JavaScript localement ; les chaînes HEX, RGB et HSL sont écrites dans votre presse-papiers via l'API du navigateur. La page fonctionne hors ligne une fois chargée.

Outils associés