UI Shades

A study in red

Tailwind Red 500

#FB2C36

Family
Red
L
0.638
C
0.237
H
25°

Notes

Tailwind Red 500 sits at the saturated mid-red centre of the framework's red ramp. The v4 hex was retuned in OKLCH space from the v3 value and reads as slightly cooler and more confident than its predecessor. It handles destructive actions, error states, and high-urgency call-to-action buttons in dashboards and forms. 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.

#fb2c36
Tailwind Red 500
Tailwind Red 500
#fb2c36
oklch(0.638 0.237 25.44)
rgb(251 44 54)
hsl(357.1 96.3% 57.8%)
Share
#fff3f0
#ffebe7
#ffd6d0
#ffbdb5
#ff877e
#fb2c36
#dc0018
#b9000a
#8a0003
#620000
#3a0000

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 Red 500

Cross-reference
Q&A

Frequently asked questions

What is Tailwind Red 500?

Tailwind Red 500 sits at the saturated mid-red centre of the framework's red ramp. The v4 hex was retuned in OKLCH space from the v3 value and reads as slightly cooler and more confident than its predecessor. Its hex code is #FB2C36.

What are the tints and shades of Tailwind Red 500?

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

Its complementary color is #00A1B1. Triadic partners are #00AD00 and #4B7FFF; analogous neighbours are #DA6600 and #EF2D92.

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

Tailwind Red 500 is #FB2C36 - OKLCH 0.638 0.237 25°, rgb(251 44 54), in the red family.