7 règles d’harmoniecontraste WCAG12 formats d’exportdans votre navigateur
Voyez la couleur avant de vous engager.
Des palettes, des convertisseurs et un vérificateur de contraste qui montrent leur calcul. Ci-dessous, une seule couleur traverse tout : ses harmonies, la lisibilité du texte dessus, son rendu en cas de daltonisme et le CSS exporté.
#3563E9Le contrôle de contraste du studio choisit la couleur du texte ; la bande est l’échelle de teintes en neuf pas.
- HEX
- #3563E9
- RGB
- 53 99 233
- HSL
- 225 80% 56%
- OKLCH
- 55.0% 0.209 265
- CMYK
- 77 58 0 9
Sept règles pour une palette
Chacune appliquée à la couleur ci-dessus.
- #3563E9#E9BB35
Complémentaire
La teinte opposée sur le cercle : contraste maximal, idéale pour un accent.
- #3563E9#E96135#BDE935
Complémentaire divisée
Les deux teintes de part et d’autre de l’opposée : du contraste, moins de tension.
- #67E03E#3E67E0#E03E67
Analogue
Des voisines sur le cercle : des schémas calmes et cohérents.
- #3563E9#E93563#63E935
Triadique
Trois teintes régulièrement espacées : vivante mais équilibrée.
- #3563E9#BB35E9#E9BB35#63E935
Tétradique
Deux paires complémentaires : riche, et la plus difficile à équilibrer.
- #3563E9#E935BD#E9BB35#35E961
Carré
Quatre teintes régulièrement espacées : audacieux, mieux avec une dominante nette.
- #0B1228#162F76#1746CF#5E7FE1#AFBEE9
Monochromatique
Une teinte à plusieurs luminosités : sûre et discrète.
Avant la mise en ligne
Deux choses qu’un échantillon ne montre pas.
Le texte est-il lisible ?
Quatre couleurs de texte sur la couleur ci-dessus, notées avec la formule WCAG 2.1.
- Aa#FFFFFF5.11:1AA
- Aa#0B0E143.78:1AA grand texte
- Aa#A6B9EE2.62:1Échec
- Aa#436CE61.10:1Échec
Quel rendu pour tout le monde ?
Une palette de quatre couleurs telle que la voit la plupart des gens, puis avec quatre types de daltonisme.
- Vision typique
- Protanopie
- Deutéranopie
- Tritanopie
- Achromatopsie
Ce que vous emportez
La vraie sortie du studio pour cette couleur.
:root {
--brand-100: #d5ddf6;
--brand-300: #7693e9;
--brand-500: #184ada;
--brand-700: #132b73;
--brand-900: #050915;
}// Tailwind CSS v4 config
colors: {
'brand': {
'100': '#d5ddf6',
'300': '#7693e9',
'500': '#184ada',
'700': '#132b73',
'900': '#050915',
},
},- HEX List
- RGB List
- HSL List
- CSS Variables
- JSON
- SVG Palette
- Adobe ASE
- GIMP Palette
- CSV
- Tailwind Config
- SCSS Variables
- Style Dictionary
Les outils
9 pages, chacune pour une tâche.
Générateur de palettes
Créez des palettes de couleurs. Générateur gratuit.
Convertisseur de couleurs
Convertissez les couleurs. Gratuit.
Vérificateur de contraste
Vérifiez les contrastes. Gratuit.
Constructeur de thème
Créez des systèmes de design.
Générateur de dégradés
Créez des dégradés CSS. Gratuit.
Design tokens
Exportez les couleurs en tokens.
Couleurs de marques
Palettes de couleurs de marques.
Noms de couleurs
Parcourez les couleurs nommées.
Générateur de couleurs aléatoires
Générez des couleurs aléatoires. Générateur gratuit.
Questions fréquentes
Comment fonctionne le Constructeur de thèmes ?
Entrez une couleur primaire et nous générons un système de design complet : échelles de 11 niveaux (50-950) pour primary, secondary, accent et neutral, plus des couleurs sémantiques, des thèmes clair et sombre, et des jetons pour développeurs. Choisissez parmi 30+ styles, 20+ types de projets et 15+ personnalités de marque.
Puis-je exporter des jetons de design ?
Oui. Exportez le système de design complet en propriétés personnalisées CSS, configuration Tailwind CSS v4, variables SCSS, LESS ou JSON Style Dictionary — prêt à copier-coller dans votre projet.
Mes données sont-elles stockées ?
Non. Tout se passe dans votre navigateur. Les favoris sont stockés dans localStorage et ne quittent jamais votre appareil.
Comment fonctionne la vérification d'accessibilité ?
Le Constructeur de thèmes vérifie automatiquement chaque paire texte-fond pour la conformité WCAG 2.1 AA et ajuste les couleurs si nécessaire. L'onglet de vérification du contraste fournit une analyse AA/AAA détaillée.
Choisissez une couleur
Partez d’une couleur et emportez la palette, le rapport de contraste et les tokens.
Ouvrir le studio