UI Shades

A study in orange

Tailwind Orange 500

#FC7100

Family
Orange
L
0.706
C
0.193
H
48°

Notes

Tailwind Orange 500 anchors the framework's orange ramp at mid-saturation. The hex carries high chroma at mid-high lightness and reads as energetic and warm. It pulls duty as a primary brand colour for food, sports, or outdoor products, and as a high-emphasis call-to-action button. Against white the body text contrast is borderline at small sizes; larger sizes are safest and dark text overlays the clean option on button surfaces. Body text contrast against white passes AA only at sizes 18px and above; smaller body text needs the 600 stop or darker.

#fc7100
Tailwind Orange 500
Tailwind Orange 500
#fc7100
oklch(0.706 0.193 47.68)
rgb(252 113 0)
hsl(26.9 100% 49.4%)
Share
#fff4e8
#ffecdc
#ffd8be
#ffc09a
#fc7100
#e65800
#c04600
#a03700
#772400
#551400
#320500

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 Tailwind Orange 500

Cross-reference
Q&A

Frequently asked questions

What is Tailwind Orange 500?

Tailwind Orange 500 anchors the framework's orange ramp at mid-saturation. The hex carries high chroma at mid-high lightness and reads as energetic and warm. Its hex code is #FC7100.

What are the tints and shades of Tailwind Orange 500?

uishades builds an 11-step OKLCH ramp for Tailwind Orange 500 (#FC7100) - 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 Tailwind Orange 500?

Its complementary color is #00B1ED. Triadic partners are #00C08B and #9D88FF; analogous neighbours are #D89000 and #FF6272.

What are the OKLCH and RGB values of Tailwind Orange 500?

Tailwind Orange 500 is #FC7100 - OKLCH 0.706 0.193 48°, rgb(252 113 0), in the orange family.