Sélecteur de couleurs (HEX, RGB, HSL, OKLCH)
Choisissez une couleur sur le carré saturation–luminosité ou saisissez HEX, RGB, HSL ou OKLCH. Tous les formats restent synchronisés, avec une échelle teinte/ombre, une pipette (Chromium) et des palettes exportables en CSS et JSON.
Comment choisir et exporter des couleurs
1. Glissez sur le carré et le curseur de teinte, ou collez une valeur HEX/RGB/HSL/OKLCH.
2. Lisez HEX, RGB, HSL et OKLCH synchronisés dans la barre.
3. Cliquez une ombre ou un nuancier d’harmonie pour explorer les couleurs liées.
4. Copiez une valeur, un lien ?hex= ou exportez des variables CSS / JSON.
Exemples de sélecteur de couleurs
Terracotta de marque #8F665E
Le sélecteur HSV garde la teinte tout en assombrissant pour le hover. Exportez --color et --shade-* en variables CSS.
Palette analogique de tableau de bord
Choisissez Analogues pour des teintes ±30° et ±60°. Copiez la bande en custom properties pour cartes et graphiques.
OKLCH pour des paliers réguliers
La rampe fait varier la clarté OKLCH, plus régulière que mélanger du HEX avec du blanc. Utilisez oklch() en CSS moderne.
Quand utiliser cet outil
• Quand vous choisissez des couleurs UI et besoin de HEX, RGB, HSL et OKLCH à la fois.
• Quand vous générez des états hover/muted à partir d’une teinte de marque.
• Quand vous exportez une petite palette (harmonie + rampe) en variables CSS.
Harmonies pour palettes UI
Les complémentaires sont à 180° — fort contraste, à doser sur les CTA. Les analogues (±30–60°) unifient un dashboard. Triades et tétrades offrent plus de variété ; baissez la saturation des extras pour que le primary reste dominant. Vérifiez le texte avec le contrôleur de contraste WCAG.
Questions fréquentes
HEX vs RGB vs HSL vs OKLCH ?
HEX et RGB sont la même couleur sRGB. HSL sert à ajuster teinte et clarté. OKLCH est perceptuel : des pas L similaires paraissent plus réguliers, et oklch() est du CSS moderne valide.
La pipette marche-t-elle partout ?
L’API EyeDropper existe dans Chromium (Chrome, Edge). Sinon saisissez une valeur ou utilisez le sélecteur visuel.
Puis-je partager une couleur ?
Oui. L’URL se met à jour avec ?hex=RRGGBB. Copiez le lien pour rouvrir la même couleur.
Les couleurs passent-elles par un serveur ?
Non. Conversion, harmonies et export s’exécutent localement dans le navigateur.