Codes couleur pour CSS, Tailwind et Figma — guide pratique
Les équipes de design et développement modernes travaillent simultanément dans Figma pour le design, Tailwind CSS pour le style et le CSS natif pour les détails. Chaque outil a ses préférences en matière de format de couleur, et maintenir la synchronisation entre eux est source de frictions. Ce guide pratique vous montre comment utiliser le Sélecteur de Couleur de WikiPlus pour convertir et synchroniser vos couleurs entre CSS, Tailwind et Figma sans erreurs de transcription.
Couleurs dans CSS moderne
CSS4 supporte une gamme de formats de couleurs beaucoup plus large que les versions précédentes. En plus des formats HEX, RGB et HSL classiques, les navigateurs modernes supportent oklch(), oklab(), display-p3 et color-mix(). Pour les variables CSS personnalisées (custom properties), définissez vos couleurs dans l'espace le plus flexible possible : `--marque-primaire: oklch(0.45 0.22 264)`. Référencez ensuite cette variable partout : `color: var(--marque-primaire)`. Pour les dégradés, `color-mix()` en CSS4 permet de créer des mélanges directs : `color-mix(in oklch, var(--marque-primaire) 60%, white)`. Cette approche centralisée garantit que changer une valeur dans `:root` se propage automatiquement à toute l'interface.
Intégration avec Tailwind CSS
Tailwind CSS utilise par défaut des codes HEX pour ses couleurs dans `tailwind.config.js`. Pour étendre la palette avec vos couleurs de marque, ajoutez-les dans la section `theme.extend.colors` avec des niveaux tonaux de 50 à 950. Le sélecteur de couleur WikiPlus peut vous aider à créer ces niveaux tonaux : choisissez votre couleur de base, puis créez des variantes en ajustant la luminosité HSL par incréments. Convertissez chaque variante en HEX et ajoutez-la à votre config Tailwind. Pour les projets Tailwind v4 (alpha), les couleurs sont définies directement en CSS via des variables personnalisées, ce qui simplifie l'intégration avec le sélecteur WikiPlus — copiez directement les valeurs oklch ou HSL sans conversion intermédiaire.
Synchroniser les couleurs avec Figma
Figma stocke les couleurs en valeurs RGBA internes mais affiche et accepte les codes HEX, RGB et HSL dans son interface. Pour copier une couleur depuis Figma vers votre CSS : sélectionnez l'élément dans Figma, ouvrez le panneau Fill, copiez la valeur HEX affichée, collez-la dans le sélecteur WikiPlus pour obtenir les équivalents HSL ou oklch pour vos variables CSS. Dans l'autre sens, copiez les valeurs HEX de votre palette CSS et collez-les directement dans les champs de couleur Figma. Pour maintenir la synchronisation à grande échelle, utilisez des Design Tokens (fichiers JSON) exportés depuis Figma via des plugins comme Tokens Studio, puis importez ces tokens dans votre configuration Tailwind ou vos variables CSS via des scripts de build.
Éviter les pièges courants de conversion de couleurs
Plusieurs pièges courants causent des divergences de couleurs entre outils. Le profil colorimétrique incorrect : Figma travaille en sRGB par défaut mais peut afficher des couleurs en P3 sur les Mac avec des écrans Retina. Si vous copiez une couleur depuis Figma et qu'elle semble différente dans le navigateur, vérifiez le profil dans les paramètres Figma. La précision de conversion : convertir HEX → RGB → HSL → oklch accumule des erreurs d'arrondi. Pour les couleurs de marque critiques, définissez les valeurs directement dans le format de destination plutôt que de les convertir en chaîne. Les arrondis dans Tailwind : la palette Tailwind utilise des valeurs HEX précises. Si vous générez des valeurs HSL et les convertissez en HEX, des arrondis mineurs peuvent créer de légères variations visuelles. Utilisez des outils précis comme WikiPlus pour vos conversions.
Questions fréquemment posées
- Comment copier une couleur depuis Figma vers mon code CSS ?
- Dans Figma, sélectionnez l'élément, cliquez sur la couleur dans le panneau de remplissage, et copiez la valeur HEX. Collez-la dans le sélecteur de couleur WikiPlus pour obtenir les équivalents HSL, oklch ou RGB pour vos variables CSS. WikiPlus affiche tous les formats simultanément.
- Tailwind CSS v4 change-t-il la façon de définir les couleurs ?
- Oui. Tailwind v4 utilise des variables CSS personnalisées directement dans vos fichiers CSS plutôt que `tailwind.config.js`. Vous pouvez définir vos couleurs en oklch ou HSL directement, ce qui simplifie l'intégration et évite les conversions intermédiaires vers HEX.
- Pourquoi ma couleur semble différente dans Figma et dans le navigateur ?
- Figma peut travailler en espace colorimétrique P3 sur les écrans Retina Apple, alors que les navigateurs utilisent sRGB par défaut. Une couleur P3 qui semble vibrante dans Figma peut apparaître légèrement moins saturée dans un navigateur standard. Vérifiez le profil colorimétrique dans les paramètres Figma.