Qu’est-ce que le sélecteur couleur ?
Choisissez des couleurs visuellement et convertissez entre HEX, RGB, HSL et CMYK. Copiez n’importe quel format en un clic et ajustez les valeurs directement dans le navigateur.
Comment utiliser le sélecteur couleur
- Saisissez une valeur HEX ou utilisez le sélecteur visuel pour choisir une couleur.
- Vérifiez les valeurs RGB, HSL et CMYK converties affichées ci-dessous.
- Ajustez les valeurs saisies jusqu’à ce que la couleur corresponde à votre design ou à votre code cible.
- Copiez le format dont vous avez besoin en un clic.
Guides rapides
Référence des formats de couleur Compare HEX, RGB, HSL et CMYK pour choisir le bon format pour vos workflows CSS, design et impression.
Comprendre la sélection de couleurs ▾
Exemple
Cas d’utilisation courants
- Choisissez des couleurs d’interface exactes pour CSS ou les design tokens
- Copiez les valeurs HEX, RGB ou HSL dans le code front-end
- Inspectez et comparez les couleurs pendant les QA design
- Créez de petites palettes à partir d’une seule couleur sélectionnée
Questions fréquentes
HEX, RGB, RGBA, HSL, HSLA et CMYK. Cliquez sur n’importe quel champ de format pour copier sa valeur.
Sur les navigateurs compatibles avec l’API EyeDropper (Chrome 95+), oui. Cliquez sur l’icône de pipette pour prélever une couleur n’importe où à l’écran.
HSL (Teinte, Saturation, Luminosité) et HSB/HSV (Teinte, Saturation, Brillance/Valeur) sont tous deux des modèles de couleur cylindriques, mais diffèrent dans la façon dont ils définissent le troisième axe. En HSL, une luminosité de 50 % correspond à la couleur "pure". En HSB, une brillance de 100 % désigne la brillance maximale, ce qui se rapproche de la couleur que les artistes perçoivent comme vive. CSS utilise HSL ; Photoshop et Figma utilisent HSB.
Cet outil affiche les valeurs et conversions de couleurs. Pour vérifier le contraste d’accessibilité (ratios WCAG AA/AAA) par rapport à une couleur d’arrière-plan, utilisez l’outil dédié Contrast Checker.