Une interface réussie repose sur des choix répétés : quelques couleurs en harmonie, des arrondis et des ombres cohérents, une échelle de tailles de texte régulière, des proportions maîtrisées. Les huit outils de cette catégorie produisent le code CSS correspondant, vérifient les contrastes d'accessibilité et s'exécutent dans votre navigateur.
Les outils
- Couleurs : le générateur de palettes (harmonies, échelle de tons, extraction depuis une image), le convertisseur de couleurs (HEX, RGB, HSL, OKLCH, contraste WCAG) et le générateur de dégradés.
- Formes et profondeur : le générateur de border-radius et le générateur d'ombres CSS.
- Proportions et texte : le calculateur de ratio d'aspect, le générateur d'échelle typographique fluide et le convertisseur px, rem et clamp().
Le guide Choisir une palette accessible décrit la méthode complète, des harmonies aux contrastes WCAG.
Un système plutôt que des réglages isolés
- Peu de valeurs, réutilisées. Trois ou quatre rayons, trois niveaux d'ombre, une échelle de texte de six à huit tailles : la cohérence se voit plus que le détail de chaque choix.
- Des variables CSS. Exportez les valeurs sous forme de variables (
--accent,--radius-md,--text-lg) pour les modifier à un seul endroit, et pour décliner un thème sombre. - L'accessibilité d'abord. Un texte courant exige un contraste de 4,5 : 1 (WCAG 2.2, niveau AA) ; une taille de texte en
remrespecte les réglages de l'utilisateur ; une animation décorative doit se désactiver avecprefers-reduced-motion. - Un espace perceptuel pour les couleurs. Travailler en OKLCH donne des échelles de tons régulières, ce que le HSL ne garantit pas.
Questions fréquentes
Le code CSS généré fonctionne-t-il dans tous les navigateurs ?
Les propriétés utilisées (variables, clamp(), aspect-ratio, dégradés, ombres) sont prises en charge par les navigateurs récents. Les formats plus récents comme OKLCH ont un secours en couleur classique lorsque c'est utile.
Puis-je utiliser les palettes et le code librement ?
Oui : le code et les palettes générés sont libres d'utilisation, y compris pour un projet commercial.
Comment vérifier le contraste de mes couleurs ?
Avec le convertisseur de couleurs, qui calcule le rapport de contraste WCAG entre deux couleurs et indique s'il atteint les niveaux AA et AAA.