Langue:Français
Votre laboratoire de la couleur

Une couleur.Votre prochaine palette.

Créez une palette de couleurs à partir d’un HEX ou d’une image. Vérifiez les contrastes, puis exportez en CSS, Tailwind ou SVG.

Préréglages et couleurs récentes
Depuis une image

Gratuit. Tout dans votre navigateur. Palettes prêtes à utiliser

Palette générée

Cliquez sur une couleur pour copier son HEX. L'échelle de nuances sert aux boutons, états, cartes et surfaces UI.

Les palettes enregistrées restent sur cet appareil.

Aspect de la palette

Seul l’affichage change. Vos couleurs et exports restent identiques.

Personnalisez cette palette

Verrouillez les couleurs à conserver. Modifiez ou réordonnez les autres. Espace régénère si la palette est visible ; les champs et boutons ciblés gardent leur comportement.

Les couleurs et leur ordre sont inclus lorsque vous copiez le lien de partage.

shadcn/uiTailwind v4 · v3

Échelle de nuances

La réduction de chroma conserve luminosité et teinte avant l’arrondi HEX. Original garde les palettes et liens précédents.

Palettes prêtes à utiliser

Choisissez un exemple pour ouvrir toutes ses couleurs dans le générateur. Modifiez, comparez et enregistrez votre version.

Tableaux de bord
Tableau de bord clair7 couleursOuvrir la palette Tableau de bord sombre7 couleursOuvrir la palette Graphiques catégoriels7 couleursOuvrir la palette
Pastels
Pêche et lavande6 couleursOuvrir la palette Jardin doux6 couleursOuvrir la palette Ciel et rose6 couleursOuvrir la palette
Nuances de bleu
Bleu produit5 couleursOuvrir la palette Bleu marine et sable5 couleursOuvrir la palette Bleu nocturne5 couleursOuvrir la palette

Ce sont des points de départ. Vérifiez les paires de texte et de fond avant de les utiliser.

Inspecteur de couleur

Affichez la couleur de base dans des formats pratiques. Copiez HEX, RGB, HSL et OKLCH pour implémentation et documentation.

#E24B4A
Composer la transparence

Collez RGBA, HSLA, OKLCH avec alpha ou HEX avec alpha. Choisissez un fond uni et appliquez la couleur opaque obtenue à l’outil.

HEX opaque obtenu

Aperçu de vision des couleurs

Simulations approximatives de déficiences courantes de vision des couleurs. Ce sont des aperçus design, pas un diagnostic médical.

Vérificateur de contraste WCAG

AA exige 4.5:1 pour le texte normal et 3:1 pour le grand texte. AAA exige 7:1.

Vérification manuelle

Ratio
--
Texte d'interface lisible
Ajuster le contraste

La proposition ajuste la luminosité et réduit la chroma si nécessaire. La paire HEX finale est vérifiée sans arrondir le rapport. Vérifiez l’aspect et la taille du texte.

Meilleures combinaisons

Vérifications automatiques avec blanc, noir et couleurs de palette.

Matrice de contraste des nuances · 13 × 13

Les lignes sont les fonds, les colonnes le texte. Onze nuances, blanc et noir sont inclus. Utilisez les flèches et sélectionnez une paire pour l’examiner.

Sélectionnez une paire pour lire le rapport et l’utiliser dans le contrôle manuel.

AA : 4,5:1 normal / 3:1 grand. AAA : 7:1 normal / 4,5:1 grand. Ces notes concernent cette paire et cette taille.

Exporter les tokens

Copiez variables CSS, configuration Tailwind, SCSS, tokens JSON et cartes SVG/PNG téléchargeables.

Télécharger la carte palette
Exportez une carte 1200x630 partageable en PNG ou SVG pour docs, réseaux et planches de marque.
Générée localement dans le navigateur.
Aperçu de la fiche de la palette actuelle
La même fiche à télécharger en PNG ou SVG · 1200 × 630


Extraire les couleurs d'une image
Déposez un PNG, JPG ou WebP. L'image est traitée localement dans votre navigateur.


