HexCode

Color Family

Orange

Optimistic warmth suited for onboarding flows, fintech activations, and brand reveals.

OptimisticEnergeticInventive

Positioning DNA

Orange embodies momentum. It feels friendlier than pure Red yet still commands attention, which is why fintech onramps, climate tech dashboards, and subscription upsells often anchor to Orange gradients.

Use Orange 500-600 for buttons that must pop on both light and dark surfaces. Orange 100-200 makes excellent chart fills because it holds saturation even when opacity drops.

Browse directory →Read journal →

UX Applications

  • Onboarding flows or celebratory moments
  • Interactive charts that highlight growth metrics
  • Marketing sites for hardware, mobility, or climate tech

Sample Palette

Drop-in hex codes with usage notes

Orange 700

#c2410c

Headline gradients and CTA backgrounds

Orange 500

#f97316

Buttons and pills with instant visibility

Orange 200

#fed7aa

Chart fills and empty states

FAQ

How do I prevent Orange from feeling cheap?

Pair it with deep charcoals or Stone neutrals, and cap saturation around 500-600 for UI. Save the brightest steps for motion or micro highlights.

Is Orange accessible on dark backgrounds?

Orange 500 on Slate 900 hits a 6.8:1 ratio. For lighter Oranges, add an outer glow or subtle border to keep edges crisp.