Sélecteur de couleur HEX

HEX colour picker

Préréglages courants

Choisissez une couleur avec le contrôle visuel du navigateur ou saisissez une valeur HEX à trois ou six chiffres. Le sélecteur la convertit en RGB, HSL et CMYK approximatif, puis calcule sa luminance relative et ses rapports de contraste exacts sur blanc et noir. La couleur est traitée dans ce navigateur et n’est pas ajoutée à l’URL du parcours.

Comment choisir une couleur

  1. 1

    Commencez par un exemple ou le contrôle couleur

    Choisissez une couleur proposée ou ouvrez le sélecteur natif de votre navigateur.

  2. 2

    Saisissez une valeur HEX exacte

    Tapez trois chiffres comme #F60 ou six comme #FF6600. Le format court est développé correctement.

  3. 3

    Consultez les formats calculés

    Retrouvez ensemble HEX, RGB, HSL, CMYK estimé et luminance relative sRGB.

  4. 4

    Vérifiez le contraste et copiez

    Comparez la couleur au blanc et au noir, puis copiez la valeur HEX, RGB ou HSL utile.

Les notations de couleur en pratique

Chaque modèle colorimétrique répond à une question légèrement différente.

Référence des notations

Notation Composants Utilisation courante
HEX #RRGGBB CSS, outils de design, chartes de marque
RGB rouge 0–255, vert 0–255, bleu 0–255 CSS rgb(), retouche d’image
HSL teinte 0–360°, saturation %, luminosité % CSS hsl(), systèmes de design
CMYK cyan %, magenta %, jaune %, key/noir % Impression, prépresse

Contraste d’accessibilité

WCAG 2.2 définit les rapports de contraste minimaux entre texte et arrière-plan :

  • AA pour le texte normal : ≥ 4,5:1
  • AA pour le grand texte (18 pt ou 14 pt en gras) : ≥ 3:1
  • AAA pour le texte normal : ≥ 7:1

Le sélecteur calcule en temps réel le rapport sur blanc et sur noir. Si une couleur de premier plan personnalisée est critique, vérifiez chaque paire avec un outil de contrôle de contraste dédié.

Conseils

  • HEX est le format par défaut de la plupart des outils de design, mais le raccourci hexadécimal à trois caractères (#F60) équivaut à #FF6600, pas à #F06060.
  • HSL est plus pratique pour créer des palettes : verrouillez la teinte, puis variez la luminosité pour obtenir des tons clairs et foncés.
  • CMYK et RGB ne se convertissent jamais parfaitement, le rendu CMYK imprimé dépend du profil de presse. Validez toujours une épreuve sur papier réel.
  • Pour le CSS moderne, envisagez OKLCH afin d’obtenir des paliers de luminosité visuellement réguliers.

Questions fréquentes

Photoshop applique un profil colorimétrique, généralement sRGB pour l’écran et souvent un profil différent pour l’impression. Les navigateurs interprètent les valeurs HEX non balisées comme du sRGB. Si votre document est réglé sur Adobe RGB ou ProPhoto, les valeurs de pixels restent identiques, mais la couleur perçue change.

Oui, les deux décrivent un rouge pur : rouge à 255, vert et bleu à 0. HEX est simplement une notation hexadécimale à deux chiffres pour chaque valeur de canal entre 0 et 255.

Choisissez la couleur principale et copiez sa valeur HSL. Dans CSS ou votre logiciel de création, gardez teinte et saturation fixes et ajustez la luminosité. Vérifiez chaque paire premier plan/arrière-plan.

La couleur actuelle reste jusqu’à 30 minutes dans cet onglet afin de suivre les étapes guidées. Elle n’est ni ajoutée à l’URL ni transmise par nos serveurs. Recommencer, fermer l’onglet, effacer les données du navigateur ou attendre l’expiration la supprime.

Outils similaires