UI Shades

A study in orange

Orange

#FFA500

Family
Orange
L
0.793
C
0.171
H
71°

Notes

Orange is the warm, mid-saturation orange of citrus fruit at peak ripeness. The CSS hex carries high lightness and chroma, making it one of the more energetic mid-tones in the spec. Cultural associations are appetite, energy, autumn, warmth. Food, sports, and outdoor products use it as a primary brand colour. Pair with deep navy or charcoal for type contrast; placing it next to bright red produces visual conflict. Body text contrast against white falls below AA at body sizes - text use lives at headline sizes, with dark text overlays whenever it appears as a surface or button.

#ffa500
Orange
Orange
#ffa500
oklch(0.793 0.171 70.67)
rgb(255 165 0)
hsl(38.8 100% 50%)
Share
#fff7e3
#ffefcd
#ffdba2
#ffc46b
#ffa500
#c57700
#a56100
#894f00
#653700
#472300
#291000

See your palette on a real UI - coming soon

Preview these shades across buttons, cards, and components in a live interface.

Plate 02

Palette built around Orange

Cross-reference
Q&A

Frequently asked questions

What is Orange?

Orange is the warm, mid-saturation orange of citrus fruit at peak ripeness. The CSS hex carries high lightness and chroma, making it one of the more energetic mid-tones in the spec. Its hex code is #FFA500.

What are the tints and shades of Orange?

uishades builds an 11-step OKLCH ramp for Orange (#FFA500) - its lightest tints through its darkest shades - plus an 11-stop Tailwind scale (50–950), both keyed to the same 50–950 stops. Lightness steps stay evenly spaced and the hue stays stable, so the mid-tones don't go muddy.

What colors pair well with Orange?

Its complementary color is #78C1FF. Triadic partners are #00DAD3 and #DE99FF; analogous neighbours are #D4BD00 and #FF986E.

What are the OKLCH and RGB values of Orange?

Orange is #FFA500 - OKLCH 0.793 0.171 71°, rgb(255 165 0), in the orange family.