Les outils couleur de ToolDeck vous permettent de convertir entre formats de couleur, vérifier les ratios de contraste d'accessibilité, générer des palettes, construire des dégradés CSS et rechercher des noms de couleurs ou des classes Tailwind directement dans votre navigateur. Le Convertisseur de couleur gère HEX, RGB, HSL et HSV dans les deux sens. Le Vérificateur de contraste teste la conformité WCAG 2.1 AA et AAA. Le Générateur de palette crée des schémas complémentaires, analogues, triadiques et tétradiques à partir de n'importe quelle couleur de base. Le Générateur de dégradé CSS produit du code de dégradé linéaire et radial prêt à coller. Le Chercheur de noms de couleurs associe toute valeur à la couleur CSS nommée la plus proche, et le Chercheur Tailwind mappe des couleurs arbitraires vers des classes utilitaires Tailwind. Tous les outils fonctionnent côté client sans aucune donnée envoyée à un serveur.
Que sont les outils couleur ?
Les outils couleur sont des utilitaires qui aident les développeurs et les designers à travailler avec des valeurs de couleur numériques. Chaque couleur à l'écran est stockée sous forme de nombres : trois canaux pour RGB (rouge, vert, bleu), un triplet hexadécimal pour le CSS abrégé, ou teinte angulaire plus saturation et luminosité pour HSL. Passer manuellement d'une représentation à l'autre est lent et source d'erreurs, surtout lorsqu'il faut aussi tenir compte de la transparence alpha ou de modèles plus récents comme OKLCH.
Au-delà de la conversion de format, le travail sur les couleurs implique des tests d'accessibilité, la création de palettes et la génération de dégradés. WCAG 2.1 définit des ratios de contraste minimaux (4,5:1 pour le texte normal en AA, 7:1 pour AAA) qui sont difficiles à vérifier à l'œil nu. Générer des schémas de couleurs harmonieux nécessite des calculs d'angle précis sur la roue chromatique HSL. Les dégradés CSS requièrent une syntaxe correcte pour la direction, les points de couleur et les valeurs de repli. Faire tout cela manuellement sur un système de design avec des dizaines de tokens devient vite fastidieux.
Les outils couleur automatisent ces tâches. Ils acceptent une couleur dans un format, effectuent les calculs et retournent le résultat dont vous avez besoin — qu'il s'agisse d'une valeur convertie, d'un verdict d'accessibilité réussi/échoué, d'un ensemble de nuances harmonieuses, ou d'un extrait de code CSS. Lorsque l'outil s'exécute dans le navigateur, vous évitez aussi de téléverser des tokens de design confidentiels vers des services tiers.
Pourquoi utiliser les outils couleur de ToolDeck ?
Les outils couleur de ToolDeck s'exécutent entièrement dans votre navigateur. Aucune valeur de couleur ne quitte votre machine, aucun compte n'est requis, et chaque outil se charge instantanément sans installer d'extensions ni de logiciel de bureau.
🎨Convertir les formats en une seule étape
Collez un code HEX et obtenez simultanément les valeurs RGB, HSL et HSV. Inutile d'enchaîner plusieurs convertisseurs ou de mémoriser des formules de conversion.
🔒Garder les tokens de design privés
Tout le traitement s'effectue côté client. Les couleurs de votre marque, les décisions de palette non publiées et les valeurs internes de votre système de design restent sur votre appareil.
♿Tester l'accessibilité instantanément
Vérifiez n'importe quelle paire premier plan/arrière-plan par rapport aux seuils WCAG 2.1 AA et AAA pour le texte normal et le grand texte. Obtenez le ratio de contraste exact, pas seulement un label réussi/échoué.
⚡Copier une sortie prête pour la production
Chaque outil produit des valeurs que vous pouvez coller directement dans CSS, la configuration Tailwind ou les champs de saisie d'un outil de design. Aucune mise en forme supplémentaire nécessaire.
Cas d'usage des outils couleur
Voici six scénarios courants où les outils couleur de ToolDeck font gagner du temps.
Maintenance d'un système de design
Lors de la mise à jour d'un système de design, vous recevez souvent des couleurs en HEX d'un designer mais avez besoin de HSL pour les propriétés personnalisées CSS. Le
Convertisseur de couleur traduit entre les formats pour que vous puissiez remplir les fichiers de tokens sans calcul manuel.
Audits d'accessibilité
Lors d'un audit de conformité WCAG, chaque combinaison texte/arrière-plan doit respecter des ratios de contraste minimaux. Le
Vérificateur de contraste affiche le ratio exact et l'état AA/AAA pour les tailles de texte normal et grand.
Exploration de palette de marque
À partir d'une seule couleur de marque, vous avez besoin de variantes d'accentuation et de couleurs neutres. Le
Générateur de palette calcule les harmonies complémentaires, analogues, triadiques et tétradiques pour que vous puissiez évaluer les options avant de valider une palette.
Stylisation d'arrière-plan CSS
Créer une section hero ou un arrière-plan de carte avec un dégradé nécessite une syntaxe CSS correcte pour les angles, les points de couleur et les préfixes propriétaires. Le
Générateur de dégradé CSS vous permet de construire le dégradé visuellement et de copier le code.
Migration vers Tailwind
Lors de la migration d'un projet vers Tailwind CSS, vous devez mapper les valeurs HEX ou RGB existantes vers la classe utilitaire Tailwind la plus proche. Le
Chercheur Tailwind trouve la correspondance la plus proche et affiche le delta pour que vous puissiez juger si l'approximation est acceptable.
Revue de code et documentation
Lors d'une revue de code, une valeur HEX brute comme #708090 ne signifie rien au premier coup d'œil. Le
Chercheur de noms de couleurs l'identifie comme SlateGray, rendant les revues et la documentation plus lisibles.
Référence des modèles de couleur CSS
CSS prend en charge plusieurs modèles de couleur. Le tableau ci-dessous résume les six formats les plus courants, leur syntaxe et leurs cas d'usage typiques. Tous sont pris en charge par le Convertisseur de couleur de ToolDeck.
| Modèle | Syntaxe CSS | Canaux | Plage de valeurs | Usage typique |
|---|
| HEX | #rrggbb | Rouge, Vert, Bleu | 00–ff par canal | Le plus courant en CSS, transferts design, charte graphique |
| RGB | rgb(r, g, b) | Rouge, Vert, Bleu | 0–255 par canal | API canvas JavaScript, styles calculés, traitement d'images |
| HSL | hsl(h, s%, l%) | Teinte, Saturation, Luminosité | 0–360 / 0–100% / 0–100% | Tokens de design, génération de thèmes, variantes de teintes programmatiques |
| HSV | N/A (absent de CSS) | Teinte, Saturation, Valeur | 0–360 / 0–100% / 0–100% | Sélecteurs de couleurs (Photoshop, Figma), calibration colorimétrique matérielle |
| OKLCH | oklch(L C H) | Luminosité, Chroma, Teinte | 0–1 / 0–0,4 / 0–360 | Palettes perceptuellement uniformes (spécification CSS Color Level 4) |
| Named | ex. : slategray | Mappé vers RGB en interne | 148 noms prédéfinis | Prototypage, code lisible, démonstrations rapides |
CSS Color Level 4 (W3C) définit également les fonctions lab(), lch() et color(). HEX et RGB restent les plus largement pris en charge par les navigateurs et les outils de design.
Comment choisir le bon outil couleur
Chaque outil couleur résout un problème différent. Utilisez le guide ci-dessous pour trouver le bon outil pour votre tâche.
- 1
Si vous avez besoin de convertir une couleur entre les formats HEX, RGB, HSL ou HSV → Convertisseur de couleur - 2
Si vous avez besoin de vérifier qu'une paire texte/arrière-plan respecte les normes d'accessibilité WCAG → Vérificateur de contraste - 3
Si vous avez besoin de générer un ensemble de couleurs harmonieuses à partir d'une seule couleur de base → Générateur de palette - 4
Si vous avez besoin de construire un dégradé CSS linéaire ou radial et obtenir le code → Générateur de dégradé CSS - 5
Si vous avez besoin de trouver le nom CSS lisible le plus proche d'une valeur de couleur donnée → Chercheur de noms de couleurs - 6
Si vous avez besoin de mapper une couleur arbitraire vers la classe utilitaire Tailwind CSS la plus proche → Chercheur Tailwind
Les six outils acceptent des entrées dans plusieurs formats. Si vous n'êtes pas sûr du format de votre couleur, commencez par le Convertisseur de couleur, qui détecte automatiquement les notations HEX, RGB, HSL et HSV.
Questions fréquemment posées
Quelle est la différence entre les formats de couleur HEX et RGB ?
HEX et RGB représentent le même espace colorimétrique. Un code HEX comme #ff6600 est un encodage hexadécimal des trois canaux RGB : ff = 255 (rouge), 66 = 102 (vert), 00 = 0 (bleu). La seule différence est la notation. HEX est plus compact dans les feuilles de style CSS, tandis que RGB est plus facile à manipuler par programmation car chaque canal est déjà un entier décimal.
Quand dois-je utiliser HSL plutôt que HEX ou RGB ?
HSL sépare la teinte (la couleur elle-même) de la saturation et de la luminosité. Cela facilite la création de variantes de teintes : gardez la teinte fixe, diminuez la luminosité pour une nuance plus sombre, augmentez-la pour une teinte plus claire. Les systèmes de design qui génèrent des thèmes clair/sombre à partir d'une seule couleur de base stockent souvent les tokens en HSL pour cette raison. Les propriétés personnalisées CSS se combinent également bien avec HSL car vous pouvez modifier des canaux individuels.
Quel ratio de contraste WCAG 2.1 exige-t-il pour le texte ?
WCAG 2.1 Niveau AA exige un ratio de contraste minimal de 4,5:1 pour le texte normal (en dessous de 18pt ou 14pt gras) et de 3:1 pour le grand texte (18pt+ ou 14pt+ gras). Le niveau AAA rehausse ces seuils à 7:1 et 4,5:1 respectivement. Ces ratios sont calculés à partir de la luminance relative des couleurs de premier plan et d'arrière-plan en utilisant la formule définie dans le critère de succès 1.4.3 de WCAG 2.1.
Combien de couleurs nommées CSS existe-t-il ?
CSS définit 148 couleurs nommées, héritées des spécifications SVG 1.1 et CSS3. Elles vont de noms courants comme red, blue et white à des noms spécifiques comme MediumSlateBlue, PapayaWhip et LavenderBlush. Les couleurs nommées correspondent à des valeurs RGB fixes. La spécification CSS Color Level 4 conserve les mêmes 148 noms sans en ajouter de nouveaux. Les navigateurs reconnaissent également le mot-clé transparent (équivalent à rgba(0,0,0,0)).
Puis-je utiliser les couleurs OKLCH en CSS aujourd'hui ?
Oui. La fonction oklch() est prise en charge dans Chrome 111+, Firefox 113+ et Safari 15.4+. OKLCH fait partie de la spécification CSS Color Level 4 publiée par W3C. Son principal avantage sur HSL est l'uniformité perceptuelle : deux couleurs ayant la même valeur de luminosité en OKLCH semblent réellement aussi lumineuses à l'œil humain, ce qui n'est pas vrai pour HSL. OKLCH est donc un meilleur choix pour générer des palettes accessibles avec une luminosité perçue cohérente.
Quelle est la différence entre HSL et HSV ?
HSL et HSV utilisent tous deux une représentation cylindrique avec la teinte comme angle, mais ils définissent la luminosité différemment. En HSL, une luminosité de 50% correspond à la couleur pure ; 0% est noir, 100% est blanc. En HSV, une valeur de 100% correspond à la couleur pure ; 0% est noir. HSV n'a pas de moyen intégré d'atteindre le blanc sans réduire aussi la saturation. Les designers et les sélecteurs de couleurs (Photoshop, Figma) utilisent généralement HSV, tandis que CSS utilise HSL nativement.
Comment trouver la classe Tailwind pour une couleur HEX arbitraire ?
Tailwind CSS est livré avec une palette fixe d'environ 220 classes de couleurs (22 teintes multipliées par 10 nuances chacune, plus noir, blanc et transparent). Pour trouver la classe la plus proche d'une valeur HEX donnée, on calcule la distance euclidienne dans un espace colorimétrique perceptuel (comme CIELAB ou OKLCH) entre votre couleur et chaque nuance Tailwind. Le Chercheur Tailwind de ToolDeck fait cela automatiquement et affiche la correspondance la plus proche ainsi que la différence de couleur pour que vous puissiez juger si l'approximation est suffisante.
Est-il sûr de coller des couleurs de marque confidentielles dans un outil en ligne ?
Cela dépend de l'outil. Tout outil qui envoie votre saisie à un serveur expose ces valeurs dans le trafic réseau et les journaux serveur. Les outils couleur de ToolDeck s'exécutent entièrement dans votre navigateur en JavaScript côté client. Aucune requête HTTP ne transporte vos données de couleur vers un serveur. Vous pouvez le vérifier en ouvrant l'onglet Réseau de votre navigateur pendant l'utilisation de l'outil. Pour une précaution maximale, vous pouvez également utiliser les outils hors ligne après le chargement initial de la page.