Sélecteur de Couleurs en Ligne
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 superpositions d’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.
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 RVB 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 à 50 % de 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. Son intérêt pratique se voit 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 qui construisent la palette pour vous
Choisissez une règle dans Harmonie des couleurs et la roue marque les couleurs compagnes, qui apparaissent comme une palette prête à l’emploi :
- 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 ; laissez-en une dominer et utilisez les deux autres avec parcimonie.
- Tétradique (carré) — quatre teintes. Des palettes riches pour l’illustration et la visualisation de données ; difficile à équilibrer en interface.
- Analogue — les voisines immédiates. Peu de tension, idéal pour les fonds et les dégradés.
- Monochromatique — une seule teinte déclinée en luminosité. Le choix le plus sûr pour les états d’interface (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.
Collez n’importe quoi, lisez tout
Les champs de saisie acceptent pratiquement toutes les notations de couleur imaginables : #f80, #ff8800, du hex à 8 chiffres avec alpha, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, ou des noms de couleur CSS comme rebeccapurple. Quel que soit le format saisi, sept sorties synchronisées apparaissent en retour : HEX, RGB, HSL, HSV, LCH, OKLCH et CMYK, chacune avec son propre bouton de copie.
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 pour parler des couleurs) et le token Tailwind le plus proche (par exemple orange-500), pour rester dans votre design system plutôt que d’inventer des valeurs isolées.
Faites glisser le curseur Opacité (alpha) sous l’aperçu et les sorties basculent vers leurs formes transparentes — #RRGGBBAA, rgba(), hsla() — avec l’aperçu affiché sur un damier pour juger la transparence.
Quel format utiliser ?
| Format | Nom complet | Quand l’utiliser ? |
|---|---|---|
| HEX | Hexadécimal | Le standard du web. Compact, universellement pris en charge, facile à copier. 8 chiffres ajoutent l’alpha. |
| RGB | Rouge, Vert, Bleu | Comme pensent les écrans. Trois canaux de lumière, 0–255. Le format attendu par la plupart des API et du code canvas. |
| HSL | Teinte, Saturation, Luminosité | Pour une édition manuelle. « Un peu plus clair » ou « moins saturé » se traduit par un seul chiffre à changer. |
| HSV | Teinte, Saturation, Valeur | Logiciels graphiques. Le modèle derrière les sélecteurs de Photoshop et GIMP. |
| LCH | Luminosité, Chroma, Teinte | Perceptuellement uniforme. Des pas numériques égaux paraissent visuellement égaux — ce que le HSL prétend faire. |
| OKLCH | OK Luminosité, Chroma, Teinte | Le choix CSS moderne. Corrige les décalages de teinte du LCH dans les bleus ; pris en charge par tous les navigateurs actuels et idéal pour les systèmes de tokens de design. |
| CMYK | Cyan, Magenta, Jaune, Noir (Key) | Orientation impression. Une conversion approximative pour dialoguer avec un imprimeur — les valeurs finales dépendent toujours du profil colorimétrique de l’imprimante. |
De petites choses qui font gagner du temps
- L’historique se tient à jour tout seul. Les 24 dernières couleurs utilisées survivent à une actualisation de la page — stockées uniquement dans le stockage local de votre navigateur, 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.
- Contrôle au clavier. La roue et la zone de saturation répondent aux flèches directionnelles pour des ajustements précis au pixel.
- Les préréglages couvrent les couleurs de base courantes quand vous avez simplement besoin d’un point de départ rapide.
Foire aux questions (FAQ)
oklch() est-il fiable à utiliser en production ?
Oui. Toutes les versions actuelles de Chrome, Edge, Firefox et Safari prennent en chargeoklch(), devenue la notation privilégiée 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.