Générateur de Palette de Couleurs - Créez des Combinaisons de Couleurs Harmonieuses

Qu’est-ce qu’un générateur de palettes de couleurs ?

Un générateur de palettes de couleurs est un outil qui crée un ensemble de couleurs assorties à partir d’une couleur de départ, appelée couleur primaire. Ce générateur prend une couleur primaire et un type d’harmonie, puis calcule le reste de la palette selon les règles de la théorie des couleurs. Les quatre types d’harmonie pris en charge sont les harmonies complémentaires, analogues, triadiques et monochromatiques.

Comment l’outil crée une palette

L’outil convertit la couleur primaire du code hexadécimal (comme #3B82F6) vers le modèle de couleur TSL. Le modèle TSL décrit une couleur à l’aide de trois nombres :

• Teinte : la position de la couleur sur une roue chromatique de 360 degrés (0° correspond au rouge, 120° au vert et 240° au bleu).
• Saturation : l’intensité de la couleur, de 0 % (gris) à 100 % (couleur pure).
• Luminosité : la proximité de la couleur par rapport au noir ou au blanc, de 0 % (noir) à 100 % (blanc).

Chaque type d’harmonie modifie la teinte, la luminosité ou les deux, puis reconvertit le résultat en code hexadécimal.

Comment calculer les couleurs complémentaires

La formule :

$h' = (h + 180) \bmod 360$

où h est la teinte de la couleur primaire en degrés et h′ la nouvelle teinte. L’opération modulo ramène sur la roue un résultat qui dépasse un tour complet.

La saturation et la luminosité restent identiques.

Exemple détaillé : le bleu pur, #0000FF, a une teinte de 240°, une saturation de 100 % et une luminosité de 50 %. L’ajout de 180° donne une teinte de 60°. La conversion de la teinte 60° en code hexadécimal, avec la même saturation et la même luminosité, produit #FFFF00, un jaune. Cet outil associe donc le bleu au jaune, et non à l’orange.

Cela peut prêter à confusion, car les cours d’art enseignent souvent une autre roue chromatique, la roue pigmentaire RYB (rouge-jaune-bleu), où la couleur opposée au bleu est l’orange. Cet outil fonctionne avec la roue TSL fondée sur le modèle RVB utilisé par les écrans ; ses paires complémentaires diffèrent donc de celles de la roue du mélange des peintures.

Comment calculer les couleurs analogues

Les couleurs analogues se situent près de la couleur primaire sur la roue. L’outil génère deux teintes éloignées de 30° et deux teintes éloignées de 60° de la teinte primaire, toutes avec la même saturation et la même luminosité.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

où h est la teinte de la couleur primaire.

Exemple détaillé : le bleu, #0000FF (teinte 240°), produit la teinte 270° (#8000FF), la teinte 210° (#0080FF), la teinte 300° (#FF00FF) et la teinte 180° (#00FFFF). Avec la couleur primaire, la palette contient cinq couleurs.

Comment calculer les couleurs triadiques

Les couleurs triadiques sont espacées de 120° sur la roue, formant un trio régulièrement réparti avec la couleur primaire.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

Exemple détaillé : le rouge, #FF0000 (teinte 0°), produit la teinte 120° (#00FF00, vert) et la teinte 240° (#0000FF, bleu). L’ensemble de trois couleurs est composé du rouge, du vert et du bleu, les trois mêmes teintes utilisées comme couleurs primaires sur les écrans numériques.

Comment calculer les couleurs monochromatiques

Les couleurs monochromatiques conservent la même teinte et la même saturation et ne modifient que la luminosité. L’outil modifie la luminosité de 15 et 30 points de pourcentage dans chaque direction, avec des limites fixées entre 5 % et 95 %.

$l \pm 15, \qquad l \pm 30$

où l est la luminosité de la couleur primaire, exprimée en points de pourcentage.

Exemple détaillé : le bleu, #0000FF (luminosité 50 %), produit une luminosité de 65 % (#4D4DFF), une luminosité de 35 % (#0000B3), une luminosité de 80 % (#9999FF) et une luminosité de 20 % (#000066).

En raison des limites à 5 % et 95 %, une couleur primaire déjà très claire ou très sombre peut atteindre deux fois la même limite. Le noir, #000000, donne une luminosité de 15 % (#262626), de 5 % (#0D0D0D), de 30 % (#4D4D4D), puis de nouveau de 5 % (#0D0D0D) : une couleur est donc répétée.

Utilisation de l’outil

1. Choisissez une couleur primaire avec le sélecteur de couleurs ou saisissez un code hexadécimal tel que #3B82F6.
2. Choisissez un type d’harmonie : complémentaire, analogue, triadique ou monochromatique.
3. Consultez la palette générée. Chaque pastille affiche son code hexadécimal sur un bouton.
4. Cliquez sur ce bouton pour copier le code hexadécimal, ou utilisez « Copy All Colors » pour copier toute la palette en une seule fois.

Vérification du contraste pour l’accessibilité

Chaque pastille de couleur affiche deux petits badges : l’un pour le contraste avec le blanc, l’autre pour le contraste avec le noir. L’outil calcule un ratio de contraste à l’aide de la formule WCAG :

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

où C est le ratio de contraste.

L1 est la luminance relative de la couleur la plus claire et L2 celle de la couleur la plus sombre. La luminance est calculée à partir des valeurs de rouge, de vert et de bleu de la couleur. Un badge affiche « AA » lorsque le ratio est supérieur ou égal à 4,5, le minimum fixé par les WCAG pour un texte de taille normale. Il affiche « ! » lorsque le ratio est inférieur à 4,5. Le passage du pointeur sur un badge affiche le ratio exact. Un texte noir sur un fond blanc obtient un ratio de 21, la valeur maximale possible.

L’outil applique la même règle de contraste pour choisir la couleur du bouton de copie de chaque pastille. Il compare la couleur de la pastille au noir et au blanc, puis choisit celle des deux qui offre la meilleure lisibilité. Le changement s’effectue à une luminance relative d’environ 0,179, le point où les deux ratios sont égaux.

Foire aux questions

Qu’est-ce qu’un générateur de palettes de couleurs ? C’est un outil qui produit un ensemble de couleurs fonctionnant ensemble, à partir d’une couleur primaire et d’une règle d’harmonie choisie.

Pourquoi cet outil associe-t-il le bleu au jaune plutôt qu’à l’orange pour les couleurs complémentaires ? L’outil fait tourner la teinte de 180° sur la roue TSL, fondée sur le mélange de lumières rouge, verte et bleue par les écrans. La roue de peinture rouge-jaune-bleu enseignée en cours d’art produit d’autres paires complémentaires, car elle mélange des pigments et non de la lumière.

Combien de couleurs chaque type d’harmonie produit-il ? L’harmonie complémentaire produit 2 couleurs au total, couleur primaire comprise. L’harmonie triadique en produit 3. L’harmonie analogue en produit 5. L’harmonie monochromatique en produit 5.

Quel modèle de couleur l’outil utilise-t-il en interne ? Le modèle TSL (teinte, saturation, luminosité). Il convertit le code hexadécimal saisi en TSL, effectue les calculs, puis reconvertit le résultat en code hexadécimal.

L’outil vérifie-t-il l’accessibilité des couleurs ? Oui. Chaque pastille indique si son contraste avec le blanc et avec le noir est suffisant pour respecter la norme WCAG AA applicable au texte normal, qui exige un ratio d’au moins 4,5.

Puis-je utiliser plusieurs types d’harmonie pour un projet ? Oui. De nombreux designs combinent plusieurs types d’harmonie, par exemple un ensemble de couleurs analogues pour les couleurs principales et une couleur complémentaire pour un bouton ou une mise en évidence.

Formats de couleur

L’outil écrit chaque couleur générée sous la forme d’un code hexadécimal à six chiffres précédé du signe # (par exemple #ff0000 pour le rouge). Les codes hexadécimaux correspondent directement aux valeurs de rouge, de vert et de bleu, chacune allant de 0 à 255. La couleur primaire est affichée exactement comme elle a été saisie ; une abréviation à trois chiffres telle que #F00 reste donc sous cette forme courte. Les codes à trois chiffres désignent la même couleur que la forme à six chiffres : chaque chiffre est doublé, ainsi #F00 devient #FF0000. Le modèle TSL est une autre manière de décrire les mêmes couleurs, en utilisant la teinte, la saturation et la luminosité plutôt que les quantités de rouge, de vert et de bleu.