What is Tailwind Rose 500 in OKLCH?

Tailwind Rose 500 (#F43F5E) is oklch(0.645 0.215 16.4) in the OKLCH color space.

Is Tailwind Rose 500 WCAG 2.2 AA accessible?

Tailwind Rose 500 passes WCAG 2.2 AA on black for normal text. Contrast ratios: 3.67:1 on white, 5.72:1 on black.

What is the APCA Lc for Tailwind Rose 500?

On white, Tailwind Rose 500 has an APCA Lc of 62.9. On black, Lc is -38.8. APCA is a perceptual contrast model, not a WCAG compliance standard.

How do I use Tailwind Rose 500 in Tailwind?

Paste the snippet above into your tailwind.config (or globals.css with @theme).

How does Tailwind Rose 500 look to people with color vision differences?

Under deuteranopia (most common, around 5 percent of men), Tailwind Rose 500 simulates to #b0be55. Under protanopia it shifts to #a6a456. Under tritanopia it appears as #eb514f. Always pair color with shape, label, or icon for accessibility.

Tailwind CSS token

Tailwind Rose 500 in OKLCH

Quick answer: Tailwind Rose 500 is #F43F5E, which converts to oklch(0.645 0.215 16.40). On white, it has a WCAG contrast ratio of 3.67:1 and an APCA score of Lc +62.85.

This meets the WCAG 2.2 AA Large text threshold (3:1) on white. The color shipped in Tailwind CSS v4.0 (January 2025) as part of the OKLCH default palette, which has 92% global browser support (caniuse, April 2026).

oklch(0.645 0.215 16.40)

Tailwind Rose 500 is a Tailwind utility color. This page frames #F43F5E as a utility stop: copy the generated @theme scale below, or map it into your own tokens.

Specs

oklch(0.645 0.215 16.40)

#F43F5E

Highest contrast: black

5.72:1

Normal AA

Normal AAA

Large AA

Large AAA

Lc -38.83

Try in Studio

Accessibility lens

Base#F43F5E
300#FF8691
500#F43F5E
700#9E002C

Toggle a lens to preview this color under color vision differences.

How does Tailwind Rose 500 go from primitive to component?

Primitive
Semantic
Component

Primitive

The raw value, before it means anything.

hex: #F43F5E
oklch: oklch(0.645 0.215 16.40)

Semantic

Bound to a role token that UI reads by name.

--primary: #F43F5E

One primitive feeds the role. --primary then drives --ring and the hover and active states below, so a single value stays in sync everywhere.

Component

Applied to real UI across states.

AA5.72:1

DefaultSave paletteNew

HoverSave paletteNew

ActiveSave paletteNew

DisabledSave paletteNew

On-color text: black (5.72:1 on #F43F5E).

How does Tailwind Rose 500 scale from 50 to 950?

Tailwind Rose 500

50 to 950

#FFEAEB

#FFCCCE

#FFAAB0

#FF8691

#FF6376

#F43F5E

#CA1A43

#9E002C

#710019

#460008

#1F0000

50oklch(0.954 0.023 14.25)
100oklch(0.890 0.058 15.66)
200oklch(0.822 0.100 14.87)
300oklch(0.757 0.147 15.50)
400oklch(0.704 0.190 16.19)
500oklch(0.645 0.215 16.44)
600oklch(0.541 0.204 16.53)
700oklch(0.443 0.178 17.70)
800oklch(0.347 0.139 19.75)
900oklch(0.249 0.100 22.60)
950oklch(0.150 0.062 29.23)

How does Tailwind Rose 500 score on WCAG 2.2 contrast?

Every fg × bg combination, with WCAG 2.2 verdicts.

AAA (7:1+)

AA (4.5:1+)

Below AA (under 4.5:1)

Hover for APCA

Aa1.00Below AA

Aa1.57Below AA

Aa2.50Below AA

Aa4.87AA

Aa10.62AAA

Aa17.22AAA

Aa1.57Below AA

Aa1.00Below AA

Aa1.59Below AA

Aa3.11Below AA

Aa6.78AA

Aa10.99AAA

Aa2.50Below AA

Aa1.59Below AA

Aa1.00Below AA

Aa1.95Below AA

Aa4.25Below AA

Aa6.90AA

Aa4.87AA

Aa3.11Below AA

Aa1.95Below AA

Aa1.00Below AA

Aa2.18Below AA

Aa3.53Below AA

Aa10.62AAA

Aa6.78AA

Aa4.25Below AA

Aa2.18Below AA

Aa1.00Below AA

Aa1.62Below AA

Aa17.22AAA

Aa10.99AAA

Aa6.90AA

Aa3.53Below AA

Aa1.62Below AA

Aa1.00Below AA

Does Tailwind Rose 500 pass WCAG 2.2 on common neutral backgrounds?

Aa3.67Below AA
White #FFFFFF
Aa3.37Below AA
Neutral 100 #F5F5F5
Aa2.91Below AA
Neutral 200 #E5E5E5
Aa1.46Below AA
Neutral 400 #A3A3A3
Aa2.13Below AA
Neutral 600 #525252
Aa4.88AA
Neutral 900 #171717
Aa5.72AA
Black #000000

What palettes pair with Tailwind Rose 500?

Analogous

#F33FF4
#F43FA9
#F43F5E
#F46B3F
#F4B73F

Complementary

#F8879B
#F43F5E

Triadic

#F43F5E
#CC0C2D
#5EF43F

Where should you use Tailwind Rose 500 in production UI?

bg: primary-50 · border: primary-100

Monthly revenue

$48,219

text: primary-900

+12.4% vs last mo.

badge: primary-100 / primary-700

primary-500

$8.2k

JANFEBMARAPRMAYJUNJUL

bg: primary-600 · fg: white

ONBOARDING · STEP 2

Export your first design system this week.

bg: surface · border: neutral-200

SYSTEM

All systems normal

APIprimary-50 / primary-700Webprimary-50 / primary-700Pluginprimary-50 / primary-700

Tokens

248

+18 this week

overlay: primary-700 → primary-800

"One color system, every screen in sync."

Maya Okafor

Design systems lead

EPISODE 14

Designing color systems that scale

28:14

bg: primary-900

--primary-500

#F43F5E

focus ring: primary-100COMPONENT · INPUT

Search projects…⌘K

button-primary: primary-600button-secondary: primary-50

SETTINGS

Weekly digest

Net new tokens

$15,989

$18,871 last period

Notes on Tailwind Rose 500

Rose 500 reads as a hot pink-red, oklch(0.645 0.215 16.4), warm enough for marketing and energetic UI without tipping into pure alarm red. The contrast picture is split: as text on white it holds only AA Large (3.67:1), so treat it as a large-heading or accent color there, while on a near-black surface it climbs to WCAG 2.2 AA (5.72:1, APCA Lc -38.83) for normal text. The complementary #F8879B is a soft rose for backgrounds, and the analogous run slides warm to coral #F46B3F and amber #F4B73F, a ready gradient. Sit it on cool slate neutrals so the warmth stands out. The accessibility lens is where rose asks for care: protanopia and deuteranopia flatten it to an olive yellow-green (#B0BE55), the classic red-green swap, so a rose success-or-error cue can invert its meaning. Tritanopia keeps it red (#EB514F). Pair it with labels, and do not let rose alone separate positive from negative.

What other Tailwind and shadcn colors relate to Tailwind Rose 500?

More Rose in Tailwind

Nearest hues across families

Browse all colors

@theme {
  --color-primary-50: #ffeaeb;
  --color-primary-100: #ffccce;
  --color-primary-200: #ffaab0;
  --color-primary-300: #ff8691;
  --color-primary-400: #ff6376;
  --color-primary-500: #f43f5e;
  --color-primary-600: #ca1a43;
  --color-primary-700: #9e002c;
  --color-primary-800: #710019;
  --color-primary-900: #460008;
  --color-primary-950: #1f0000;

  --color-secondary-50: #fff1e8;
  --color-secondary-100: #fcdbcc;
  --color-secondary-200: #f6c4ad;
  --color-secondary-300: #f0ae8e;
  --color-secondary-400: #e69872;
  --color-secondary-500: #d9845a;
  --color-secondary-600: #b1633c;
  --color-secondary-700: #884624;
  --color-secondary-800: #5e2c10;
  --color-secondary-900: #381301;
  --color-secondary-950: #150200;

  --color-accent-50: #ffecfc;
  --color-accent-100: #ffd0ec;
  --color-accent-200: #fbb2de;
  --color-accent-300: #f493d0;
  --color-accent-400: #e975c0;
  --color-accent-500: #d95aaf;
  --color-accent-600: #b23c8d;
  --color-accent-700: #8a236b;
  --color-accent-800: #610f4a;
  --color-accent-900: #3b002b;
  --color-accent-950: #18000f;

  --color-neutral-50: #f8f7f7;
  --color-neutral-100: #f1efef;
  --color-neutral-200: #e2dfdf;
  --color-neutral-300: #cac4c5;
  --color-neutral-400: #a99ea0;
  --color-neutral-500: #87787a;
  --color-neutral-600: #675b5d;
  --color-neutral-700: #4c4345;
  --color-neutral-800: #312b2c;
  --color-neutral-900: #1b1818;
  --color-neutral-950: #100e0f;

  --color-success-50: #e6fce9;
  --color-success-100: #c4eaca;
  --color-success-200: #9ddaa7;
  --color-success-300: #74c985;
  --color-success-400: #4ab766;
  --color-success-500: #16a34a;
  --color-success-600: #008330;
  --color-success-700: #00631a;
  --color-success-800: #00440a;
  --color-success-900: #002700;
  --color-success-950: #000d00;

  --color-error-50: #ffebe6;
  --color-error-100: #ffc9c0;
  --color-error-200: #ffa398;
  --color-error-300: #fe7c6f;
  --color-error-400: #f0544a;
  --color-error-500: #dc2626;
  --color-error-600: #b8000a;
  --color-error-700: #910000;
  --color-error-800: #680000;
  --color-error-900: #420000;
  --color-error-950: #200000;

  --color-warning-50: #fff1e1;
  --color-warning-100: #fed9be;
  --color-warning-200: #f9c095;
  --color-warning-300: #f2a66a;
  --color-warning-400: #e78e40;
  --color-warning-500: #d97706;
  --color-warning-600: #b25800;
  --color-warning-700: #893d00;
  --color-warning-800: #612500;
  --color-warning-900: #3a0f00;
  --color-warning-950: #180000;

  --color-info-50: #e6f6ff;
  --color-info-100: #bfdaff;
  --color-info-200: #95bdff;
  --color-info-300: #6ca0ff;
  --color-info-400: #4782fd;
  --color-info-500: #2563eb;
  --color-info-600: #114ac8;
  --color-info-700: #0333a1;
  --color-info-800: #002076;
  --color-info-900: #000e4e;
  --color-info-950: #000129;

  /* Surfaces */
  --color-background: #F8F7F7;
  --color-surface: #FFFFFF;
  --color-elevated: #F8F7F7;
  --color-foreground: #1B1818;
  --color-muted: #87787A;
  --color-border: #E2DFDF;
}

How do you export Tailwind Rose 500 as design tokens?

Export a W3C DTCG token document for the Tailwind Rose 500 50 to 950 scale, ready for Style Dictionary or any DTCG aware pipeline.

Frequently asked questions

Ready to build your color system?

Free forever, no credit card, Pro when you need more.

Built by a product designer who ships to code.

Generate system See pricing

Tailwind Rose 500 in OKLCH

Accessibility lens

How does Tailwind Rose 500 go from primitive to component?

How does Tailwind Rose 500 scale from 50 to 950?

How does Tailwind Rose 500 score on WCAG 2.2 contrast?

Does Tailwind Rose 500 pass WCAG 2.2 on common neutral backgrounds?

What palettes pair with Tailwind Rose 500?

Analogous

Complementary

Triadic

Where should you use Tailwind Rose 500 in production UI?

Notes on Tailwind Rose 500

What other Tailwind and shadcn colors relate to Tailwind Rose 500?

More Rose in Tailwind

Tailwind Rose 600 in OKLCH

Tailwind Rose 700 in OKLCH

Nearest hues across families

shadcn Red in OKLCH

shadcn Orange in OKLCH

Tailwind Amber 700 in OKLCH

Tailwind Amber 600 in OKLCH

How do you export Tailwind Rose 500 as design tokens?

Frequently asked questions

Ready to build your color system?