Générateur de palette de couleurs
Partez d'une couleur et obtenez des palettes assorties, chaque nuance avec ses valeurs HEX et RGB et son contraste sur blanc et sur noir.
Fonctionne entièrement dans votre navigateur
Palette aléatoire
Cinq couleurs tirées par le générateur de nombres aléatoires de votre navigateur. Verrouillez celles que vous voulez garder, puis tirez à nouveau. Appuyez sur la barre d'espace pour tirer quand aucun champ de texte n'a le focus.
Exporter
Les palettes sont construites dans l'espace colorimétrique OKLCH et affichées en HEX sRGB : les couleurs trop vives pour un écran voient leur chroma réduite. Les valeurs de contraste utilisent la formule WCAG 2, qui ne mesure que le contraste de luminosité.
Comment créer une palette de couleurs
- Choisissez une couleur de base avec le sélecteur, ou tapez une valeur comme
#1636a3ouf60dans le champ HEX. - Consultez les palettes d'harmonies en dessous. Chaque nuance affiche son HEX, son RGB et indique si un texte noir ou blanc atteint le niveau WCAG AA ou AAA dessus.
- Choisissez une palette sous Exporter et copiez-la ou téléchargez-la en propriétés personnalisées CSS, en tableau JSON ou en simple liste. Utilisez Palette aléatoire et les boutons de verrouillage pour explorer.
Comment les harmonies sont construites
Ce générateur de palette de couleurs s'appuie sur les harmonies de couleurs : des ensembles de couleurs dont les teintes sont placées à des angles fixes sur le cercle chromatique. Les couleurs analogues sont voisines, à 30 degrés d'écart. Une couleur complémentaire se trouve à 180 degrés, une paire complémentaire divisée à 150 et 210 degrés, une triade est espacée de 120 degrés, et une tétrade utilise quatre teintes à 90 degrés d'écart. La palette monochrome garde la teinte et fait varier la luminosité, des teintes pâles aux nuances sombres.
Le cercle utilisé ici est OKLCH, la forme cylindrique de l'espace OKLab de Björn Ottosson. La conversion passe du sRGB à la lumière linéaire, puis par les matrices OKLab, et revient en sens inverse avec une vérification de gamme. Si une couleur obtenue par rotation sort de ce que le sRGB peut afficher, sa chroma est réduite par petits pas jusqu'à ce qu'elle rentre, de sorte que la luminosité et la teinte choisies sont conservées.
Le contraste est indiqué pour chaque nuance, sur blanc et sur noir, car la première question sur une couleur de palette est généralement de savoir quel texte peut être posé dessus. Le rapport et la mention AA ou AAA sont toujours écrits en toutes lettres : l'information ne dépend donc pas de la perception des couleurs.
Astuces
- Besoin de la même couleur en HSL, en CMJN ou sous forme de nom CSS ? Utilisez le Convertisseur de couleurs et contraste.
- Transformez deux couleurs de la palette en arrière-plan avec le Générateur de dégradé CSS.
- Vous voulez une couleur tirée d'une photo plutôt que d'un cercle ? Essayez la Pipette de couleur pour image.
Questions fréquentes
Pourquoi OKLCH plutôt que HSL ?
En HSL, un jaune et un bleu de même luminosité paraissent très différents en clarté. OKLCH est conçu pour que des pas de luminosité égaux paraissent égaux, ce qui garde un poids homogène entre les nuances d'une palette. La teinte est l'angle utilisé pour les harmonies : une couleur complémentaire se trouve donc à 180 degrés de votre base en OKLCH, et non en HSL.
Que se passe-t-il quand une couleur ne peut pas s'afficher à l'écran ?
Faire tourner une teinte en gardant la luminosité et la chroma tombe parfois hors de la gamme sRGB qu'un écran normal peut afficher. L'outil réduit alors la chroma, en gardant la luminosité et la teinte, jusqu'à ce que la couleur rentre. C'est pourquoi une nuance obtenue par rotation peut paraître un peu moins vive que la base.
Que signifient les étiquettes AA et AAA ?
Elles indiquent le rapport de contraste WCAG 2 d'un texte blanc ou noir sur cette nuance. Un rapport de 4,5 ou plus correspond à AA pour un texte normal, 7 ou plus à AAA, et de 3 à 4,5 ne valide AA que pour un grand texte. Une nuance qui échoue avec le noir comme avec le blanc est un mauvais fond pour du texte.
Comment fonctionne la palette aléatoire ?
Cinq couleurs sont tirées avec le générateur de nombres aléatoires sécurisé du navigateur : des teintes réparties sur le cercle, avec une luminosité et une chroma aléatoires dans une plage qui évite le quasi-noir et le quasi-blanc. Verrouillez une nuance pour la garder, puis appuyez sur Palette aléatoire ou sur la barre d'espace pour remplacer les autres.
Quel format d'export choisir ?
Les propriétés personnalisées CSS se collent directement dans le bloc :root d'une feuille de style. Le tableau JSON convient aux design tokens ou aux scripts, et la simple liste donne un HEX par ligne pour les outils qui acceptent des couleurs collées. Les trois utilisent les valeurs HEX affichées.
Le HEX abrégé et les majuscules sont-ils acceptés ?
Oui. #abc, abc, #AABBCC et aabbcc sont tous lus. Les valeurs avec une paire alpha, à huit chiffres par exemple, ne sont pas acceptées ici ; utilisez d'abord le Convertisseur de couleurs et contraste pour retirer l'alpha.