Codes couleurs : HEX, RVB, HSL et noms HTML

Un code couleur sert à reproduire une couleur sur écran ou dans un fichier numérique. Les formats les plus courants sont HEX, RVB/RGB et HSL. Cette page donne des repères simples pour lire un code, convertir visuellement une nuance et retrouver les noms de couleurs les plus fréquents.

Générer une palette Noms des couleurs Nuancier

Convertisseur HEX / RVB / HSL Tester le contraste RVB, CMJN et peinture

Repères techniques

Lire un code couleur sans se tromper

HEX écrit les composantes rouge, vert et bleu en hexadécimal : #FF7F50. RVB écrit les mêmes composantes de 0 à 255 : rgb(255, 127, 80). HSL décrit la teinte en degrés, puis la saturation et la lumière : pratique pour créer des variantes plus claires ou plus foncées.

HEX : pratique pour HTML, CSS et outils design.
RVB/RGB : clair pour comprendre la quantité de rouge, vert et bleu.
HSL : utile pour ajuster teinte, saturation et luminosité.
CMJN : utilisé en impression, à vérifier avec un imprimeur.

Tableau des codes couleurs courants

Utilisez ce tableau comme base de travail pour un site web, une charte graphique, un document ou une palette.

Filtrer :

Nom	Famille	Code HEX	RVB	Usage
Rouge	Primaire chaude	`#E10600` CSS : red	`rgb(225, 6, 0)`	Couleur forte, visible, souvent utilisée pour l’accent et le contraste.
Bleu	Primaire froide	`#0057B8` CSS : blue	`rgb(0, 87, 184)`	Couleur froide, stable et très utilisée en design numérique.
Jaune	Primaire chaude	`#FFD400` CSS : yellow	`rgb(255, 212, 0)`	Couleur lumineuse, efficace en petite dose et avec des neutres.
Orange	Secondaire chaude	`#FF7A00` CSS : orange	`rgb(255, 122, 0)`	Issue du rouge et du jaune, elle donne une palette énergique.
Vert	Secondaire froide	`#2E8B57` CSS : green	`rgb(46, 139, 87)`	Associé au végétal, il équilibre souvent les tons chauds.
Violet	Secondaire froide	`#7F3FBF` CSS : purple	`rgb(127, 63, 191)`	Entre bleu et rouge, il donne des accords créatifs et profonds.
Safran	Jaune-orangé	`#F4C430`	`rgb(244, 196, 48)`	Teinte chaude entre jaune doré et orange ambré.
Rouille	Orangé brun	`#B7410E`	`rgb(183, 65, 14)`	Nuance terreuse, chaleureuse, proche de l’ocre brûlé.
Fuchsia	Rose violet	`#FF00A8` CSS : fuchsia	`rgb(255, 0, 168)`	Couleur vive, proche du magenta, très expressive.
Indigo	Bleu violet	`#4B0082` CSS : indigo	`rgb(75, 0, 130)`	Bleu-violet profond, souvent utilisé comme couleur sombre.
Olive	Vert jaune	`#808000` CSS : olive	`rgb(128, 128, 0)`	Vert assourdi, naturel, facile avec beige, écru et rouille.
Émeraude	Vert soutenu	`#009B77`	`rgb(0, 155, 119)`	Vert précieux, lumineux, entre vert et turquoise.
Gris	Neutre	`#808080` CSS : gray	`rgb(128, 128, 128)`	Neutre de transition, utile pour calmer les couleurs vives.
Noir	Neutre	`#000000` CSS : black	`rgb(0, 0, 0)`	Couleur sombre de contraste, efficace avec des teintes claires.
Blanc	Neutre	`#FFFFFF` CSS : white	`rgb(255, 255, 255)`	Couleur de respiration, utile pour alléger une palette.
Doré	Métallique chaud	`#D4AF37` CSS : gold	`rgb(212, 175, 55)`	Jaune métallique, souvent associé au noir, au bleu nuit ou à l’ivoire.
Rose	Rouge clair	`#F4A7B9` CSS : pink	`rgb(244, 167, 185)`	Version adoucie du rouge, utilisée pour des palettes douces ou florales.
Marron	Brun	`#8B4513` CSS : saddlebrown	`rgb(139, 69, 19)`	Teinte brune terreuse, stable, chaleureuse et naturelle.
Beige	Neutre chaud	`#E6D3B3` CSS : beige	`rgb(230, 211, 179)`	Neutre clair et chaud, facile avec presque toutes les familles.
Turquoise	Bleu vert	`#40E0D0` CSS : turquoise	`rgb(64, 224, 208)`	Entre bleu et vert, frais, lumineux et aquatique.
Cyan	Bleu vert lumineux	`#00FFFF` CSS : cyan	`rgb(0, 255, 255)`	Couleur du modèle RVB/CMJN, très lumineuse à l’écran.
Magenta	Rouge violet	`#FF00FF` CSS : magenta	`rgb(255, 0, 255)`	Couleur primaire en impression, proche du fuchsia numérique.
Bordeaux	Rouge sombre	`#6D071A`	`rgb(109, 7, 26)`	Rouge profond et élégant, souvent associé au crème, au doré ou au bleu nuit.
Kaki	Vert brun	`#8A865D` CSS : khaki	`rgb(138, 134, 93)`	Nuance naturelle entre vert, jaune et brun.
Terracotta	Rouge orangé terreux	`#C65A3A`	`rgb(198, 90, 58)`	Teinte terre cuite, chaude, proche de la rouille et de l’ocre rouge.
Taupe	Gris brun	`#8B7D6B`	`rgb(139, 125, 107)`	Neutre sophistiqué entre gris et brun.
Mauve	Violet clair	`#B784A7`	`rgb(183, 132, 167)`	Violet adouci, facile avec gris, écru et vert sauge.
Lilas	Violet pastel	`#C8A2C8`	`rgb(200, 162, 200)`	Violet très doux, floral, lumineux et peu agressif.
Corail	Rose orangé	`#FF7F50` CSS : coral	`rgb(255, 127, 80)`	Entre rose et orange, chaud, vivant et estival.
Ocre	Jaune brun	`#CC7722`	`rgb(204, 119, 34)`	Jaune terreux, proche des pigments naturels.
Crème	Blanc chaud	`#FFFDD0`	`rgb(255, 253, 208)`	Blanc légèrement jaune, plus doux que le blanc pur.
Ivoire	Blanc cassé	`#FFFFF0` CSS : ivory	`rgb(255, 255, 240)`	Blanc chaud, utile en fond ou avec des tons précieux.
Argent	Métallique froid	`#C0C0C0` CSS : silver	`rgb(192, 192, 192)`	Gris clair métallique, sobre et lumineux.
Bronze	Brun métallique	`#CD7F32`	`rgb(205, 127, 50)`	Métallique chaud entre brun, orange et doré.
Lavande	Violet très clair	`#B57EDC`	`rgb(181, 126, 220)`	Violet clair et frais, entre lilas et mauve.
Bleu marine	Bleu sombre	`#03224C` CSS : navy	`rgb(3, 34, 76)`	Bleu profond, fiable et très lisible avec blanc, or ou corail.

