Aller au contenu

Sélecteur de couleur en ligne

Choisissez n'importe quelle couleur dans le carré ou collez un code et copiez sa valeur en HEX, RGB, HSL ou OKLCH. Avec nuances, tons, harmonies et une pipette pour prendre des couleurs à l'écran.

Conversion de couleur

Consultez le code de cette couleur dans dix formats distincts, prêts à copier.

Comment choisir et convertir une couleur

Le sélecteur de couleur permet de trouver une couleur exacte de trois façons : en cliquant dans le carré de saturation et de luminosité, en faisant glisser la teinte sur la barre inférieure, ou en saisissant un code Hex, RGB, HSL ou OKLCH que vous connaissez déjà.

Contrairement à la roue chromatique, pensée pour explorer des harmonies en tournant une roue, cet outil sert quand vous avez déjà une couleur précise en tête et avez besoin de son code exact ou de la convertir dans un autre format, pour CSS, pour l'impression ou tout autre usage.

Comment utiliser le sélecteur de couleur

  1. 1. Choisissez la teinte

    Faites glisser le curseur de la barre de couleurs pour choisir la teinte : rouges, jaunes, verts, bleus… C'est le tour complet de la roue chromatique, de 0° à 360°.

  2. 2. Réglez saturation et luminosité

    Dans le grand carré, déplacez le point vers la droite pour une couleur plus intense et vers le haut pour une couleur plus lumineuse. Tout en bas, c'est toujours le noir.

  3. 3. Copiez le code

    Choisissez le format (HEX, RGB, HSL ou OKLCH) et copiez-le en un clic. Si vous avez déjà un code, collez-le dans le champ du haut et le sélecteur se place sur cette couleur.

Quel format de couleur utiliser

Voici #2C71DE dans les formats les plus courants, et à quoi sert chacun.

HEX#2C71DELe standard en CSS, HTML et dans les outils de design comme Figma : six chiffres hexadécimaux.
RGBrgb(44, 113, 222)Rouge, vert et bleu de 0 à 255. Utile dans le code et quand vous avez besoin de transparence.
HSLhsl(217, 73%, 52%)Teinte, saturation et luminosité. Le plus pratique pour créer des variantes plus claires ou plus foncées d'une couleur.
HSV / HSBhsv(217 80 87)Teinte, saturation et valeur (aussi HSB). C'est le modèle du carré du sélecteur et de nombreux logiciels de design.
OKLCHoklch(0.5663 0.1805 259.49)Le format moderne de CSS : la luminosité est perçue de façon uniforme, idéal pour les échelles et les systèmes de couleurs.
CMYKC80 M49 Y0 K13Cyan, magenta, jaune et noir pour l'impression. C'est une conversion approximative : vérifiez-la avec votre imprimeur.

Capturez n'importe quelle couleur à l'écran

Avec la pipette, vous pouvez capturer la couleur exacte de tout ce que vous avez ouvert : un site, une capture, un document… Cliquez sur l'icône de la pipette, cliquez où vous voulez et le sélecteur vous donne son code instantanément.

Elle fonctionne sur Chrome, Edge et les autres navigateurs de bureau basés sur Chromium. Si la couleur se trouve dans une photo, importez-la dans le sélecteur de couleur d'image et extrayez sa palette complète.

Ouvrir le sélecteur de couleur d'image

Plus de 16 millions de couleurs

Le chiffre peut paraître exagéré, mais un moniteur moderne peut afficher 16 777 216 couleurs différentes.

Cela vient du système RGB, qui utilise trois canaux de couleur :

  • Rouge (Red)
  • Vert (Green)
  • Bleu (Blue)

Chaque canal peut prendre une valeur entre 0 et 255.

En combinant ces trois valeurs, on obtient exactement :

256 × 256 × 256 = 16 777 216 couleurs.

Même si beaucoup se ressemblent, cette vaste gamme vous permet de trouver le ton exact dont vous avez besoin, avec une précision remarquable, quel que soit votre projet.

C'est là qu'un bon sélecteur de couleurs devient indispensable.

Questions fréquentes

C'est un outil pour choisir une couleur visuellement, avec un carré de saturation et de luminosité et une barre de teinte, et obtenir son code exact en HEX, RGB, HSL ou d'autres formats pour l'utiliser en design ou dans le code.

C'est la façon d'écrire une couleur avec six chiffres hexadécimaux après le dièse : deux pour le rouge, deux pour le vert et deux pour le bleu. Par exemple, #2C71DE.

Saisissez le Hex dans le sélecteur. Le tableau de conversion affiche automatiquement RGB, HSL, HSV, OKLCH et CMJN, prêts à copier.

HSL utilise la luminosité, c'est-à-dire le mélange avec du blanc ou du noir, et HSB (aussi appelé HSV) utilise la brillance, ou valeur. Les deux partent de la teinte et de la saturation, mais le troisième axe se calcule différemment : une même couleur peut donc afficher des chiffres différents selon le modèle.

OKLCH est un espace colorimétrique perceptuel : L (luminosité), C (chroma) et H (teinte) correspondent à la façon dont nous voyons réellement la couleur. RGB décrit la lumière de l'écran (rouge, vert, bleu) et HSL réorganise ce même modèle de façon plus intuitive, mais aucun ne garantit que deux couleurs de même luminosité paraissent aussi claires. OKLCH, si, ce qui permet de créer des palettes plus uniformes et des dégradés plus naturels.

Le CMJN (cyan, magenta, jaune et noir) est le modèle de l'impression : il mélange des encres sur papier. Votre écran fonctionne en RGB, c'est-à-dire en lumière. Le sélecteur affiche le code CMJN pour préparer un document destiné à l'impression ou un PDF prêt à imprimer. À l'écran, le bon format reste RGB, Hex, HSL ou OKLCH.

Utilisez la pipette du sélecteur pour capturer n'importe quel pixel de votre écran (sur Chrome et Edge pour ordinateur). Si la couleur se trouve dans une photo, importez-la dans le sélecteur de couleur d'image.

Outils associés