Générateur de dégradé
Créez des dégradés CSS depuis la palette actuelle.


Aperçu UI
Un petit mockup d'interface pour vérifier que la palette fonctionne en contexte réel.


Checklist production
Une courte checklist pour utiliser la palette sur un vrai site.
  • Utilisez la nuance marquée D’origine comme couleur de marque. Son niveau dépend de la couleur saisie ; choisissez les états survolé et actif selon le contraste, sans supposer 500/600/700.
  • Utilisez les nuances 50/100 pour les surfaces, pas des couleurs saturées derrière les paragraphes.
  • Vérifiez le texte courant à 4.5:1 minimum avant publication.
  • Testez les états UI importants: hover, désactivé, succès, avertissement et erreur.
  • Gardez un seul accent fort pour conserver la cohérence visuelle.


Outils et guides couleur
Pages dédiées au contraste, palettes Tailwind, variables CSS, extraction d'images et dégradés.
Vérificateur de contraste WCAGVérifiez si le texte et l'arrière-plan respectent les ratios WCAG AA et AAA.Générateur de couleurs TailwindCréez une échelle Tailwind 50-950 depuis une couleur de marque.Générateur de variables couleur CSSGénérez des custom properties CSS et tokens design depuis une palette.Extracteur de couleurs d'imageExtrayez les couleurs dominantes des images localement dans le navigateur.Générateur de dégradés CSSCréez des dégradés CSS linéaires, radiaux et coniques depuis une palette.Palette de couleurs accessibleConcevez des palettes qui gardent le texte lisible et compatibles WCAG.Générateur de palette de marqueCréez une palette de marque depuis un logo ou une couleur primaire et exportez variables CSS et tokens.Générateur palette graphiquesGénérez des couleurs distinctes pour dashboards et dataviz, avec contrôle contraste et daltonisme.Simulateur daltonisme couleurPrévisualisez palettes pour deuteranopie, protanopie et tritanopie afin de repérer les combinaisons risquées.Convertisseur couleur HEX, RGB, HSL et OKLCHConvertissez les couleurs entre HEX, RGB, HSL et OKLCH avec des valeurs prêtes pour CSS et documentation.Générateur harmonie couleurGénérez harmonies complémentaires, analogues, triadiques, split, tétradiques et monochromatiques.Générateur de palettes de couleursGénérez des palettes harmonieuses depuis une couleur de base avec des règles complémentaires, analogues, triadiques et monochromatiques.Générateur de nuances couleurGénérez une échelle 50-950 depuis une couleur de base pour surfaces UI, bordures, hover et dark mode.Générateur palette dark modeCréez des palettes dark mode avec texte lisible, surfaces muted, bordures et accents accessibles.Générateur de design tokensCréez des design tokens couleur depuis une palette et exportez CSS variables, SCSS maps, JSON et Tailwind.Générateur thème shadcnMappez une palette vers des variables CSS type shadcn pour background, foreground, primary, muted, accent et destructive.Générateur de schéma couleur webCréez un schéma couleur web avec couleurs primaires, neutres et accents pour hero, boutons, cartes et formulaires.


Comment créer une palette accessible
Partez d'une couleur de marque, choisissez une harmonie, vérifiez le contraste et exportez les tokens.
Complémentaire ou analogue ?
La palette complémentaire utilise des couleurs opposées sur la roue et donne un contraste fort. L'analogue utilise des teintes voisines, plus douce, adaptée aux interfaces denses.
Pourquoi le contraste compte-t-il ?
Un texte peu contrasté est joli en maquette et illisible sur l'écran de ceux qui s'en servent. Pour le texte courant, visez au minimum WCAG AA, soit 4,5:1.
Compatible avec Tailwind ?
Oui. L'export Tailwind produit l'échelle de la couleur primaire de 50 à 950, plus la couleur d'accent quand elle existe.
Les images sont-elles envoyées ?
Non. L'extraction des couleurs utilise canvas dans votre navigateur. Aucun fichier ne quitte l'appareil.