Aller au contenu

Sélecteur de couleur

Uniquement dans le navigateur HEX · RGB · HSL · HSV · CMYK · OKLCH Pipette d’écran
Couleurs d’exemple
#1E88E5La pipette d’écran n’est pas disponible dans ce navigateur.
Canaux RGBA
Valeurs de couleur
HEX#1E88E5
RGBrgb(30, 136, 229)
HSLhsl(208, 79%, 51%)
HSVhsv(208, 87%, 90%)
CMYKcmyk(87%, 41%, 0%, 10%)
OKLCHoklch(0.618 0.167 251)

Le CMJN (CMYK) est une approximation dérivée du sRGB, sans profil ICC. Pour l’impression, validez les valeurs avec votre imprimeur.
Outils associés Voir tout

Aperçu

Choisissez une couleur et lisez chaque format

Choisissez une couleur depuis le spectre ou échantillonnez un pixel à l’écran, puis copiez-la en HEX, RGB, HSL, HSV, CMYK ou OKLCH. Tout s’exécute dans votre navigateur.

  • Sélecteur de spectre avec curseurs de teinte et alpha
  • Pipette d’écran dans les navigateurs compatibles
  • Six formats de sortie copiables en un clic
  • Champs HEX et canaux pour des valeurs exactes
  • S’exécute entièrement dans votre navigateur
  • S’exécute entièrement dans votre navigateur — rien n’est envoyé
  • Rien n’est stocké ni journalisé sur un serveur
  • Les données de couleur ne quittent jamais votre appareil
  • Choisir une couleur et copier sa valeur HEX, RGB, HSL, HSV, CMYK ou OKLCH
  • Échantillonner une nuance précise à l’écran avec la pipette
  • Convertir une couleur entre HEX, RGB, HSL, HSV, CMYK et OKLCH pour une passation de design
  • Obtenir des valeurs de couleur CSS prêtes à l’emploi pour une feuille de style
  • Faire correspondre une couleur entre les formats HEX, RGB et HSL

Pour commencer

Comment choisir une couleur

  1. 1
    Choisir une nuance

    Glissez dans le carré saturation/luminosité pour régler la vivacité et la clarté. Utilisez les flèches pour des ajustements fins au clavier.

  2. 2
    Définir la teinte

    Déplacez le curseur arc-en-ciel pour choisir la couleur de base, puis utilisez le curseur alpha en dessous si vous avez besoin de transparence.

  3. 3
    Ou saisir une valeur exacte

    Saisissez un code hex dans le champ HEX, ou définissez directement les canaux R, V, B et A pour une saisie précise.

  4. 4
    Échantillonner depuis l’écran

    Dans les navigateurs compatibles, cliquez sur le bouton Pipette pour choisir la couleur de n’importe quel pixel à l’écran.

  5. 5
    Copier le format voulu

    Chaque ligne de valeur — HEX, RGB, HSL, HSV, CMYK, OKLCH — possède un bouton de copie qui place la valeur dans le presse-papiers.

Référence

Référence des formats de couleur

Référence des formats de couleur
FormatExempleIdéal pour
HEX#1E88E5Web et CSS — la notation la plus répandue
RGBrgb(30, 136, 229)Modifications par canal et outils d’image
HSLhsl(208, 79%, 51%)Réglages intuitifs de clarté et de saturation
HSVhsv(208, 87%, 90%)Outils de design avec un axe valeur/luminosité
CMYKcmyk(87%, 41%, 0%, 10%)Point de départ pour l’impression (approximatif, sans ICC)
OKLCHoklch(0.618 0.167 251)Systèmes de design uniformes et équilibrés

Conseils pratiques

Conseils pour travailler la couleur

  • Utilisez OKLCH pour les palettes

    OKLCH étant perceptuellement uniforme, garder sa luminosité fixe en changeant la teinte produit des tons perçus comme également lumineux — utile pour des échelles de design cohérentes.

  • Attention au basculement alpha

    Quand l’alpha passe sous 1, HEX devient 8 caractères (#RRGGBBAA) et RGB/HSL passent en rgba()/hsla(). Remettez l’alpha à 1 pour la notation courte. HSV, CMYK et OKLCH n’incluent pas de composante alpha dans leur sortie.

  • Le CMYK reste indicatif

    La conversion écran-impression dépend du papier, de l’encre et des profils ICC. Utilisez la valeur CMYK pour communiquer l’intention, pas comme spécification finale.

  • Sélection au clavier

    Placez le focus sur le carré du spectre et utilisez les flèches ; maintenez Maj pour de plus grands pas. Les curseurs de teinte et alpha répondent aussi aux flèches.

Questions fréquentes

Comment fonctionne ce sélecteur de couleur ?
Glissez dans le carré saturation/luminosité pour choisir une nuance, puis utilisez le curseur de teinte pour la couleur de base et le curseur alpha pour l’opacité. L’outil convertit votre sélection en HEX, RGB, HSL, HSV, CMYK et OKLCH en temps réel. Tout s’exécute dans votre navigateur.
Puis-je choisir une couleur n’importe où à l’écran ?
Oui, dans les navigateurs compatibles. Cliquez sur le bouton Pipette pour échantillonner n’importe quel pixel à l’écran via l’API EyeDropper native. Le bouton est masqué dans les navigateurs non compatibles ; vous pouvez alors saisir une valeur hex ou utiliser le spectre.
Quelle différence entre HEX, RGB, HSL et OKLCH ?
HEX (#RRGGBB) est le format web le plus courant. RGB définit les canaux rouge, vert et bleu de 0 à 255. HSL utilise teinte, saturation et luminosité, plus intuitif pour beaucoup de designers. OKLCH est un espace moderne perceptuellement uniforme où des valeurs de luminosité égales paraissent également lumineuses, idéal pour des palettes équilibrées.
Comment ajouter de la transparence à une couleur ?
Utilisez le curseur alpha sous le curseur de teinte, ou saisissez une valeur de 0 à 1 dans le champ A. Lorsque l’alpha est inférieur à 1, la valeur HEX passe en 8 caractères (#RRGGBBAA) et RGB/HSL passent en rgba()/hsla().
Pourquoi la valeur CMYK semble-t-elle approximative ?
Le CMYK est calculé mathématiquement depuis le sRGB sans profil ICC : c’est une estimation et non une conversion fidèle à l’impression. Utilisez-la comme point de départ et validez les valeurs finales avec votre imprimeur.
Comment copier une valeur de couleur sur mobile ?
Chaque ligne de format possède un bouton de copie. Appuyez dessus : la valeur passe dans le presse-papiers, avec une confirmation annoncée pour les lecteurs d’écran.