Naviguer jusqu'au contenu principal

Orange

Tout ce que vous devez savoir sur l'orange pour inspirer votre prochain design.

Obtenir la palette de couleurs

Choisir une couleur

Hex

RGB

HSB

HSL

Sélectionnez les paramètres de la palette

Palettes personnalisées

L'orange est la couleur secondaire vibrante située entre le rouge et le jaune sur la roue chromatique. Utilisée dans les bons contextes, elle évoque un esprit ludique et une excitation palpable. Vous pouvez créer des nuances plus claires et joyeuses d'orange en ajoutant plus de jaune ou un orange plus intense et profond en ajoutant plus de rouge.

color Orangecolor Orange

Pour garantir une cohérence sur plusieurs plateformes et appareils, utilisez les codes couleur spécifiques liés à l'orange.

  • Code HEX : #FFA500
  • Valeur RGB : 100 % rouge, 64,7 % 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 l'orange dans vos designs :

  • Indiquer des zones importantes ou cliquables. Utilisez l'orange pour des éléments qui doivent être dynamiques et engageants, comme les effets de survol ou d'autres éléments interactifs.
  • Mettre en avant les appels à l'action. Associez l'orange à un fond neutre pour faire ressortir le texte ou les boutons.
  • Guider les spectateurs avec des accents. Utilisez l'orange pour des accents dans les icônes ou illustrations afin d'ajouter une touche de couleur et guider le regard du spectateur.
  • Indiquer la progression avec des indices visuels. L'orange peut être utilisé pour indiquer une progression positive ou l'achèvement de tâches, formulaires ou processus dans l'interface.

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 l'orange, considérez :

  • Le rouge (#FF2C2C) est une couleur audacieuse et stimulante qui correspond à la chaleur énergétique de l'orange.
  • Le rouge-orangé (#FF4B33) est une infusion d'orange avec l'intensité ardente du rouge, le rendant plus audacieux et dramatique.
  • Le jaune-orangé (#FFB800) capitalise sur l'essence joyeuse de l'orange avec une touche plus légère.
  • L'orange foncé (#C76E00) partage la chaleur de l'orange mais avec une intensité plus profonde.

L'orange se marie magnifiquement avec des palettes de couleurs qui rehaussent ou atténuent sa vivacité, comme les bleus profonds ou les crèmes neutres. Pour compléter l'orange, envisagez de l'associer à :

  • Le bleu marine (#000080) est une couleur complémentaire qui contraste bien avec l'orange.
  • Le charbon (#4A4A4A) est polyvalent et mature, ce qui s'accorde bien avec l'énergie vibrante et joyeuse de l'orange.
  • La crème (#FDFBD4) crée une chaleur naturelle lorsqu'elle est associée à l'orange.
  • Le noir (#000000) offre une déclaration audacieuse et dramatique pour tout design.

Des accents plus vifs comme le bleu canard ou le violet créent également des palettes de couleurs audacieuses avec l'orange. Bien qu'ils fassent plus de déclaration, ces couleurs ajoutent une touche d'énergie et s'inscrivent dans l'esprit ludique de l'orange.

Bien que l'orange soit vif et audacieux, il peut jurer avec :

  • Le vert néon (#2CFF05) peut créer un contraste visuel extrême lorsqu'il est associé à l'orange.
  • Le marron (#895129) associé à l'orange peut rendre un design plat car il n'y a pas assez de contraste pour faire ressortir l'une ou l'autre couleur.
  • Le fuchsia (#FE3894) avec l'orange peut créer un look intense où l'orange semble en désaccord avec le fuchsia vibrant.
  • Le vert émeraude (#00674F) et l'orange créent un contraste fort qui peut être déroutant. C'est comme présenter deux énergies opposées à la fois.

L'énergie vibrante de l'orange capture l'esprit de l'enthousiasme et symbolise l'amitié, le bonheur et même la prospérité. À travers diverses cultures, l'orange revêt des significations variées. Dans la mythologie grecque, les dieux vêtus d'orange représentaient souvent l'immortalité, tandis que dans les religions orientales comme l'hindouisme et le bouddhisme, l'orange est vénéré comme une couleur sacrée.

Les psychologues des couleurs associent souvent l'orange à des émotions et des attitudes qui inspirent l'action ou l'optimisme. Cela inclut l'encouragement à la créativité, à l'expression de soi et à un esprit ludique.

Dans le design d'interface, l'orange est fréquemment utilisé pour inciter à l'action via des boutons CTA, transmettre des avertissements ou des alertes, et mettre en avant des informations critiques. Son énergie vibrante donne une impression amicale et créative, ce qui en fait un choix populaire pour les marques avec des identités similaires, comme Dunkin' Donuts ou Reese's.

Le mot "orange" dérive du mot persan ancien "nārang", qui fait référence au fruit de l'orange amère. Le mot anglais "orange" est également apparu au XIIe siècle et a probablement été dérivé du mot français "orenge".

Cette couleur intense était une favorite parmi les artistes comme Vincent van Gogh. Vous pouvez trouver des représentations de l'orange dans une variété de ses peintures.

L'orange a connu un autre moment de gloire au cours du XXe siècle lorsqu'elle était principalement utilisée pour les décorations de scène théâtrale et les embellissements de costumes. Une fois que la teinture est devenue plus commercialement disponible, elle a été associée à l'accessibilité et à la joie.

Variantes de couleur

Nuances

Teintes

Tons

Teintes

Harmonies de couleurs

Complémentaire

Complémentaire fractionnée

Monochrome

Analogue

Triadique

Tétradique

Palettes personnalisées

Infusion d'agrumes

Citrine céleste

Renaissance du Phénix

Vérificateur de contraste

Contraste 1,97

Texte en grand format

#FFA500

Texte normal

Le mode de conception, d'alignement et de création compte. Utilisez Figma.

Il s'agit d'un texte #FFA500 sur un arrière-plan #FFFFFF.
Catégorie
Non conforme
Non conforme
Non conforme
Non conforme
Non conforme
Non conforme

Contraste 10,63

Texte en grand format

#FFA500

Texte normal

Le mode de conception, d'alignement et de création compte. Utilisez Figma.

Il s'agit d'un texte #FFA500 sur un arrière-plan #000000.
Catégorie
Conforme
Conforme
Conforme
Conforme
Conforme
Conforme

Simulations de couleurs

Protanopie

Deutéranopie

Tritanopie

Achromatopsie

La couleur hexadécimale #ffa500, connue sous le nom de Orange, a des valeurs RVB de R:255, G:165, B:0 et des valeurs CMJN de C:0, M:35, Y:100, K:0.

VALUECSS
HEX#ffa500#ffa500
RGB DECIMAL255, 165, 0RGB(255,165,0)
RGB PERCENTAGE100.0, 64.7, 0.0RGB(100.0%,64.7%,0.0%)
CMYK0, 35, 100, 0
HSLHSL(38.8, 100.0%, 50.0%)HSL(38.8, 100.0%, 50.0%)
HSV (OR HSB)38.8°, 100.0, 100.0
WEB SAFE#2551530#2551530
BINARY11111111, 10100101, 00000000
iOS - SwiftUIColor(red: 1.000, green: 0.647, blue: 0.000)
iOS - UIKitUIColor(red: 1.000, green: 0.647, blue: 0.000, alpha: 1)
Android - ComposeColor(0xFFFFA500)