Sites web et applications
Choisissez les couleurs de la marque, d'arrière-plan et d'accent, puis insérez-les directement dans des variables CSS, Tailwind ou un thème Android.
Générateur de palettes de couleurs — Créez des palettes de couleurs harmonisées et exportez-les sous forme de code.
Choisissez une couleur de base et un thème, puis obtenez une palette équilibrée de 3 à 8 couleurs. Sélectionnez celles qui vous plaisent, vérifiez la lisibilité du texte blanc et noir sur chacune d'elles, puis copiez les codes sous forme de variables CSS, Tailwind, fichier colors.xml Android ou Jetpack Compose. Tout s'exécute dans votre navigateur, et les palettes enregistrées sont conservées sur votre appareil.
Créer une palette
Fonctionne dans votre navigateur
Votre palette
Sélectionnez les couleurs qui vous plaisent, puis cliquez sur « Générer » pour modifier les autres. Cliquez sur un code hexadécimal pour le copier. Cliquez sur la palette et appuyez sur la barre d'espace pour générer.
Exporter sous forme de code
Palettes enregistrées
Aucune palette n'a encore été enregistrée. Cliquez sur « Enregistrer la palette » pour en enregistrer une sur cet appareil.
Le guide
Guide des palettes de couleurs : combinaisons, contraste et exportation vers du code
Découvrez comment fonctionnent les combinaisons de couleurs, vérifiez le contraste du texte et appliquez votre palette à un projet concret.
Qu'est-ce qu'un générateur de palettes de couleurs ?
Une palette de couleurs est un petit ensemble de couleurs qui s'harmonisent bien entre elles. Les designers les créent à partir du cercle chromatique : ils choisissent une couleur de départ, puis sélectionnent d'autres teintes situées à des angles fixes par rapport à celle-ci, afin que le résultat soit équilibré et non aléatoire.
Ce générateur s'en charge pour vous. Choisissez une couleur de base et une palette, sélectionnez les couleurs qui vous plaisent, puis exportez le résultat au format CSS, Tailwind, XML Android ou Jetpack Compose. Chaque échantillon affiche également ses valeurs RVB et HSL, ainsi que le niveau de lisibilité du texte blanc et noir sur celui-ci. Les valeurs hexadécimales sont en base 16 : le convertisseur binaire-décimal indique leur correspondance avec les nombres décimaux courants.
Pourquoi les gens créent-ils des palettes de couleurs ?
Transparents, affiches et documents
Trouvez une palette de couleurs harmonisées pour une présentation, une publication sur les réseaux sociaux ou une création graphique destinée à l'impression, sans avoir à deviner.
Graphiques et tableaux de bord
Choisissez des couleurs distinctes mais harmonieuses pour les séries de données, et vérifiez le contraste afin que les libellés restent lisibles.
Explications sur les combinaisons de couleurs
| Schéma | Comment est-il construit ? | Découvre et utilise |
|---|---|---|
| Analogue | Teintes voisines, séparées de 30° | Apaisant et naturel. Idéal pour les arrière-plans et les interfaces utilisateur épurées. |
| Monochromatique | Une même teinte, différentes luminosités | Épuré et harmonieux. Idéal pour les designs minimalistes. |
| Complémentaire | Deux teintes opposées, à 180° l'une de l'autre | Contraste élevé. Idéal pour une couleur d'accent marquée. |
| Complémentaire divisé | Une teinte plus les deux teintes situées de part et d'autre de son opposé | Contraste moins marqué que celui des couleurs complémentaires. |
| Triadique | Trois teintes, espacées de 120° | Vif et équilibré. Il faut une couleur dominante. |
| Tétradique (carré) | Quatre teintes, espacées de 90° | Riche et varié. Donne le meilleur résultat avec une seule couleur dominante. |
Comment utiliser le générateur de palettes de couleurs
- Choisissez une couleur de base à l'aide de la palette de couleurs ou saisissez un code hexadécimal. Choisissez une palette et le nombre de couleurs souhaité.
- Cliquez sur « Générer » pour essayer une nouvelle base aléatoire. Cliquez sur « Verrouiller » sous la couleur que vous souhaitez conserver.
- Vérifiez les indications de contraste figurant sur chaque échantillon. Visez un rapport de 4,5:1 ou supérieur partout où du texte apparaît sur une couleur.
- Cliquez sur un code hexadécimal pour le copier, ou ouvrez « Exporter sous forme de code » et choisissez CSS, Tailwind, Android ou Compose.
- Cliquez sur « Enregistrer la palette » pour la conserver sur cet appareil, sur « Copier le lien » pour la partager, ou sur « Télécharger le fichier PNG » pour obtenir une image.
Contraste des couleurs et accessibilité
Rapport de contraste
Un rapport compris entre 1:1 (identique) et 21:1 (noir sur blanc) qui permet de comparer la luminosité de deux couleurs.
WCAG niveau AA
Au moins 4,5:1 pour un texte normal et 3:1 pour un texte en gros caractères (environ 24 px, ou 19 px en gras). Il s'agit là de l'objectif habituel, tant sur le plan juridique que pratique.
WCAG AAA
Au moins 7:1 pour le texte standard. Un niveau plus strict, utile pour les personnes malvoyantes.
Ne vous fiez pas uniquement à la couleur
Environ un homme sur douze souffre d'un trouble de la vision des couleurs. Associez les couleurs à des étiquettes, des icônes ou des motifs afin que le sens ne soit pas perdu.
À quoi ressemblent les formats d'exportation ?
CSS : --color-1: #1f3a5f;
SCSS : $color-1: #1f3a5f;
Tailwind : 'palette-1': '#1f3a5f',
Android : #1F3A5F
Compose : val Palette1 = Color(0xFF1F3A5F)
JSON : ["#1f3a5f", "#ff5733"]
Dans Android Studio, collez le code XML dans res/values/colors.xml, ou ajoutez les lignes Compose à votre Color.kt fichier. La valeur Compose inclut le préfixe alpha FF correspondant à une opacité totale.
Conseils pour choisir des palettes qui fonctionnent bien
- Utilisez une couleur dominante, une ou deux couleurs d'accompagnement et une couleur neutre. Utiliser chaque couleur en quantités égales donne généralement un résultat trop chargé.
- Vérifiez le contraste du texte sur chaque couleur d'arrière-plan avant de choisir définitivement une palette.
- Définissez la couleur de votre marque et inspirez-vous de celle-ci pour explorer différentes possibilités.
- Regardez la palette sur un véritable écran, aux dimensions réelles où elle s'affichera, et pas seulement sous forme d'échantillons.
- Testez également en mode sombre : une couleur qui fonctionne sur fond blanc ne fonctionnera pas forcément sur un fond presque noir.
Restrictions et confidentialité
Confidentialité
Les palettes sont générées dans votre navigateur. Les palettes enregistrées sont conservées dans la mémoire locale de votre navigateur sur votre appareil et ne sont jamais transférées sur un serveur.
Limites
Les couleurs sont affichées dans l'espace colorimétrique sRGB, et leur rendu peut varier selon les écrans. Les palettes proposées sont des suggestions fondées sur la théorie des couleurs ; elles ne remplacent en aucun cas les tests effectués auprès d'utilisateurs réels. L'outil ne vérifie pas l'accessibilité pour les personnes daltoniennes au-delà du contraste.
Questions fréquentes
FAQ sur le générateur de palettes de couleurs
Comment fonctionne le générateur de palettes de couleurs ?
Choisissez une couleur de base et une palette de couleurs : l'outil transformera alors cette couleur de base en un ensemble de couleurs assorties à l'aide du cercle chromatique. Cliquez sur « Générer » pour obtenir une nouvelle couleur de base aléatoire, ou verrouillez les couleurs qui vous plaisent et générez les autres.
Quelle est la différence entre les palettes de couleurs ?
La technique analogique utilise des teintes voisines pour créer un effet apaisant. La technique complémentaire associe des teintes opposées pour créer un contraste. Les techniques « complémentaire divisée » et « triadique » utilisent trois teintes réparties de manière uniforme, la technique « tétradique » en utilise quatre, tandis que la technique « monochromatique » conserve une seule teinte et varie sa luminosité.
Comment faire pour conserver une couleur tout en modifiant les autres ?
Cliquez sur « Verrouiller » sous n'importe quelle nuance. Les couleurs verrouillées restent inchangées lorsque vous cliquez sur « Générer », que vous modifiez la base ou que vous changez de palette. La modification d'une nuance à l'aide du bouton « Modifier » la verrouille également.
Que signifient ces chiffres de contraste ?
Chaque échantillon indique le rapport de contraste pour du texte blanc et pour du texte noir sur cette couleur. Les WCAG exigent un rapport d'au moins 4,5:1 pour le texte normal (niveau AA), de 7:1 pour le niveau AAA, plus strict, et de 3:1 pour le texte en gros caractères.
Quels sont les formats d'exportation disponibles ?
Une liste HEX, des variables CSS, des variables SCSS, un tableau JSON, une configuration Tailwind, un fichier colors.xml Android et des valeurs de couleur Jetpack Compose, pour que vous puissiez coller directement la palette dans un projet.
Puis-je partager ou enregistrer ma palette ?
Oui. L'option « Copier le lien » génère une adresse Web qui permet de rouvrir les mêmes couleurs, l'option « Télécharger le PNG » enregistre une image de la palette, et l'option « Enregistrer la palette » permet de conserver jusqu'à 12 palettes dans ce navigateur.
Pourquoi mes couleurs s'affichent-elles différemment sur un autre écran ?
Les écrans varient en termes de luminosité, de précision des couleurs et de profil de couleur. Les codes hexadécimaux décrivent la couleur de manière numérique, mais son rendu dépend de l'écran. Vérifiez les couleurs importantes sur les appareils que votre public utilisera.
Combien de couleurs une palette devrait-elle comporter ?
De nombreuses compositions fonctionnent bien avec cinq éléments : une couleur principale, une ou deux couleurs d'accompagnement, une teinte claire pour l'arrière-plan et une teinte foncée pour le texte. Cet outil vous permet d'en choisir entre 3 et 8.
Le générateur est-il gratuit et mes données sont-elles enregistrées ?
C'est gratuit. Les palettes sont générées dans votre navigateur. Les palettes enregistrées sont conservées sur votre appareil dans la mémoire locale et ne sont jamais transférées sur un serveur.
Puis-je créer un lien vers une palette ?
Oui. Ajoutez « ?colors=1f3a5f-ff5733-00aa88 » à l'adresse de la page, en y incluant entre 2 et 8 codes hexadécimaux séparés par des tirets, sans le signe #.
D'après les utilisateurs de cet outil
Avis
Chargement des avis…
Continue comme ça
Encore plus d'outils à disposition
La page d'accueil propose des dizaines d'autres outils gratuits qui ne nécessitent pas de clé API.
Convertisseur de casse
Convertissez du texte en majuscules, en camelCase, en title case, en snake_case et bien plus encore.
Ouvrir l'outilCompteur de mots
Comptez le nombre de mots, de caractères, de phrases et la durée de lecture au fur et à mesure que vous tapez.
Ouvrir l'outilSuppresseur d'espaces blancs
Supprimez les espaces superflus et corrigez les interlignes irréguliers.
Ouvrir l'outilComparateur de textes
Comparez deux textes ligne par ligne pour voir ce qui a changé.
Ouvrir l'outil