Générateur de palette de couleurs
Générez des palettes harmonieuses. Verrouillez des couleurs, exportez en CSS, SCSS, JSON.
Soutenez le projet
J’ai choisi de limiter les publicités pour garder l’expérience simple et agréable. Si cet outil vous a été utile, vous pouvez m’aider à le faire vivre — chaque geste compte pour un développeur solo.
Générateur de palette de couleurs
Ce contenu accompagne l’outil Générateur de palette de couleurs. Il est rédigé en français pour le référencement et l’accessibilité.
Description
Le générateur de palette de couleurs permet de créer des palettes harmonieuses en quelques clics. Inspiré des outils professionnels comme Coolors, il propose plusieurs modes de génération (aléatoire, analogique, complémentaire, triade, tétrade, monochrome, ombres, teintes, tons), le verrouillage de couleurs à conserver, et des exports prêts à l’emploi (variables CSS, SCSS, JSON). Les palettes peuvent être partagées via un lien et sont générées dans l’espace OKLCH pour des résultats plus naturels visuellement.
Comment faire
- Choisissez le mode de génération (aléatoire, analogique, complémentaire, etc.) dans le menu déroulant.
- Ajustez le nombre de couleurs (de 3 à 8) avec les boutons + / −.
- Cliquez sur Générer la palette ou appuyez sur Espace pour générer de nouvelles couleurs (seules les couleurs non verrouillées sont modifiées).
- Verrouillez les couleurs que vous souhaitez garder en cliquant sur l’icône cadenas.
- Modifiez une couleur manuellement avec le bouton Ajuster (saisie HEX ou pipette).
- Utilisez l’onglet Partager pour copier le lien de la palette, et le bloc Exports pour copier ou télécharger les variables CSS, SCSS ou le tableau JSON.
Exemples
- Palette aléatoire : mode « Aléatoire », 5 couleurs — idéal pour découvrir des associations inattendues.
- Palette analogique : mode « Analogique », couleur de base bleue — des teintes proches sur le cercle chromatique (bleu, bleu-vert, violet).
- Palette complémentaire : mode « Complémentaire » — deux couleurs opposées (ex. orange et bleu) pour un contraste fort.
- Palette monochrome : mode « Monochrome » — une seule teinte avec des variations de clarté, parfait pour des interfaces épurées.
Cas d’usage
- Sites web et applications : définir une charte graphique (primaire, secondaire, accent) et exporter les variables CSS.
- Maquettes et prototypes : obtenir rapidement des palettes cohérentes pour wireframes ou présentations.
- Branding : explorer des harmonies à partir d’une couleur de marque (option couleur de base).
- Accessibilité : les avertissements (contraste faible, couleurs trop proches) aident à choisir des combinaisons lisibles.
Limites et bonnes pratiques
- Les couleurs sont générées en sRGB (affichage écran). Pour l’impression (CMYK), une conversion dédiée est nécessaire.
- En mode OKLCH, certaines combinaisons L/C/H peuvent sortir du gamut sRGB ; elles sont alors ramenées dans l’espace affichable (avec avertissement si besoin).
- Pour un bon contraste texte/fond, privilégiez des paires avec un rapport de contraste d’au moins 4,5:1 (texte normal) ou 3:1 (texte large).
Sécurité et confidentialité
Le traitement des couleurs est entièrement effectué dans votre navigateur. Aucune palette n’est envoyée à un serveur. Les liens de partage ne contiennent que les codes hexadécimaux dans l’URL ; aucun compte ni stockage externe n’est utilisé.
Alternatives
- Coolors : outil en ligne très complet, avec export et plugins.
- Adobe Color : roue chromatique et extraction depuis une image.
- Paletton : focus sur les harmonies classiques (monochrome, complémentaire, etc.).
FAQ
Qu’est-ce que le mode OKLCH ?
OKLCH est un espace de couleurs perceptuellement uniforme (L = clarté, C = chroma, H = teinte). Il produit des palettes plus équilibrées que le HSL classique, avec des transitions plus naturelles entre les couleurs.
Pourquoi « Générer » ne change pas certaines couleurs ?
Les couleurs dont l’icône est en mode « verrouillé » (cadenas fermé) ne sont pas modifiées lors de la génération. Déverrouillez celles que vous voulez faire évoluer.
Comment partager ma palette ?
Cliquez sur Partager : l’URL de la page avec les codes couleurs est copiée dans le presse-papier. Envoyez ce lien pour que d’autres voient la même palette (ils pourront à leur tour générer à partir de celle-ci).
Puis-je utiliser les variables CSS en production ?
Oui. Le bloc d’export fournit des variables au format :root { --color-1: #...; }. Vous pouvez les copier dans votre feuille CSS globale ou dans un thème (CSS personnalisé, Tailwind, etc.).
Que signifient les avertissements (contraste, couleurs proches) ?
Ils indiquent des paires de couleurs dont le contraste est faible (texte difficile à lire) ou des teintes très similaires. Vous pouvez garder la palette pour un usage décoratif et ajuster manuellement les couleurs concernées pour l’accessibilité.
Combien de couleurs puis-je avoir dans une palette ?
Entre 3 et 8 couleurs. Le nombre est réglable via les boutons + / − en haut de l’outil.
Une suggestion ou une demande d'outil ?
Vous avez repéré une erreur, vous souhaitez un nouvel outil ou vous avez un retour à partager ? Contactez-moi par email, je serais ravi d'échanger avec vous.