Sources et limites

Les couleurs nommées du web et les notations HEX/RGB/HSL sont liées aux standards CSS. Les rendus peuvent varier selon les écrans, profils colorimétriques et logiciels. Pour l’impression, demandez toujours une conversion CMJN ou une épreuve.

Références techniques utiles : MDN : valeurs CSS de couleur · W3C : CSS Color Module.

Aller du code à la bonne couleur

Un code couleur ne suffit pas toujours : vérifiez le modèle utilisé, le contraste du texte et le rendu final sur le support réel.

Convertir un code Vérifier le contraste Comparer les modèles

Exemple d’utilisation en CSS

Sur un site web, un code couleur est généralement placé dans une feuille CSS. Le même nom visuel peut être décliné en fond, bordure ou texte avec des valeurs différentes pour préserver le contraste.

.bouton { background: #F4C430; color: #111111; }
.fond  { background: #FFFFF0; }
.texte { color: #303030; }

Pourquoi deux écrans peuvent afficher une couleur différemment ?

La luminosité, le calibrage, le type de dalle et le profil couleur influencent l’affichage. Les codes restent indispensables pour transmettre une valeur, mais ils ne garantissent pas une perception identique pour tous les utilisateurs. C’est pour cela qu’il est utile de raisonner aussi en contraste, en clarté et en famille de couleur.