Sélecteur de couleur
Choisissez n'importe quelle couleur et obtenez instantanément ses valeurs HEX, RGB et HSL. Modifiez n'importe quel format et tous les autres se mettent à jour en temps réel.
#F0C040
Valeurs de couleur
HEX#F0C040
RGBrgb(240, 192, 64)
HSLhsl(44, 85%, 60%)
Modifier manuellement
R
G
B
H
S
L
Formats de couleur expliqués
- #RRGGBB — HEX : le standard du web. Utilisé en CSS, dans les outils de design et en HTML.
- rgb(r, g, b) — Rouge, Vert, Bleu. Chaque canal va de 0 à 255.
- hsl(h, s%, l%) — Teinte (0-360°), Saturation, Luminosité. Idéal pour ajuster les couleurs intuitivement.
Comment fonctionne le sélecteur de couleur
Choisissez n'importe quelle couleur pour obtenir instantanément ses valeurs HEX, RGB et HSL. Copiez n'importe quel format en un clic.
Vous pouvez aussi modifier n'importe quel format manuellement — entrez un code HEX, ajustez un canal RGB ou modifiez une valeur HSL — et tous les autres champs se mettent à jour automatiquement.
Conseils pour travailler avec les couleurs
- Utilisez HSL pour des palettes harmonieuses. Gardez la teinte fixe et faites varier la saturation et la luminosité. Un bleu primaire à
hsl(210, 70%, 50%)s'associe naturellement àhsl(210, 30%, 90%)comme couleur d'arrière-plan. - Vérifiez le contraste pour l'accessibilité. WCAG AA exige au moins un contraste de 4,5:1 entre le texte et l'arrière-plan. Utilisez un vérificateur de contraste dédié après avoir choisi vos couleurs.
- Utilisez des propriétés CSS personnalisées. Enregistrez les valeurs sous forme de
--color-primary: #3b82f6pour éviter les dérives de couleur dans un projet. - Utilisez HEX pour CSS, RGB pour la manipulation programmatique, HSL pour la conception de palettes. Chaque format convient à un flux de travail différent.
Questions fréquentes
Comment vérifier le contraste des couleurs pour l'accessibilité ?
Copiez les valeurs HEX de votre premier plan et de votre arrière-plan et collez-les dans un vérificateur de contraste WCAG. Visez 4,5:1 pour le texte normal, 3:1 pour le texte large (WCAG AA). Un ratio de 7:1 répond à la norme AAA plus stricte.
Puis-je saisir un code couleur manuellement ?
Oui. Utilisez la section Modifier manuellement pour saisir dans n'importe quel champ HEX, RGB ou HSL. Tous les autres champs se mettent à jour automatiquement. HEX fonctionne avec ou sans le
# initial.Qu'est-ce que le format HSL ?
Teinte (0–360°), Saturation (0–100 %), Luminosité (0–100 %). HSL est le format le plus intuitif pour créer des palettes — ajustez la luminosité pour obtenir des tons clairs et foncés, ajustez la saturation pour passer du gris au vif.
Vous pourriez aussi avoir besoin de
Outils complémentaires basés sur ce que vous faites