Sélecteur de couleur
Choisissez et convertissez des couleurs
Autres formats
Contraste avec un texte (WCAG 2)
Contraste 3,67:1 · AA pour les grands textes seulement
Contraste 5,70:1 · AA
Teintes claires (mêlées de blanc)
Teintes foncées (mêlées de noir)
Harmonies
Cliquez sur une couleur pour l’utiliser.
Couleurs récentes
Les couleurs que vous copiez, ou prélevez dans une image ou à l’écran, sont gardées ici, dans ce navigateur seulement.
Aucune couleur récente pour l’instant.
À propos de l’outil Sélecteur de couleur
Sélecteur de couleur montre un grand aperçu d’une couleur avec ses valeurs HEX et RGB, et la même couleur en HSL, HSV, HWB, CMYK et OKLCH avec son nom CSS. Vous choisissez la couleur avec le sélecteur de couleur intégré à votre navigateur (le petit échantillon sous l’aperçu), en cliquant sur un point d’une image que vous ouvrez, avec « Prélever à l’écran » dans Chrome ou Edge, ou en la tapant dans la case Entrée : un code HEX avec ou sans son signe #, en 3, 4, 6 ou 8 chiffres, rgb(), hsl(), hwb(), oklch(), hsv(), cmyk() ou un nom CSS comme tomato. Les formes à 4 et 8 chiffres et rgba() portent un canal alpha, affiché sur un damier. La page donne aussi les teintes claires et foncées, cinq harmonies de couleurs et le contraste WCAG d’un texte blanc et d’un texte noir sur la couleur.
Exemple
Un code tapé sans son signe # et les valeurs que la page affiche, calculées par son propre lecteur de codes HEX.
Tapé dans Entrée
ff8800
Cartes et presse-papiers
HEX: #ff8800 RGB: 255,136,0 Copier sous RGB met rgb(255,136,0) dans le presse-papiers
Comment choisir une couleur et obtenir sa valeur RGB
- 1Cliquez sur le petit échantillon de couleur sous le grand aperçu pour ouvrir le sélecteur de couleur de votre navigateur, puis choisissez une couleur.
- 2Ou tapez une couleur dans « Entrée », par exemple ff8800, #f80, rgb(255, 136, 0), hsl(32, 100%, 50%) ou orange : l’aperçu, l’échantillon et toutes les cartes suivent dès que la couleur est complète.
- 3Ou cliquez sur « Ouvrir une image » puis sur un point de l’image (choisissez une « Taille de l’échantillon » pour prendre la moyenne d’un petit carré), ou cliquez sur « Prélever à l’écran » dans Chrome ou Edge pour prendre une couleur n’importe où sur votre écran.
- 4Lisez la carte « RGB », qui affiche les valeurs de rouge, de vert et de bleu séparées par des virgules, puis la valeur alpha quand le code en a une.
- 5Cliquez sur « Copier » sous « HEX » ou « RGB » : la carte HEX copie le code tel qu’il est affiché, en minuscules avec #, et la carte RGB le copie sous la forme rgb(r,g,b), ou rgba(r,g,b,a) pour un code avec alpha.
- 6Sous « Autres formats », cliquez sur « Copier » sur la carte HSL, HSV, HWB, CMYK, OKLCH ou Nom CSS, et cliquez sur une teinte claire, une teinte foncée ou une harmonie pour en faire la couleur choisie.
Formats et limites
- Entrée
- Le sélecteur de couleur du navigateur, un point d’une image ouverte, l’écran (Chrome et Edge) ou une couleur tapée dans la case Entrée
- Codes HEX lus
- 3, 4, 6 ou 8 chiffres (#rgb, #rgba, #rrggbb, #rrggbbaa), # facultatif, en majuscules ou en minuscules
- Autres couleurs lues
- rgb(), rgba(), hsl(), hsla(), hwb(), oklch() avec des virgules ou des espaces et un / alpha facultatif ; hsv(), hsb(), cmyk() ; trois nombres comme 255, 136, 0 ; les 148 noms de couleurs CSS et transparent
- Résultat
- HEX en minuscules avec # ; RGB affiché sous la forme r,g,b (r,g,b,a avec alpha) et copié sous la forme rgb(r,g,b) ou rgba(r,g,b,a)
- Autres formats
- hsl(217, 91%, 60%), hsv(217, 76%, 96%), hwb(217 23% 4%), cmyk(76%, 47%, 0%, 4%), oklch(62.3% 0.188 259.8) et le nom CSS exact ou le plus proche
- Images
- PNG, JPEG, WebP, GIF, BMP, ICO et AVIF que votre navigateur ouvre (HEIC dans Safari) ; 1 pixel, ou la moyenne de 3 × 3, 5 × 5 ou 9 × 9 pixels ; 8 couleurs principales
- Non inclus
- Palettes enregistrées et leur export, simulation du daltonisme, dégradés, images TIFF (TIFF en PNG les convertit d’abord)
Usages courants
- Une couleur semi-transparente pour une ombre CSS
- Un développeur front-end tape 1e40af80, un bleu foncé avec un alpha de 80, et copie rgba(30,64,175,0.502) depuis la carte RGB pour un box-shadow.
- Développer un code abrégé d’une charte graphique
- Une charte graphique indique #f80. Tapé dans « Entrée », il apparaît comme #ff8800 sur la carte HEX, la forme à 6 chiffres que demandent beaucoup de champs de couleur hors du CSS.
- Les nombres RGB pour un modèle Office
- La fenêtre des couleurs personnalisées de Word ou de PowerPoint demande le rouge, le vert et le bleu en trois nombres ; la carte RGB les donne dans cet ordre, par exemple 255,136,0.
- La couleur exacte d’un logo
- Une graphiste ouvre le logo PNG d’un client, clique sur son rouge, copie le code HEX, puis vérifie sous le contraste qu’un texte blanc dessus atteint AA avant de l’utiliser pour un bouton.
Quel outil choisir
- Convertisseur de couleurs: pour modifier une couleur champ par champ, avec les nombres RGB, HSL, HSV et CMYK et un réglage d’opacité ; il copie rgb(255, 136, 0) avec des espaces, là où cette page copie rgb(255,136,0).
- Convertisseur hexadécimal: pour lire un seul nombre hexadécimal en décimal, en binaire ou en octal hors de toute couleur, par exemple FF en 255.
Où votre couleur est traitée
La couleur que vous choisissez ou tapez, et l’image que vous ouvrez, restent sur cette page : les conversions et la lecture des pixels de l’image sont faites par le code de la page, et ni la couleur ni l’image ne sont jamais envoyées à nos serveurs. Les boutons Copier utilisent le presse-papiers de votre navigateur, et les couleurs récentes sont gardées dans le stockage de ce navigateur seulement. La fenêtre du sélecteur de couleur et la pipette d’écran appartiennent à votre navigateur : ce qu’elles proposent dépend du navigateur, pas de ce site.
Questions fréquentes
La carte RGB lit-elle les codes courts comme #f80 ?
Oui. #f80 est lu comme #ff8800 et donne 255,136,0. Un code à 4 chiffres comme #f808 ou à 8 chiffres comme #ff880080 ajoute un canal alpha : la carte RGB l’affiche en quatrième valeur, entre 0 et 1 (255,136,0,0.502 pour #ff880080), et l’échantillon du navigateur, qui n’a pas d’alpha, montre la couleur opaque.
Faut-il taper le signe # ?
Non. ff8800 et #ff8800 donnent la même couleur, et la carte HEX affiche alors #ff8800. Un texte qui n’est ni un code HEX de 3, 4, 6 ou 8 chiffres, ni une fonction de couleur comme rgb(), ni un nom de couleur CSS, par exemple ff880 ou orangee, est refusé avec un message, et l’aperçu garde la couleur précédente.
Puis-je obtenir les valeurs HSL ou CMYK ici ?
Oui. Les cartes « Autres formats » donnent la couleur en HSL, HSV, HWB, CMYK et OKLCH, chacune avec son bouton Copier. Le CMYK est la formule simple (K = 1 - max(R, G, B)), pas un profil d’imprimante, et les valeurs sont arrondies à l’entier : hsl(217, 91%, 60%) retapé donne donc #3c83f6, à un cran de #3b82f6.
Copier ajoute-t-il rgb() autour de la valeur RGB ?
Oui. La carte RGB affiche 255,136,0 mais copie rgb(255,136,0), prêt à coller dans une feuille de style ; avec un canal alpha, elle copie rgba(255,136,0,0.502). La carte HEX copie le code tel qu’il est affiché, en minuscules avec son signe #.
Comment un code HEX devient-il une valeur RGB ?
Chaque paire de chiffres hexadécimaux est un canal de 0 à 255 : dans #ff8800, ff vaut 255 de rouge, 88 vaut 136 de vert et 00 vaut 0 de bleu. Un code à 3 chiffres double d’abord chaque chiffre, ce qui change f80 en ff8800.
Puis-je taper une valeur RGB comme rgb(255,136,0) ?
Oui. « Entrée » lit rgb(255,136,0), rgb(255 136 0 / 50%), les trois nombres 255, 136, 0 seuls, hsl(), hwb(), oklch(), hsv(), cmyk() et des noms comme orange, et la carte HEX affiche alors le code : #ff8800.
Pourquoi la carte HEX affiche-t-elle des minuscules quand j’ai tapé FF8800 ?
La page écrit chaque code en minuscules avec son signe #, donc FF8800 devient #ff8800. Le CSS lit les deux casses comme la même couleur.
La page garde-t-elle mes couleurs en mémoire ?
Oui, dans ce navigateur seulement. Les couleurs que vous copiez, ou prélevez dans une image ou à l’écran, apparaissent sous « Couleurs récentes » (16 au plus, la dernière en premier), et elles sont toujours là après un rechargement ; « Effacer » les retire. Un rechargement repart de #3b82f6, le bleu affiché à l’arrivée.
Comment obtenir la couleur d’un pixel d’une photo ou d’un logo ?
Cliquez sur « Ouvrir une image », puis sur le point voulu : la vue agrandie montre les pixels autour du pointeur, et les cartes prennent la couleur de ce pixel. Sur une photo, une « Taille de l’échantillon » de 3 × 3 ou 5 × 5 pixels prend la moyenne d’un petit carré, ce qui évite de prélever un pixel de bruit isolé. « Couleurs principales de l’image » donne ses 8 couleurs dominantes.
Puis-je prélever une couleur hors de la page ?
Oui, dans Chrome, Edge et Opera sur ordinateur : « Prélever à l’écran » change le pointeur en pipette qui lit n’importe quel pixel de votre écran, y compris dans une autre fenêtre ; Échap annule. Firefox et Safari ne l’offrent pas aux pages web, le bouton n’y est donc pas affiché : ouvrez plutôt une capture d’écran avec « Ouvrir une image ».
Que signifient AA et AAA sous le contraste ?
Ce sont les niveaux WCAG 2 pour un texte sur cette couleur : AA demande un contraste de 4,5:1 pour un texte normal et de 3:1 pour un grand texte, AAA demande 7:1. La page calcule le contraste d’un texte blanc et d’un texte noir, une couleur transparente étant d’abord posée sur du blanc, et le tronque à 2 décimales comme le fait WebAIM.
Qu’est-ce que le nom CSS le plus proche ?
Quand la couleur n’est pas l’une des 148 couleurs nommées du CSS, la carte donne la plus proche dans l’espace de couleurs OKLab : #3b82f6 donne ainsi dodgerblue, un autre bleu. Quand la couleur est exactement une couleur nommée, la carte indique « Nom CSS », et le premier nom dans l’ordre alphabétique est donné pour les couleurs qui en ont deux (aqua et cyan, gray et grey).