Sélecteur de couleur
Choisissez une couleur sur la roue, affinez-la sur la zone de saturation, et retrouvez-la dans tous les formats que parle votre projet, de #RRGGBB à oklch(). Ce sélecteur va aussi plus loin que la plupart des outils : trois géométries de roue, dont la roue RYB des peintres, des harmonies qui construisent une palette pour vous, un canal alpha, et l’export en un clic de toute la palette en variables CSS, SCSS ou JSON. Tout est calculé localement dans votre navigateur.
RYB ou RGB: trois roues, pas une seule
Le sélecteur Mode de la roue change la géométrie de la roue elle-même :
- HSV et HSL sont les roues numériques : les teintes y sont réparties comme les écrans mélangent la lumière. Elles diffèrent dans le comportement de la zone carrée : le coin le plus lumineux du HSV correspond à la teinte pure, tandis que le HSL place les teintes pures à mi-luminosité, avec du blanc au-dessus.
- RYB (peintre) organise les teintes comme les artistes les ont apprises : rouge, jaune et bleu comme couleurs primaires, avec orange, vert et violet entre les deux (voir le modèle RYB sur Wikipédia). La différence se voit surtout dans les harmonies : sur la roue RYB, le complémentaire du rouge est le vert et celui du bleu est orange, les paires classiques du pigment, alors qu’une roue numérique associe le rouge au cyan. Si une palette « complémentaire » d’un sélecteur classique vous a déjà semblé fausse à l’œil, voilà pourquoi.
Des harmonies de couleurs qui construisent la palette pour vous
Choisissez une règle dans Harmonie des couleurs : la roue marque les couleurs compagnes, qui apparaissent comme une palette prête à l’emploi juste en dessous :
- Complémentaire : une couleur opposée. Le contraste le plus fort, à utiliser pour un accent unique face à une couleur de marque dominante.
- Complémentaire divisée : les deux voisines du complémentaire. Presque autant de contraste, bien plus facile à équilibrer.
- Triadique : trois teintes réparties uniformément. Vivant mais stable si l’une domine et que les deux autres sont utilisées avec parcimonie.
- Tétradique (carré) : quatre teintes. Des palettes riches pour l’illustration et la visualisation de données, difficiles à équilibrer dans une interface d’application.
- Analogue : les voisines immédiates. Une combinaison calme pour les fonds et les dégradés.
- Monochromatique : une seule teinte déclinée en plusieurs niveaux de luminosité. Le choix le plus sûr pour les états d’un bouton (survol, actif, désactivé).
Le panneau de palette copie tout l’ensemble en un clic, dans le format de votre choix : HEX brut, RGB, HSL, OKLCH, des propriétés personnalisées CSS prêtes à coller (--color-1: …), des variables SCSS ou du JSON pour votre code. Pour vérifier si les couleurs de la palette gardent assez de contraste pour les personnes qui distinguent mal les teintes, prenez une capture d’écran puis testez la conversion en niveaux de gris.
Convertir HEX, RGB, HSL, OKLCH et CMYK: collez n’importe quoi, lisez tout
Les champs de saisie acceptent pratiquement toutes les notations de couleur : #f80, #ff8800, du hex à 8 chiffres avec alpha, rgb() et rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 et des noms de couleur CSS comme rebeccapurple. Quel que soit le format saisi, vous obtenez sept sorties synchronisées : HEX, RGB, HSL, HSV, LCH, OKLCH et CMYK, chacune avec son propre bouton de copie.
Le curseur Opacité (alpha) sous l’aperçu fait basculer les sorties vers leurs formes transparentes #RRGGBBAA, rgba() et hsla(). L’aperçu s’affiche sur un damier, ce qui permet de juger la transparence d’un coup d’œil.
Trouvez le token Tailwind CSS le plus proche
Deux étiquettes sous l’aperçu nomment la couleur pour vous : la couleur nommée CSS la plus proche (utile pour des prototypes rapides) et le token Tailwind le plus proche, par exemple orange-500. Vous restez ainsi dans votre design system au lieu d’inventer des valeurs isolées. Cliquez sur une étiquette pour la copier.
Cela répond à la question qui revient à chaque passation de design : le graphiste a envoyé un code hex, quelle classe Tailwind lui correspond le mieux ? La correspondance est calculée par rapport à la palette par défaut de Tailwind CSS 4 (voir la documentation Tailwind, en anglais), donc le token obtenu peut être collé directement dans un nom de classe.
Quel format de couleur utiliser ?
| Format | Nom complet | Quand l’utiliser |
|---|---|---|
| HEX | Hexadecimal | Le standard du web. Compact, pris en charge partout, facile à copier. Huit chiffres ajoutent l’alpha. |
| RGB | Red, Green, Blue | Comme pensent les écrans. Trois canaux de lumière, de 0 à 255. Le format attendu par la plupart des API et du code canvas. |
| HSL | Hue, Saturation, Lightness | Pour une édition à l’œil. « Un peu plus clair » ou « moins saturé » revient à changer un seul chiffre. |
| HSV | Hue, Saturation, Value | Logiciels graphiques. Le modèle derrière les sélecteurs de couleur de Photoshop et GIMP. |
| LCH | Lightness, Chroma, Hue | Perceptuellement uniforme. Des pas numériques égaux paraissent visuellement égaux, ce que le HSL ne fait que prétendre. |
| OKLCH | OK Lightness, Chroma, Hue | Le choix CSS moderne. Corrige les décalages de teinte dans les bleus dont souffre le LCH. Pris en charge par tous les navigateurs actuels, idéal pour les tokens de design. |
| CMYK | Cyan, Magenta, Yellow, Key | Une orientation pour l’impression. Une conversion approximative pour dialoguer avec un imprimeur, les valeurs finales dépendent de son profil colorimétrique. |
Pourquoi l’OKLCH est perceptuellement plus uniforme que les anciens modèles est expliqué par Björn Ottosson, qui a conçu l’espace Oklab, dans son article original (en anglais). La syntaxe et la prise en charge par les navigateurs sont résumées sur MDN. Le fonctionnement du modèle d’impression est décrit dans l’article Quadrichromie sur Wikipédia.
De petites choses qui font gagner du temps
- L’historique se tient à jour tout seul. Les 24 dernières couleurs survivent à une actualisation de la page. Elles restent dans le stockage local de votre navigateur et ne sont jamais envoyées ailleurs.
- Pipette. Dans les navigateurs qui prennent en charge l’API EyeDropper (Chrome et Edge), vous pouvez prélever une couleur n’importe où sur votre écran, même en dehors de la fenêtre du navigateur. Pour prélever une couleur dans une photo ou un fichier logo, utilisez la pipette à couleurs, qui fonctionne dans tous les navigateurs.
- Contrôle au clavier. La roue et la zone de saturation répondent aux flèches directionnelles, pour ajuster une couleur par petits pas.
- Les préréglages couvrent les couleurs de base courantes quand vous avez juste besoin d’un point de départ rapide.
Questions fréquentes
Comment convertir OKLCH en HEX ?
Collez la valeuroklch() dans le champ OKLCH et tous les autres résultats se mettent à jour instantanément, HEX inclus. Cela fonctionne aussi dans l'autre sens : saisissez un code HEX et lisez l'équivalent oklch(). Une réserve : OKLCH peut décrire des couleurs hors du gamut sRGB, qui sont alors écrêtées à ce que le sRGB peut afficher. Un oklch() très saturé n'aura donc pas le même rendu que sa version HEX sur un écran à large gamut.
oklch() est-il fiable en production ?
Oui. Toutes les versions actuelles de Chrome, Edge, Firefox et Safari prennent en chargeoklch(), devenue une notation courante pour les tokens de design (Tailwind CSS 4 définit toute sa palette avec). Pour les très anciens navigateurs, prévoyez un repli HEX sur la ligne précédente. Cet outil vous donne les deux valeurs.