Générateur de palette de couleurs — palettes harmonieuses, de zéro ou depuis une photo
Appuyez sur la barre d’espace pour une nouvelle palette, verrouillez les couleurs qui vous plaisent, choisissez une harmonie ou tirez la palette d’une photo. Export en CSS, Tailwind, SCSS, JSON ou PNG.
Cliquez sur une pastille pour la sélectionner, sur le cadenas pour la conserver lors de la génération, sur le crayon pour choisir une nouvelle couleur, sur le code pour le copier.
| HEX | RGB | HSL | |
|---|---|---|---|
| #264653 | rgb(38, 70, 83) | hsl(197, 37%, 24%) | |
| #2a9d8f | rgb(42, 157, 143) | hsl(173, 58%, 39%) | |
| #e9c46a | rgb(233, 196, 106) | hsl(43, 74%, 66%) | |
| #f4a261 | rgb(244, 162, 97) | hsl(27, 87%, 67%) | |
| #e76f51 | rgb(231, 111, 81) | hsl(12, 76%, 61%) |
:root {
--color-1: #264653;
--color-2: #2a9d8f;
--color-3: #e9c46a;
--color-4: #f4a261;
--color-5: #e76f51;
}
Palette à partir d’une image
Importez une photo pour placer ses couleurs dominantes dans les pastilles non verrouillées, puis cliquez n’importe où sur l’image pour prélever un pixel exact dans la pastille sélectionnée (couleur 1). L’image reste sur votre appareil.
Les palettes sont générées dans votre navigateur, et les images importées ne quittent jamais votre appareil. Parcourir tous les outils gratuits.
Un problème, ou quelque chose à améliorer ? Nous lisons chaque message et corrigeons vite.
Ce générateur de palette de couleurs gratuit compose un ensemble de 2 à 10 couleurs qui vont bien ensemble. Appuyez sur la barre d’espace (ou sur Générer) pour une nouvelle palette, verrouillez les nuances à conserver et relancez jusqu’à ce que le reste convienne. Choisissez une harmonie comme analogue, complémentaire ou triadique, ou envoyez une photo et faites passer ses couleurs dominantes directement dans la palette. Chaque nuance affiche ses valeurs HEX, RGB et HSL ainsi que la couleur de texte, noire ou blanche, qui reste lisible dessus.
La plupart des générateurs font tourner la teinte en HSL, ce qui produit des palettes où le jaune éblouit et le bleu s’enfonce, car la luminosité HSL n’a rien à voir avec la clarté perçue d’une couleur. Celui-ci calcule les harmonies en OKLCH, un espace colorimétrique perceptuel où une même luminosité paraît aussi claire, puis répartit la luminosité pour que chaque palette contienne des tons foncés, moyens et clairs vraiment utilisables pour le texte, les fonds et les accents. Il ne peut pas vous dire si une palette convient à votre marque : c’est à vous d’en juger, et le vérificateur de contraste indiqué ci-dessous vous dit quelles paires sont lisibles.
Mode d’emploi
- Appuyez sur la barre d’espace ou sur le bouton Générer pour créer une palette. Utilisez − et + pour choisir entre 2 et 10 couleurs.
- Choisissez une harmonie dans le menu. Aléatoire donne des ensembles variés mais équilibrés ; les autres suivent les règles classiques du cercle chromatique.
- Cliquez sur le cadenas d’une nuance qui vous plaît, puis continuez à générer : les couleurs verrouillées restent, et l’harmonie est reconstruite autour de la première couleur verrouillée.
- Cliquez sur le crayon pour choisir une couleur à la main, ou saisissez une valeur HEX dans l’éditeur sous la bande. Pour partir d’une photo, envoyez-la dans Palette à partir d’une image et cliquez sur l’image pour prélever des pixels précis.
- Exportez la palette en variables CSS, en configuration Tailwind, en SCSS ou en JSON, téléchargez un PNG ou copiez le lien de partage.
Questions fréquentes
Comment générer une palette de couleurs ?
Appuyez sur la barre d’espace sur cette page. Chaque appui crée une nouvelle palette selon l’harmonie choisie. Quand une couleur vous convient, verrouillez-la avec le cadenas et continuez : seules les nuances non verrouillées changent, et les nouvelles couleurs sont choisies pour s’harmoniser avec la couleur verrouillée. Cinq couleurs sont un bon point de départ pour un site web : une foncée pour le texte, une claire pour les fonds, une principale, une secondaire et une d’accent.
Que sont les couleurs complémentaires, analogues et triadiques ?
Ce sont des positions sur le cercle chromatique. Les couleurs complémentaires sont opposées (à 180 degrés l’une de l’autre), ce qui donne le contraste le plus fort. Les couleurs analogues sont voisines, à environ 30 degrés, et donnent une impression calme et cohérente. Les couleurs triadiques sont trois teintes espacées de 120 degrés ; la complémentaire adjacente utilise une teinte de base plus les deux teintes de part et d’autre de sa complémentaire (150 et 210 degrés) ; la tétradique, ou carrée, utilise quatre teintes espacées de 90 degrés. Le monochrome garde une seule teinte et fait varier la luminosité et la saturation.
Peut-on obtenir une palette de couleurs à partir d’une image ?
Oui. Envoyez une photo dans Palette à partir d’une image. L’outil la réduit à 200 pixels au plus, ce qui lisse le bruit, et regroupe les pixels par partitionnement k-means dans l’espace colorimétrique OKLab : le résultat reflète les couleurs que vous voyez plutôt que le simple décompte des pixels. Les plus grands groupes remplissent vos nuances non verrouillées, et la part de l’image couverte par chaque couleur est indiquée. Cliquez n’importe où sur l’image pour prélever un pixel exact dans la nuance sélectionnée. L’image ne quitte jamais votre navigateur.
Comment utiliser une palette en CSS ou avec Tailwind ?
Choisissez l’export en variables CSS et collez le bloc :root dans votre feuille de style, puis utilisez les couleurs avec var(--color-1), etc. L’export Tailwind est un bloc theme.extend.colors qui ajoute palette-1 à palette-N : vous pouvez écrire bg-palette-1 ou text-palette-3. Renommez les variables selon leur rôle (primary, surface, text) une fois décidé à quoi sert chaque couleur ; des noms comme color-3 ne survivent pas à une refonte.
Pourquoi ce générateur utilise-t-il OKLCH plutôt que HSL ?
Parce que la luminosité HSL n’est pas la luminosité perçue. En HSL, le jaune pur et le bleu pur ont tous deux une luminosité de 50 %, pourtant le jaune paraît à peu près aussi clair qu’un gris clair et le bleu presque noir. Faire tourner la teinte en HSL produit donc des ensembles déséquilibrés en clarté. OKLCH, défini dans CSS Color Level 4 et pris en charge par tous les navigateurs actuels, sépare luminosité, chroma et teinte, de sorte que faire tourner la teinte conserve la même clarté apparente. Les couleurs qui sortent de la gamme sRGB y sont ramenées en baissant la chroma, sans toucher à la teinte ni à la luminosité.
Puis-je partager ou enregistrer une palette ?
Copiez le lien de partage : il contient les couleurs dans l’adresse (par exemple ?colors=264653-2a9d8f-e9c46a), donc toute personne qui l’ouvre voit la même palette, et vous pouvez l’ajouter à vos favoris. Rien n’est stocké sur un serveur. Vous pouvez aussi télécharger un PNG des nuances avec leurs valeurs HEX et RGB pour une planche d’ambiance ou un e-mail à un client.
Transformer une palette en système de couleurs d’interface utilisable
Une palette de cinq jolies couleurs n’est pas encore un système de design. Un site a besoin de rôles : une couleur de texte avec un contraste d’au moins 4,5:1 sur le fond, un fond et une surface légèrement différente pour les cartes, une couleur principale pour les boutons et les liens, et un accent utilisé avec parcimonie. La règle 60-30-10 de la décoration intérieure est un point de départ raisonnable : environ 60 % de fond neutre, 30 % de couleur secondaire, 10 % d’accent.
• Texte : la couleur la plus foncée, ou un quasi-noir teinté de votre teinte principale. Du #000 pur sur du #fff pur est plus dur que nécessaire.
• Fond et surface : la ou les deux couleurs les plus claires. Beaucoup de palettes générées en contiennent une ; sinon, verrouillez votre couleur principale et passez en Monochrome pour obtenir ses teintes claires.
• Principale : la couleur qui dit « cliquez-moi ». Vérifiez que du texte blanc ou noir dessus atteint 4,5:1 (la couleur de texte lisible indiquée sur chaque nuance est une première vérification rapide, le vérificateur de contraste la vraie).
• Accent : la couleur la plus saturée, pour les mises en avant et les badges, pas pour les grandes surfaces.
Générez ensuite des teintes plus claires et plus foncées de la couleur principale (plus claires pour les fonds au survol, plus foncées pour les états enfoncés) au lieu d’introduire de nouvelles teintes. Verrouiller la couleur principale et passer en Monochrome avec 7 à 10 couleurs vous donne cette gamme.
Les modes d’harmonie et quand les utiliser
• Analogue : teintes voisines. Calme, naturel, difficile à rater. Idéal pour les sites de contenu, le bien-être et les marques alimentaires. Nécessite un neutre contrastant pour le texte.
• Monochrome : une teinte, de nombreux paliers de luminosité. Le choix le plus sûr pour les tableaux de bord et les applications, où la couleur doit servir les données plutôt que leur faire concurrence.
• Complémentaire : deux teintes opposées. Contraste et énergie maximaux ; utilisez l’une comme couleur principale et l’autre uniquement pour les appels à l’action, sinon on dirait un maillot de sport.
• Complémentaire adjacente : une teinte plus les deux de part et d’autre de son opposée. Presque aussi vive que la complémentaire, avec moins de tension ; un bon choix par défaut pour les sites marketing.
• Triadique et tétradique : trois ou quatre teintes régulièrement espacées. Ludique et vif, adapté aux produits pour enfants, aux jeux et à l’illustration. Laissez une teinte dominer et gardez les autres discrètes.
• Aléatoire (harmonieuse) : la teinte dérive de 20 à 70 degrés d’une nuance à l’autre, avec une luminosité répartie sur l’ensemble. Pratique pour explorer avant de choisir une règle.
Comment fonctionne l’extraction des couleurs d’une image
L’image envoyée est dessinée sur un canvas d’au plus 200 pixels sur son grand côté. La réduction fait la moyenne des pixels voisins, ce qui élimine le bruit JPEG et les textures fines qui produiraient sinon des dizaines de couleurs presque identiques. Les pixels entièrement transparents sont ignorés.
Les pixels restants sont convertis en OKLab et regroupés par partitionnement k-means, où k est le nombre de nuances. Les centres de départ sont choisis selon une règle fixe (le pixel le plus proche de la couleur moyenne de l’image, puis à chaque fois le pixel le plus éloigné de tous les centres déjà choisis) : une même image donne donc toujours la même palette, et les zones petites mais distinctes, comme une veste rouge dans un paysage vert, ne sont pas perdues. La moyenne de chaque groupe devient une nuance, classée selon la part de l’image qu’elle couvre.
L’extraction trouve les couleurs présentes, pas forcément celles avec lesquelles vous concevriez. Les photos sont dominées par des tons moyens éteints : verrouillez la ou les deux couleurs qui capturent l’image et générez le reste, ou cliquez sur l’image pour prélever un point lumineux précis.
Outils gratuits similaires
- Vérificateur de contraste — Vérifiez les couleurs du texte et du fond selon WCAG 2.x AA et AAA, consultez la valeur APCA Lc et obtenez la couleur la plus proche qui passe.
- Sélecteur et convertisseur de couleurs — Prélevez n’importe quelle couleur sur votre écran, ou convertissez instantanément entre HEX, RGB et HSL.
- Générateur de dégradés CSS — Créez des dégradés linéaires, radiaux et coniques avec des arrêts de couleur déplaçables, un cadran d’angle et des préréglages. Copiez le CSS ou une classe Tailwind.
- Générateur de box-shadow — Créez des effets box-shadow et text-shadow en plusieurs couches avec aperçu en direct et préréglages élévation, néomorphisme et lueur, puis copiez le CSS.