Sélecteur et Convertisseur de Couleur

Choisissez une couleur ou entrez un code HEX — obtenez instantanément HEX, RGB, HSL, nom CSS et couleur complémentaire.

Résultat instantané Fonctionne dans le navigateur
Code HEX
#3D7EF7
Valeur RGB
rgb(61, 126, 247)
Valeur HSL
hsl(218, 91%, 60%)
Nom CSS
—
Couleur complémentaire
#F7823D

Modèles de couleur

HEX  → #RRGGBB
RGB  → 0–255 per ch.
HSL  → 0–360° / 0–100%
WCAG → min 4.5:1

HEX : standard web pour CSS et design. RGB : basé sur l'écran. HSL : teinte-saturation-luminosité, intuitif pour les designers.

Comment utiliser ?

  1. 1
    Choisir la couleurCliquer sur le sélecteur ou entrer directement un code HEX (ex. : #FF5733).
  2. 2
    Lire les valeursHEX, RGB et HSL sont calculés instantanément ; le nom CSS et la couleur complémentaire s'affichent automatiquement.
  3. 3
    CopierCopier le code couleur souhaité dans le presse-papiers en un clic.

FAQ

Qu'est-ce qu'un code couleur HEX ?
Une valeur hexadécimale à 6 chiffres au format #RRGGBB. Chaque paire représente l'intensité d'un canal (Rouge, Vert, Bleu) de 00 à FF (0–255), permettant 16 777 216 couleurs.
RGB ou HSL — lequel utiliser ?
RGB correspond au matériel d'affichage et est très répandu en CSS. HSL est plus intuitif pour les designers : modifier la luminosité sans changer la teinte. Les deux sont pleinement pris en charge en CSS moderne.
À quoi sert la couleur complémentaire ?
La couleur complémentaire se situe à 180° sur la roue chromatique et crée le contraste maximal. Idéale pour les boutons d'appel à l'action, la visualisation de données et les designs percutants.

Les codes couleur du web : HEX, RGB et HSL

En développement web, les couleurs sont définies via trois formats principaux : HEX, RGB et HSL. Cet outil convertit instantanément n'importe quelle couleur dans ces trois formats et affiche également le nom CSS et la couleur complémentaire.

Codes couleur HEX

HEX est le format de couleur le plus courant sur le web. Il s'écrit #RRGGBB, chaque paire représentant l'intensité d'un canal (Rouge, Vert, Bleu) de 00 à FF (0–255). Avec 256 valeurs par canal, HEX permet 16 777 216 couleurs. La notation abrégée à 3 chiffres (#RGB) est aussi valide : #F06 → #FF0066. HEX est utilisé dans CSS (color: #FF5733;), Figma, Adobe XD et tous les outils de design.

Modèle de couleur RGB

RGB (Rouge-Vert-Bleu) reflète la structure physique des écrans. Chaque canal prend des valeurs de 0 à 255. En CSS : rgb(255, 87, 51) ou avec transparence rgba(255, 87, 51, 0.8).

Modèle de couleur HSL

HSL (Teinte-Saturation-Luminosité) est plus intuitif pour les designers. Teinte (Hue) : 0–360° sur la roue chromatique — 0°=rouge, 60°=jaune, 120°=vert, 180°=cyan, 240°=bleu, 300°=magenta. Saturation : 0%=gris, 100%=couleur vive. Luminosité : 0%=noir, 50%=normale, 100%=blanc. Créer des teintes claires ou foncées est simple : conserver teinte et saturation, ajuster la luminosité.

Couleurs complémentaires

Les couleurs complémentaires sont à 180° l'une de l'autre sur la roue chromatique et créent le contraste maximal : Rouge ↔ Cyan, Vert ↔ Magenta, Bleu ↔ Jaune. Elles sont utilisées pour les boutons CTA, la visualisation de données et les designs à fort impact visuel.

Accessibilité web (WCAG)

Environ 8 % des hommes et 0,5 % des femmes ont un déficit de vision des couleurs. WCAG 2.1 AA exige un ratio de contraste d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Ne jamais transmettre une information uniquement par la couleur.

Couleurs CSS nommées

CSS définit 148 couleurs nommées (red, navy, coral, teal, etc.). Cet outil les reconnaît automatiquement. Elles améliorent la lisibilité CSS mais ne couvrent qu'une fraction des 16,7 millions de couleurs possibles.

Confidentialité

Tous les calculs s'effectuent localement dans votre navigateur. Aucune donnée n'est envoyée à un serveur.

Commentaires