Sélecteur de Couleur
Sélecteur de couleur gratuit — choisissez n'importe quelle couleur visuellement et obtenez instantanément les codes HEX, RGB, HSL, HSV et CMYK. Ombres...
Mis à jour mai 2026
Vérifié par Rafael Duarte
Cette couleur respecte le niveau AA des WCAG 2.1 pour le texte normal (4,5:1) sur au moins un fond.
Nuances et teintes
Harmonies de couleurs
Comment utiliser le sélecteur de couleur hexadécimal
Canvas visuel, cinq formats en direct
1. Cliquez ou faites glisser sur le canvas
Saturation sur l'axe X, luminosité sur l'axe Y — ajustez la teinte sur la barre arc-en-ciel en dessous.
2. Ou saisissez un hex directement
Collez n'importe quel code à 6 chiffres et le sélecteur se positionne directement sur cette couleur.
3. Copiez et explorez les variantes
HEX, RGB ou HSL en un clic ; explorez ombres, tons et harmonies dans les panneaux ci-dessous.
Ce que fait cet outil
Cinq formats, ombres, tons et vérification WCAG
HEX, RGB, HSL, HSV et CMJN
HEX, RGB, HSL, HSV et CMJN, ainsi que LAB, la valeur décimale et la version web-safe — tous mis à jour simultanément en temps réel.
Ombres et tons
10 nuances plus sombres et 10 plus claires à partir de la couleur sélectionnée.
5 harmonies de couleur
Complémentaire, analogue, triadique, split-complémentaire et tétradique.
Vérificateur de contraste WCAG
Indique si la couleur respecte le ratio 4.5:1 du niveau AA.
Nom CSS le plus proche
Calcule la distance euclidienne en RGB pour suggérer le mot-clé CSS le plus ressemblant.
100% dans le navigateur
Sans inscription, sans installation, tout s'exécute localement.
Exemples de conversion
Quand vous allez utiliser ça
Les scénarios les plus courants chez celles et ceux qui utilisent l'outil
Développement web et UI
Copiez HEX ou RGB directement dans le CSS, la config Tailwind ou les design tokens.
Audit d'accessibilité
Le vérificateur WCAG identifie les problèmes de contraste avant d'arriver en production.
Création de design systems
Utilisez le panneau d'ombres et de tons pour construire une rampe de couleurs complète.
Préparation pour l'impression
Les valeurs CMJN montrent comment votre couleur à l'écran se traduit en pigments.
Capturer une couleur n'importe où à l'écran
Utilisez la pipette (Eye Dropper) pour récupérer la couleur exacte d'une image, d'un site ou d'une app ouverte dans le navigateur, sans capture d'écran externe.
Erreurs courantes
Confondre HSL et HSV
Les deux utilisent teinte et saturation, mais le troisième axe diffère — voir la comparaison ci-dessous.
Croire que le nom CSS le plus proche est une correspondance exacte
C'est le mot-clé le plus ressemblant par distance RGB, pas forcément la couleur identique.
Attendre que le CMJN reproduise exactement la couleur à l'écran
Certains bleus et verts vifs sortent de la gamme imprimable.
Essayer d'utiliser la pipette sur Firefox ou Safari
Le bouton Eye Dropper dépend de l'API Eye Dropper native du navigateur, disponible aujourd'hui uniquement sur Chrome, Edge et les autres navigateurs basés sur Chromium.
Croire que la palette enregistrée et l'historique persistent après rechargement
Les couleurs enregistrées et l'historique des sélections restent uniquement en mémoire de l'onglet actuel — copiez les codes où vous allez les utiliser avant de fermer ou d'actualiser la page.
Croire que la couleur "Web Safe" est encore obligatoire aujourd'hui
C'est un vestige de la palette de 216 couleurs pour les écrans 8 bits des années 1990 — les écrans modernes affichent des millions de couleurs sans cette limite.
Pourquoi utiliser cet outil
Combine conversion, ombres/tons, exploration d'harmonies et vérification de contraste WCAG sur une seule page — la plupart des sélecteurs de couleur ne font que convertir des formats.
Affiche HSL et HSV simultanément, pour que vous n'ayez pas à deviner ce que le CSS attend face à ce que Photoshop utilise en interne.
Au-delà de la conversion, il est possible de capturer n'importe quelle couleur à l'écran avec la pipette, de sauvegarder jusqu'à 20 couleurs dans une palette et de revisiter l'historique des dernières sélections — tout sans quitter la page.
HSL vs. HSV
Mêmes deux premiers axes, troisième axe différent
Questions fréquentes
Une représentation hexadécimale à 6 chiffres d'une couleur RGB (#RRGGBB). Chaque paire représente un canal — RR le rouge, GG le vert, BB le bleu, de 00 à FF.
Références
Référence complète de tous les formats de couleur CSS.
Documentation officielle sur l'exigence de contraste 4.5:1.
Explique le modèle LAB utilisé dans l'onglet des spécifications techniques du sélecteur et pourquoi il est perceptuellement plus uniforme que le RGB.
Outils connexes
- Générateur de Palette de Couleurs Design Générez des palettes de couleurs harmonieuses depuis n'importe quelle couleur de base. Choisissez Analogue, Complémentaire, Triadique ou Tétradique —...
- Vérificateur de Contraste de Couleurs Design Vérificateur de contraste de couleurs gratuit — vérifiez la conformité WCAG 2.2 AA et AAA instantanément. Aperçu en direct, simulation du daltonisme et...
- Convertisseur de Couleurs Design Convertissez des couleurs entre HEX, RVB, HSL et CMJN instantanément. Sélecteur de couleur gratuit avec vérificateur de contraste WCAG et générateur de palette.
- Palette de Couleurs depuis une Image Design Extrayez des palettes de couleurs de n'importe quelle image — obtenez des codes HEX, RGB, HSL et exportez en CSS variables, Tailwind, JSON ou PNG. 100% dans...
- Générateur CSS Box Shadow — Neumorphisme, Glassmorphisme et Tailwind Design Générateur CSS box shadow gratuit avec aperçu en temps réel. Créez des ombres, effets neumorphisme et glassmorphisme. Exportez en CSS, Tailwind ou variables CSS.
