La mandarine est une couleur vive, inspirée des agrumes, qui capture l'essence de son fruit éponyme avec des qualités lumineuses et joyeuses. Elle se situe entre le jaune et le rouge sur la roue chromatique, rayonnant d'une ambiance espiègle et dynamique.
La mandarine est définie par les codes et valeurs de couleur suivants pour garantir la cohérence sur diverses plateformes et appareils numériques.
- Code HEX : #FFA800
- Valeur RVB : 100 % rouge, 65,9 % 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 la mandarine dans vos designs :
- Créer un point focal. La vivacité de la mandarine attire l'attention sur des zones clés, comme les boutons d'appel à l'action, guidant les utilisateurs vers des informations importantes.
- Évoquer la positivité et l'esprit ludique. Les qualités joyeuses de la mandarine améliorent l'expérience utilisateur. Considérez-la pour les arrière-plans, en-têtes ou icônes associés à la gaieté ou à la joie.
- Établir une hiérarchie avec le contraste. Associez la mandarine à des tons froids pour un effet saisissant ou sur des fonds clairs pour des accents subtils mais percutants.
- Utiliser des accents de manière stratégique. La mandarine brille en tant qu'accent, mais utilisez-la avec parcimonie pour un impact maximal sans surcharger le design.
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 énergétique que la mandarine, considérez :
- L'orange (#FFA500) offre une sensation légèrement moins intense et plus fraîche.
- Le jaune-orange (#FFB343) apporte une touche de jaune supplémentaire, ajoutant un peu plus de soleil avec une pointe d'agrume.
- L'ambre (#FFBF00) est une teinte plus profonde, offrant une touche de sophistication tout en conservant la chaleur.
- La mimosa (#F2B949) a une base orange avec une vivacité légèrement réduite.
Pour compléter la mandarine, envisagez de l'associer à :
- Le vert d'eau (#8DDCDC) crée un contraste vibrant avec la mandarine, comme une plage tropicale au coucher du soleil.
- Le bleu royal (#305CDE) fait ressortir la mandarine, créant une combinaison dramatique et énergique.
- Le rose (#FF8DA1) ajoute une touche de fantaisie et d'esprit ludique à la mandarine, parfait pour des designs féminins ou jeunes.
- Le jaune pastel (#FFEE8C) crée une combinaison joyeuse et harmonieuse avec la mandarine.
D'autres couleurs à considérer sont le noir et le blanc pour une base épurée, la lavande pour ajouter une touche de fantaisie, ou le taupe pour créer une ambiance chaleureuse et terreuse, parfaite pour des palettes inspirées de l'automne.
Bien que la mandarine soit chaude et lumineuse, elle peut entrer en dissonance avec :
- Le vert néon (#2CFF05) jure avec la mandarine, comme une enseigne néon contre un coucher de soleil—tous deux sont vibrants mais pas nécessairement harmonieux.
- Le bleu marine (#000080) peut éclipser la chaleur de la mandarine, résultant en une sensation froide et peu accueillante.
- Le rouge (#FF2C2C) est audacieux et accrocheur, ce qui peut submerger la mandarine, provoquant un chaos visuel et une difficulté de concentration.
- Le pourpre (#9D00FF) crée un contraste maladroit avec la chaleur de la mandarine, résultant en un aspect disjoint et désagréable.
La teinte orange vibrante de la mandarine symbolise l'abondance, la prospérité et la chance. La tradition du Nouvel An chinois de l'offrande de mandarines reflète ce symbolisme, car la forme ronde et la couleur vive de la mandarine évoquent les pièces de monnaie et la richesse. La mandarine peut également représenter l'énergie, l'enthousiasme et la créativité. Sa nature espiègle et joyeuse reflète une jeunesse pleine de vie.
En psychologie des couleurs, les tons chauds de la mandarine évoquent des sentiments de bonheur, d'optimisme et de stimulation. L'exposition à la mandarine peut créer un sentiment de chaleur et de convivialité, mais une trop grande quantité de mandarine peut avoir l'effet inverse, provoquant une surstimulation ou une hyperactivité.
Pour le design d'interface, la mandarine peut créer une expérience utilisateur positive et engageante. Elle peut être utilisée pour encourager l'interaction des utilisateurs ou promouvoir la créativité et l'engagement social. Cependant, soyez attentif au potentiel de surstimulation. De grandes zones de mandarine ou une utilisation mal équilibrée avec des couleurs en dissonance peuvent submerger les utilisateurs, rendant la navigation dans l'interface difficile.
La couleur vibrante mandarine tire son nom du fruit, qui décrivait à l'origine un type de mandarine de Tanger, au Maroc. La couleur a hérité de ce nom vers 1710 alors que le fruit devenait plus largement disponible et populaire en Europe.
Dans l'Égypte ancienne, des teintes jaune-orange similaires à la mandarine étaient utilisées dans les peintures de tombes, symbolisant potentiellement la chaleur et la vie. En Asie, des couleurs similaires ont été associées à la prospérité et à la bonne fortune.
Aujourd'hui, elle continue d'être un choix de couleur populaire pour sa capacité à évoquer un sentiment de gaieté et de créativité.
Variantes de couleur
Nuances
Teintes
Tons
Teintes
Harmonies de couleurs
Complémentaire
Complémentaire fractionnée
Monochrome
Analogue
Triadique
Tétradique
Palettes personnalisées
Récolte dorée
Soleil de midi
Courge orange
Vérificateur de contraste
Contraste 1,93
- Texte en grand format
#FFA800
- 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 |
Contraste 10,85
- Texte en grand format
#FFA800
- Texte normal
Le mode de conception, d'alignement et de création compte. Utilisez Figma.
| Catégorie | ||
|---|---|---|
Conforme | Conforme | |
Conforme | Conforme | |
Conforme | Conforme |
Simulations de couleurs
Protanopie
Deutéranopie
Tritanopie
Achromatopsie
La couleur hexadécimale #ffa800, connue sous le nom de Mandarine, a des valeurs RVB de R:255, G:168, B:0 et des valeurs CMJN de C:0, M:34, Y:100, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #ffa800 | #ffa800 |
| RGB DECIMAL | 255, 168, 0 | RGB(255,168,0) |
| RGB PERCENTAGE | 100.0, 65.9, 0.0 | RGB(100.0%,65.9%,0.0%) |
| CMYK | 0, 34, 100, 0 | |
| HSL | HSL(39.5, 100.0%, 50.0%) | HSL(39.5, 100.0%, 50.0%) |
| HSV (OR HSB) | 39.5°, 100.0, 100.0 | |
| WEB SAFE | #2551530 | #2551530 |
| BINARY | 11111111, 10101000, 00000000 | |
| iOS - SwiftUI | Color(red: 1.000, green: 0.659, blue: 0.000) | |
| iOS - UIKit | UIColor(red: 1.000, green: 0.659, blue: 0.000, alpha: 1) | |
| Android - Compose | Color(0xFFFFA800) |
