UI Shades

A study in pink

Tailwind Pink 500

#F6339A

Family
Pink
L
0.656
C
0.240
H
354°

Notes

Tailwind Pink 500 sits at the saturated mid-pink centre of the framework's pink ramp. The hex carries high chroma at mid-high lightness and reads as energetic without being neon. It pulls duty as a primary brand colour for cosmetic, fashion, or youth-targeted products. Against white the body text contrast is borderline at small sizes; headlines and dark text overlays on button surfaces are the safest territory in app interfaces. Body text contrast against white passes AA only at sizes 18px and above; smaller body text drops below the threshold.

#f6339a
Tailwind Pink 500
Tailwind Pink 500
#f6339a
oklch(0.656 0.24 354.32)
rgb(246 51 154)
hsl(328.3 91.5% 58.2%)
Share
#fff2fb
#ffe9f6
#ffd2e8
#ffb8d9
#ff7cbc
#f6339a
#d1007c
#b00066
#820049
#5c0032
#36001a

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

Cross-reference
Q&A

Frequently asked questions

What is Tailwind Pink 500?

Tailwind Pink 500 sits at the saturated mid-pink centre of the framework's pink ramp. The hex carries high chroma at mid-high lightness and reads as energetic without being neon. Its hex code is #F6339A.

What are the tints and shades of Tailwind Pink 500?

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

Its complementary color is #00AD8B. Triadic partners are #909B00 and #009EE4; analogous neighbours are #FF313F and #D44AE1.

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

Tailwind Pink 500 is #F6339A - OKLCH 0.656 0.240 354°, rgb(246 51 154), in the pink family.