Sélecteur de couleur HEX
Les designers et développeurs jonglent avec la même couleur à travers quatre notations des centaines de fois par jour. Cliquez n’importe où dans le champ de saturation/valeur 2D, faites glisser le curseur de teinte ou collez une valeur, et ce sélecteur affiche HEX, RGB, HSL, HSV et CMYK côte à côte — avec des vérifications de contraste WCAG par rapport au noir et au blanc pour que vous sachiez immédiatement si la couleur est lisible.
Comment choisir une couleur
-
1
Choisissez une teinte
Faites glisser le curseur de teinte vertical à travers le spectre complet de 0 à 360°.
-
2
Choisissez la saturation et la valeur
Cliquez ou faites glisser à l'intérieur du carré 2D pour définir à quel point la couleur est vive et lumineuse.
-
3
Affinez avec les entrées
Tapez des valeurs exactes en HEX, RGB, HSL, HSV ou CMYK — les cinq champs restent synchronisés.
-
4
Vérifiez l'accessibilité et copiez
Les rapports de contraste par rapport au noir et au blanc apparaissent en ligne ; un clic copie la notation dont vous avez besoin.
Notations de couleur en pratique
Chaque modèle de couleur répond à une question légèrement différente.
Référence de notation
| Notation | Composants | Où elle est utilisée |
|---|---|---|
| HEX | #RRGGBB | CSS, outils de design, guides de marque |
| RGB | rouge 0-255, vert 0-255, bleu 0-255 | CSS rgb(), éditeurs d’images |
| HSL | teinte 0-360°, saturation %, luminosité % | CSS hsl(), systèmes de design |
| HSV/HSB | teinte 0-360°, saturation %, valeur/luminosité % | Photoshop, sélecteurs de couleur Figma |
| CMYK | cyan %, magenta %, jaune %, clé/noir % | Impression, prépresse |
| OKLCH | luminosité %, chroma, teinte | Palettes du module de couleur CSS moderne 4 |
Contraste d’accessibilité
WCAG 2.2 définit les rapports de contraste minimum entre le texte et l’arrière-plan :
- AA pour le texte normal : ≥ 4.5:1
- AA pour le texte large (18 pt ou 14 pt en gras) : ≥ 3:1
- AAA pour le texte normal : ≥ 7:1
Le sélecteur calcule le rapport par rapport au blanc et au noir en temps réel. Si une couleur de premier plan personnalisée est critique, utilisez un vérificateur de contraste dédié pour chaque paire.
Conseils
- HEX est la valeur par défaut dans la plupart des outils de design, mais le hex à trois chiffres (
#F60) est équivalent à#FF6600, pas#F06060. - HSL est plus pratique pour créer des palettes : verrouillez la teinte, variez la luminosité pour obtenir des nuances claires et foncées.
- CMYK et RGB ne peuvent pas être parfaitement interconvertis — l’impression CMYK dépend du profil d’impression. Toujours imprimer des épreuves sur du vrai papier.
- Si vous concevez pour le CSS moderne, envisagez OKLCH pour des paliers de luminosité perceptuellement uniformes.
Questions fréquentes
Photoshop applique un profil de couleur (généralement sRGB pour l’écran, souvent différent pour l’impression). Les navigateurs rendent le HEX non étiqueté comme sRGB. Si votre document est réglé sur Adobe RGB ou ProPhoto, les valeurs des pixels sont les mêmes mais la couleur perçue change.
Oui — les deux décrivent le rouge complet, avec le rouge à 255 et le vert et le bleu à 0. HEX est juste une notation hexadécimale à deux chiffres pour chaque valeur de canal 0-255.
Choisissez votre couleur principale, passez à HSL, puis variez la luminosité par paliers de 10 % tout en gardant la teinte et la saturation verrouillées. Vous obtiendrez une gamme cohérente de nuances claires et foncées partageant la même teinte.
Les couleurs récemment utilisées sont conservées dans le stockage local de votre navigateur afin qu’elles survivent à un rafraîchissement. Rien n’est envoyé à un serveur, et vous pouvez effacer l’historique de la palette à tout moment.
Outils similaires
Générateur de palette de couleurs
Générez une palette harmonieuse de 4 à 8 couleurs à partir d'une couleur de base en utilisant des schémas complémentaires, analogues, triadiques et split-complement.
Générateur de Couleurs Aléatoires
Générez une couleur RGB aléatoire, voyez les valeurs hex, HSL et RGB, et copiez n'importe quel format en un clic.
Générateur de palettes de couleurs aléatoires
Générez des palettes de cinq couleurs basées sur une teinte de base aléatoire, avec des variantes complémentaires, analogues et triadiques.
Formateur JSON
Formatez et mettez en forme JSON avec un retrait ajustable, des clés triées et une validation en ligne qui met en évidence les erreurs à la position exacte.
Générateur de lettres aléatoires
Générez des lettres aléatoires de l'alphabet anglais. Choisissez la casse, incluez des doublons ou des tirages uniques, et définissez combien.
Calculateur d'âge
Calculez l'âge exact en années, mois et jours à partir d'une date de naissance, plus le total de jours, heures et le compte à rebours jusqu'à l'anniversaire suivant.