Le chocolat est une teinte chaleureuse de marron, située entre le rouge et le jaune sur le cercle chromatique. Sa nuance riche, qui évoque le chocolat au lait, imprègne de confort et de stabilité.
Le chocolat est défini par les codes et valeurs de couleur suivants pour garantir la cohérence sur diverses plateformes et appareils numériques.
- Code HEX : #713600
- Valeur RVB : 44,3 % rouge, 21,2 % vert, et 0 % bleu
L'accessibilité joue un rôle crucial dans le choix des couleurs en design UX et UI. La communauté Figma propose des plugins pour s'assurer que vos designs respectent les Web Content Accessibility Guidelines.
Voici quelques façons d'utiliser le chocolat dans vos designs :
- Ajoutez de la profondeur. La richesse du marron chocolat est idéale pour créer des ombres et des reflets sur les éléments d'interface, apportant une dimension et une séparation du fond.
- Apportez de la chaleur. Les qualités réconfortantes du chocolat créent une atmosphère accueillante et chaleureuse—parfait pour les cafés ou les boulangeries. Utilisez-le comme couleur d'accent sur les boutons, le texte ou les icônes, associé à des couleurs claires et aérées comme la crème ou le beige pour un look équilibré.
- Créez une interface inspirée de la nature. Pour les marques de plein air promouvant des activités comme le camping, la randonnée ou le jardinage, le marron chocolat crée un lien avec la terre. Il est idéal comme couleur principale ou secondaire, associé à d'autres teintes vertes et nuances neutres pour compléter l'esthétique naturelle.
Gardez à l'esprit que la couleur et sa signification peuvent varier d'une culture à l'autre et à tout moment. Si vous créez une interface pour un public international, renseignez-vous sur la signification des couleurs pour chaque pays concerné.
Pour des variations dans le même spectre riche que le chocolat, considérez :
- Moka (#6D3B07) est un peu plus sombre, rappelant l'infusion de café et de chocolat.
- Le marron (#895129) apporte une touche légèrement plus claire avec la même chaleur.
- Le taupe (#54463A) apparaît plus frais en raison de ses nuances grises.
- Le bordeaux (#550000) partage une richesse similaire, penchant davantage vers le rouge avec des touches subtiles de marron.
Pour compléter le chocolat, envisagez de l'associer avec :
- Le bleu marine (#000080) offre une combinaison de couleurs intemporelle et sophistiquée.
- La crème (#FDFBD4) fournit un fond neutre et apaisant qui permet au chocolat de se démarquer.
- Le vert forêt (#2E6F40) crée une palette harmonieuse avec une sensation naturelle.
- L'orange brûlé (#BE5103) ajoute à la chaleur du chocolat pour créer une palette de couleurs inspirée de l'automne.
- La pêche (#FFD3AC) offre un contraste doux et délicat à côté du marron chocolat.
D'autres couleurs à considérer incluent le bleu clair pour une ambiance détendue, la mandarine pour une touche de vivacité, et la sauge pour une palette de couleurs terreuse.
Bien que le chocolat soit chaleureux, il peut jurer avec :
- Le bleu royal (#305CDE) a une vivacité qui peut créer un contraste trop fort à côté du chocolat.
- Le gris canon (#353E43) peut apparaître terne, perturbant l'ambiance chaleureuse et accueillante du chocolat.
- Le vert-jaune (#CCFF00) manque d'harmonie avec le chocolat en raison de son attrait vibrant.
- Le violet (#7F00FF) est frais et peut créer une combinaison de couleurs déséquilibrée.
Le chocolat incarne la stabilité, la force et la résilience. Il porte également des connotations de luxe et d'indulgence.
En psychologie des couleurs, le chocolat favorise la chaleur et le confort. À l'instar d'un morceau de chocolat décadent ou d'une tasse de chocolat chaud, il évoque également des sentiments de plaisir. En raison de sa connexion avec les tons naturels, le chocolat apporte aussi des sentiments de paix et de tranquillité.
Dans le design d'interface, le chocolat crée une atmosphère chaleureuse et accueillante, idéale pour les applications de cafés ou de boulangeries. Sa richesse est également utile pour ajouter de la profondeur et de la texture aux éléments, ce qui aide à ajouter de l'intérêt visuel à toute interface.
Le nom de couleur « Chocolat » a été enregistré en 1734, inspiré par la teinte de son homonyme. Cependant, le mot « chocolat » est entré dans la langue anglaise vers 1600 après que les Espagnols ont introduit le chocolat au reste de l'Europe.
Dans la Rome antique, les nuances de marron étaient associées à la classe inférieure. Cette connexion a changé lorsque le chocolat est devenu un produit de luxe en Europe, liant la couleur à l'exclusivité. Cela contribue probablement à la perception actuelle du marron chocolat comme une couleur symbolisant l'indulgence et la sophistication.
En dehors de sa connexion avec la friandise sucrée, les tons bruns terreux du chocolat se retrouvent dans la nature. Par exemple, les montagnes Chocolate en Californie du Sud ont été nommées d'après la couleur, car elles semblaient ressembler à des monticules de chocolat pendant les saisons sèches. Aujourd'hui, la polyvalence du chocolat s'étend au-delà de sa connexion naturelle et est utilisée dans la mode, le design, les cosmétiques et l'art.
Variantes de couleur
Nuances
Teintes
Tons
Teintes
Harmonies de couleurs
Complémentaire
Complémentaire fractionnée
Monochrome
Analogue
Triadique
Tétradique
Palettes personnalisées
Gâteau au chocolat
Pierre brune
Charme rustique
Vérificateur de contraste
Contraste 9,42
- Texte en grand format
#713600
- Texte normal
Le mode de conception, d'alignement et de création compte. Utilisez Figma.
| Catégorie | ||
|---|---|---|
Conforme | Conforme | |
Conforme | Conforme | |
Conforme | Conforme |
Contraste 2,23
- Texte en grand format
#713600
- Texte normal
Le mode de conception, d'alignement et de création compte. Utilisez Figma.
| Catégorie | ||
|---|---|---|
Non conforme | Non conforme | |
Non conforme | Non conforme | |
Non conforme | Non conforme |
Simulations de couleurs
Protanopie
Deutéranopie
Tritanopie
Achromatopsie
La couleur hexadécimale #713600, connue sous le nom de Chocolat, a des valeurs RVB de R:113, G:54, B:0 et des valeurs CMJN de C:0, M:52, Y:100, K:56.
| VALUE | CSS | |
|---|---|---|
| HEX | #713600 | #713600 |
| RGB DECIMAL | 113, 54, 0 | RGB(113,54,0) |
| RGB PERCENTAGE | 44.3, 21.2, 0.0 | RGB(44.3%,21.2%,0.0%) |
| CMYK | 0, 52, 100, 56 | |
| HSL | HSL(28.7, 100.0%, 22.2%) | HSL(28.7, 100.0%, 22.2%) |
| HSV (OR HSB) | 28.7°, 100.0, 44.3 | |
| WEB SAFE | #102510 | #102510 |
| BINARY | 01110001, 00110110, 00000000 | |
| iOS - SwiftUI | Color(red: 0.443, green: 0.212, blue: 0.000) | |
| iOS - UIKit | UIColor(red: 0.443, green: 0.212, blue: 0.000, alpha: 1) | |
| Android - Compose | Color(0xFF713600) |
