Comment utiliser le générateur de palette
- Appuyez sur Nouvelle palette (ou sur la barre d’espace d’un clavier) pour obtenir cinq couleurs qui suivent une harmonie de couleurs. Chaque appui tire une nouvelle palette au hasard.
- Verrouillez les couleurs qui vous plaisent avec le cadenas sous chaque nuancier. Les couleurs verrouillées restent en place pendant que les autres changent ; en mode aléatoire, la première couleur verrouillée devient aussi l’ancre autour de laquelle les nouvelles couleurs sont construites, pour qu’elles s’accordent toujours avec elle.
- Partez de votre propre couleur : réglez Partir de sur Ma couleur de base et choisissez-la — la couleur de votre marque, par exemple. Chaque palette contient alors exactement cette couleur.
- Choisissez une harmonie (analogue, monochrome, complémentaire, complémentaire adjacente, triade, tétrade ou teintes claires et foncées), ou laissez N’importe laquelle pour en changer à chaque fois.
- Ajustez une couleur avec le crayon, qui ouvre le sélecteur de couleur de votre appareil ; la couleur modifiée est verrouillée automatiquement.
- Tirez les couleurs d’une photo : appuyez sur Couleurs d’une image, déposez le fichier sur l’outil ou collez une capture d’écran. Les cinq couleurs principales de l’image sont trouvées et verrouillées.
- Copiez et exportez : touchez un code pour le copier, passez de HEX à RVB, TSL (HSL) ou OKLCH, copiez toute la palette en variables CSS ou en JSON, ou téléchargez un PNG avec les cinq nuanciers. Copier le lien donne une adresse qui ouvre exactement cette palette.
Tout fonctionne dans votre navigateur. Une image chargée est lue sur votre appareil, réduite à 100 pixels au plus sur son grand côté et analysée sur place ; elle n’est jamais envoyée.
Pourquoi les palettes sont générées en OKLCH
Les cercles chromatiques les plus courants — HSL (TSL) en CSS, HSV/TSV dans les logiciels de graphisme — ne sont que des réarrangements des canaux rouge, vert et bleu, pas des modèles de la vision humaine. À la même luminosité HSL de 50 %, le jaune pur paraît bien plus clair que le bleu pur : une palette qui fait tourner la teinte en HSL saute entre des couleurs criardes et ternes. Ce générateur travaille en OKLCH, la forme polaire d’OKLab, un espace colorimétrique perceptuel publié par Björn Ottosson en 2020 et repris par CSS Color Module Level 4 sous la forme de la fonction oklch(). Ses trois nombres sont L (luminosité perçue, 0–100 %), C (chroma, l’intensité de la couleur : 0 est un gris, les couleurs sRVB montent à environ 0,32) et H (angle de teinte en degrés). Des pas égaux en L paraissent des pas égaux de clarté, quelle que soit la teinte.
La conversion se fait en trois étapes : annuler la courbe gamma du sRVB pour obtenir une lumière linéaire, multiplier par une matrice fixe et prendre les racines cubiques, puis multiplier par une seconde matrice pour obtenir L, a et b. Le chroma vaut √(a² + b²) et la teinte atan2(b, a). Valeurs de référence de cet outil, identiques aux valeurs publiées :
| Couleur | HEX | OKLCH |
|---|---|---|
| Rouge | #ff0000 | oklch(62.8% 0.258 29.2) |
| Vert citron | #00ff00 | oklch(86.6% 0.295 142.5) |
| Bleu | #0000ff | oklch(45.2% 0.313 264.1) |
| Blanc | #ffffff | oklch(100% 0 0) |
| Bleu marine | #1f4e79 | oklch(41.4% 0.088 249.1) |
Toutes les couleurs OKLCH n’existent pas sur un écran. Quand une couleur prévue sort du gamut sRVB, le générateur garde sa luminosité et sa teinte et baisse son chroma jusqu’à ce qu’elle entre — la même idée que le gamut mapping de CSS Color 4 —, si bien que la palette ne change jamais de teinte à cause d’un écrêtage.
Comment une palette est construite
Chaque palette part d’une ancre : votre couleur de base, la première couleur verrouillée ou une couleur aléatoire de luminosité comprise entre 45 % et 80 % et de chroma modéré. Les quatre autres couleurs reçoivent les teintes de l’harmonie choisie et des niveaux de luminosité répartis entre 30 % et 90 % (le niveau le plus proche de l’ancre est sauté, donc chaque couleur s’en distingue en clarté). Le chroma varie jusqu’à 30 % autour de celui de l’ancre et diminue vers les couleurs très claires et très foncées, criardes lorsqu’elles sont trop saturées. Un nombre aléatoire tiré à chaque nouvelle palette décide de tout, et le même nombre redonne toujours la même palette : c’est ainsi qu’un lien copié reproduit vos couleurs.
| Harmonie | Teintes par rapport à l’ancre | Effet |
|---|---|---|
| Analogue | −2 à +2 pas de 18 à 32° | Calme, naturel, cohérent |
| Monochrome | Même teinte, cinq niveaux de luminosité | Sûr pour les interfaces et les graphiques |
| Complémentaire | 0° et 180° | Contraste fort ; l’opposée comme accent |
| Complémentaire adjacente | 0°, 150° et 210° | Contraste plus facile à équilibrer |
| Triade | 0°, 120° et 240° | Vivant ; une teinte doit dominer |
| Tétrade (carré) | 0°, 90°, 180° et 270° | Riche ; la plupart des couleurs en sourdine |
| Teintes claires et foncées | Même teinte, mélangée au blanc et au noir en OKLab | Une couleur pour fonds, bordures et texte |
Les angles étant mesurés sur le cercle OKLCH, la complémentaire d’une couleur peut différer de celle d’un cercle HSL ou du cercle chromatique des peintres (rouge-jaune-bleu) : la complémentaire OKLCH du bleu marine #1f4e79 (teinte 249°) est un olive orangé chaud, vers 69°.
Exemple : une triade à partir de #1f4e79
Avec la couleur de base #1f4e79 (luminosité OKLCH 41,4 %, chroma 0,088, teinte 249,1°) et l’harmonie triade, la graine de départ de la page donne les couleurs ci-dessous. Les teintes se situent vers 249°, 9° et 129°, à 120° l’une de l’autre, et la luminosité va de 28,7 % à 92,9 % :
| N° | HEX | OKLCH | Texte blanc | Texte noir |
|---|---|---|---|---|
| 1 | #1f4e79 | oklch(41.4% 0.088 249.1) | 8,66:1 | 2,42:1 |
| 2 | #461a23 | oklch(28.7% 0.068 9.7) | 14,66:1 | 1,43:1 |
| 3 | #758e58 | oklch(61.3% 0.082 128.8) | 3,64:1 | 5,76:1 |
| 4 | #ffdee2 | oklch(92.9% 0.037 9.5) | 1,25:1 | 16,79:1 |
| 5 | #a2b68d | oklch(75% 0.061 129) | 2,18:1 | 9,61:1 |
Les colonnes de contraste indiquent quel texte fonctionne sur chaque couleur. Le bordeaux foncé accepte du texte blanc à 14,66:1, le rose pâle du texte noir à 16,79:1, et le vert intermédiaire n’atteint que 3,64:1 avec du blanc : assez pour de grands titres, trop peu pour du texte courant.
Contraste et accessibilité
Chaque nuancier affiche le meilleur choix entre texte blanc et texte noir, avec son rapport et son niveau ; le tableau de contraste sous la palette donne les deux. Les calculs suivent les règles pour l’accessibilité des contenus web (WCAG) 2.2 du W3C, dont s’inspire aussi le RGAA en France : la luminance relative vaut 0,2126 R + 0,7152 V + 0,0722 B des canaux linéarisés, et le rapport (plus clair + 0,05) / (plus foncé + 0,05), de 1:1 à 21:1. Un texte normal demande 4,5:1 pour le niveau AA et 7:1 pour AAA ; un grand texte (24 px, ou 18,7 px en gras) demande 3:1 pour AA. Les rapports sont tronqués, non arrondis, à deux décimales : une couleur n’apparaît jamais conforme si elle ne l’est pas.
Conseils pour utiliser une palette
- Donnez un rôle à chaque couleur. Une répartition courante est 60 % pour le fond ou la couleur dominante, 30 % pour la secondaire et 10 % pour l’accent ; la couleur la plus foncée sert souvent au texte.
- Vérifiez le texte avant de vous décider. Utilisez le tableau de contraste, ou collez une paire dans le sélecteur de couleur pour voir ses codes et son contraste.
- Ne comptez pas que sur la teinte. Environ un homme sur douze a un trouble de la vision des couleurs rouge-vert ; variez aussi la luminosité.
- Servez-vous de l’export CSS comme base de design tokens : renommez
--color-1et les suivantes en rôles comme--marqueou--fond.
Questions fréquentes
Comment créer une palette à partir de la couleur de ma marque ?
Réglez Partir de sur Ma couleur de base, choisissez votre couleur et une harmonie. Chaque palette contient alors exactement votre couleur, et les quatre autres sont construites autour. Appuyez sur Nouvelle palette jusqu’à ce que le résultat vous plaise.
Comment garder une couleur qui me plaît ?
Touchez le cadenas sous elle. Les couleurs verrouillées restent en place quand vous appuyez sur Nouvelle palette ou sur la barre d’espace, et la première couleur verrouillée sert d’ancre aux palettes suivantes, pour que les nouvelles couleurs restent assorties. Touchez de nouveau le cadenas pour la déverrouiller.
Peut-on créer une palette à partir d’une photo ?
Oui. Appuyez sur Couleurs d’une image, déposez le fichier sur l’outil ou collez une capture d’écran. L’image est réduite sur votre appareil à 100 pixels au plus, ses pixels sont regroupés par coupe médiane puis affinés par k-moyennes, et les cinq plus grands groupes forment la palette, du plus fréquent au moins fréquent. Rien n’est envoyé.
Comment partager ou enregistrer une palette ?
Appuyez sur Copier le lien : l’adresse contient les couleurs, les verrous et la graine aléatoire, elle rouvre donc la même palette partout. La page se souvient aussi de votre dernière palette sur cet appareil. Pour garder une image, utilisez Télécharger le PNG.
Pourquoi OKLCH plutôt que HSL ?
OKLCH est perceptuel : une même valeur de luminosité paraît aussi claire quelle que soit la teinte, d’où des palettes à l’échelle de clairs et de foncés régulière et maîtrisée. En HSL, un jaune et un bleu à 50 % de luminosité paraissent très différents. Les codes oklch() fonctionnent en outre directement dans le CSS des navigateurs actuels.
Que signifient AAA, AA et Faible sur les nuanciers ?
Ils notent le meilleur choix entre texte blanc et noir sur cette couleur selon les WCAG 2.2 : AAA signifie au moins 7:1, AA au moins 4,5:1 (suffisant pour le texte courant), AA grand au moins 3:1 (titres seulement) et Faible moins de 3:1.
Dernière mise à jour : 15 octobre 2026