Guide pratique · Couleur numérique & décoration
Comment traduire une teinte choisie pour un intérieur en couleur numérique ? Ce guide explique les principaux codes du Web, aide à construire une palette lisible et montre pourquoi une couleur à l’écran ne remplace jamais un échantillon réel.
Comprendre les formats
Une même couleur, plusieurs écritures
Sur le Web, une couleur peut être exprimée de plusieurs manières. Les formats HEX, RGB et HSL peuvent décrire exactement la même teinte dans l’espace colorimétrique sRGB : seule leur écriture change.
#D4AF37
HEX : compact et répandu
Le code commence par #, suivi de six caractères. Les deux premiers représentent le rouge, les deux suivants le vert et les deux derniers le bleu.
rgb(212, 175, 55)
RGB/RVB : les composantes
Chaque canal reçoit une valeur comprise entre 0 et 255. Cette notation permet de lire directement les quantités de rouge, de vert et de bleu.
hsl(46 64% 52%)
HSL : créer des variantes
La teinte est exprimée en degrés, puis viennent la saturation et la luminosité. C’est un format pratique pour composer une famille cohérente.
À ne pas confondre
HEX et RGB concernent principalement l’affichage. Le CMJN est destiné à l’impression, tandis que RAL ou Pantone servent de références dans d’autres contextes professionnels. Une conversion automatique fournit une approximation, pas une identité absolue entre les supports.
Référence rapide
Mémo de 16 couleurs HTML et CSS utiles
Les noms CSS sont toujours écrits en anglais. Pour une identité visuelle précise, préférez cependant les valeurs HEX ou RGB : le mot « beige » ne peut pas représenter toutes les nuances utilisées en décoration.
| Couleur | Nom CSS | HEX | RGB / RVB |
|---|---|---|---|
| Noir | black | #000000 | 0, 0, 0 |
| Blanc | white | #FFFFFF | 255, 255, 255 |
| Beige | beige | #F5F5DC | 245, 245, 220 |
| Lin | linen | #FAF0E6 | 250, 240, 230 |
| Corail | coral | #FF7F50 | 255, 127, 80 |
| Terre cuite | sienna | #A0522D | 160, 82, 45 |
| Or | gold | #FFD700 | 255, 215, 0 |
| Olive | olive | #808000 | 128, 128, 0 |
| Vert sauge | darkseagreen | #8FBC8F | 143, 188, 143 |
| Vert forêt | forestgreen | #228B22 | 34, 139, 34 |
| Sarcelle | teal | #008080 | 0, 128, 128 |
| Bleu acier | steelblue | #4682B4 | 70, 130, 180 |
| Bleu marine | navy | #000080 | 0, 0, 128 |
| Indigo | indigo | #4B0082 | 75, 0, 130 |
| Violet | purple | #800080 | 128, 0, 128 |
| Cramoisi | crimson | #DC143C | 220, 20, 60 |
Besoin d’une valeur précise ? Accédez au convertisseur de couleurs plutôt que de parcourir une liste interminable.
La différence essentielle
De la matière à l’écran : traduire sans prétendre reproduire
Une photographie de peinture, de tissu, de bois ou de pierre ne restitue jamais parfaitement la couleur réelle. L’éclairage, la balance des blancs, les reflets, l’appareil photo et l’écran modifient tous le résultat.
- Choisissez la matière ou la peinture dans les conditions réelles du projet.
- Photographiez l’échantillon sous une lumière neutre, sans reflet.
- Prélevez plusieurs points plutôt qu’un seul pixel.
- Créez une traduction numérique représentative de l’ambiance.
- Testez la palette sur plusieurs écrans et avec les vrais textes.
Lisibilité
Contraste et accessibilité : une belle couleur doit rester lisible
Une palette réussie n’est pas seulement harmonieuse. Le texte doit conserver un contraste suffisant avec son fond. Les recommandations WCAG retiennent notamment un rapport minimal de 4,5:1 pour le texte courant et de 3:1 pour le grand texte.
Contraste lisible
Un texte foncé sur un fond clair reste confortable à lire.
Contraste insuffisant
Deux teintes trop proches fatiguent la lecture et masquent l’information.
- Ne transmettez jamais une information uniquement par la couleur.
- Vérifiez les liens, boutons, messages d’erreur et états de focus.
- Contrôlez aussi les textes placés sur des photographies.
- Testez la page au clavier et avec un agrandissement du texte.
Pour aller plus loin, consultez notre démarche d’accessibilité numérique et la documentation du W3C sur le contraste minimum.
Méthode professionnelle
Construire une palette qui sert réellement votre projet
Commencez par les usages et les matières, pas par une collection de jolies valeurs HEX. Une palette courte et hiérarchisée est plus facile à appliquer dans un intérieur comme dans une identité numérique.
Définir l’ambiance
Calme, chaleureuse, graphique ou naturelle : formulez d’abord l’effet recherché.
Choisir la dominante
Elle porte l’identité du projet et occupe généralement la plus grande surface.
Ajouter les équilibres
Une teinte secondaire et un accent suffisent souvent à structurer l’ensemble.
Tester les usages
Vérifiez lumière, matières, texte, contraste et cohérence entre les supports.
Pour comprendre les harmonies, consultez le guide du cercle chromatique appliqué à la décoration et nos conseils pour bien associer les couleurs dans un intérieur.
Questions fréquentes
HEX, RGB et couleurs numériques
HEX et RGB donnent-ils exactement la même couleur ?
Oui, lorsqu’ils décrivent les mêmes composantes dans l’espace sRGB. #D4AF37 et rgb(212, 175, 55) sont deux écritures de la même valeur.
Quelle notation choisir dans une feuille CSS ?
HEX est compact, RGB facilite le travail sur les composantes et la transparence, tandis que HSL est pratique pour créer des variantes. La cohérence du projet compte davantage que le choix d’un format unique.
Peut-on convertir exactement une couleur d’écran en peinture ?
Non. L’écran émet de la lumière alors qu’une peinture la réfléchit. Une conversion aide à se rapprocher d’une teinte, mais le choix final doit être validé avec un échantillon physique placé dans la pièce.
Pourquoi une couleur change-t-elle selon les écrans ?
La luminosité, le contraste, la technologie de dalle, le profil colorimétrique et les réglages varient. Deux écrans non calibrés ne donnent donc pas toujours la même impression visuelle.
Comment extraire une couleur depuis une photo ?
Utilisez une pipette dans un logiciel d’image ou un navigateur, puis prélevez plusieurs points. Les ombres et reflets créent des variations : choisissez une valeur représentative et testez-la dans son contexte.