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)
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
Accessibility lens
Protanopia#A6A456
Deuteranopia#B0BE55
Tritanopia#EB514F
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
Where should you use Tailwind Rose 500 in production UI?
bg: primary-50 · border: primary-100primary-500
Monthly revenue
$48,219
text: primary-900 +12.4% vs last mo.
badge: primary-100 / primary-700$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
"Paletta replaced our color brainstorm meetings."
Sora Mehta
Design lead, Northwind
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
What other Tailwind and shadcn colors look like Tailwind Rose 500?
Tailwind Blue 600 in OKLCH
oklch(0.546 0.215 262.90)
Tailwind Slate 500 in OKLCH
oklch(0.554 0.041 257.40)
Tailwind Emerald 400 in OKLCH
oklch(0.773 0.153 163.20)
Tailwind Violet 600 in OKLCH
oklch(0.541 0.247 293.00)
shadcn Primary Blue in OKLCH
oklch(0.623 0.188 259.80)
shadcn Zinc Dark in OKLCH
oklch(0.274 0.005 286.00)
shadcn Slate Accessible in OKLCH
oklch(0.279 0.037 260.00)
shadcn Indigo Custom in OKLCH
oklch(0.585 0.204 277.10)
shadcn Orange in OKLCH
oklch(0.705 0.187 47.60)
@theme { --color-primary-50: #fbe8eb; --color-primary-100: #f4bfc8; --color-primary-200: #ef97a5; --color-primary-300: #e97183; --color-primary-400: #e54f61; --color-primary-500: #e23841; --color-primary-600: #bc2e35; --color-primary-700: #942229; --color-primary-800: #6b181e; --color-primary-900: #430c13; --color-primary-950: #2b070c; --color-secondary-50: #faf0ea; --color-secondary-100: #f2d4c5; --color-secondary-200: #e9b9a1; --color-secondary-300: #e19d7c; --color-secondary-400: #d88257; --color-secondary-500: #d06632; --color-secondary-600: #ad5428; --color-secondary-700: #88421f; --color-secondary-800: #633017; --color-secondary-900: #3e1e0e; --color-secondary-950: #281409; --color-accent-50: #faeaf5; --color-accent-100: #f2c5e3; --color-accent-200: #e9a1d1; --color-accent-300: #e17cbf; --color-accent-400: #d857ad; --color-accent-500: #d0329c; --color-accent-600: #ad2881; --color-accent-700: #881f65; --color-accent-800: #63174a; --color-accent-900: #3e0e2e; --color-accent-950: #28091e; --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: #e9fcf0; --color-success-100: #c1f7d4; --color-success-200: #99f1b9; --color-success-300: #71ec9e; --color-success-400: #49e683; --color-success-500: #21e168; --color-success-600: #19bb55; --color-success-700: #149343; --color-success-800: #0e6b31; --color-success-900: #09431f; --color-success-950: #062c14; --color-error-50: #fbe9e9; --color-error-100: #f5c2c2; --color-error-200: #ef9b9b; --color-error-300: #e97474; --color-error-400: #e24d4d; --color-error-500: #dc2626; --color-error-600: #b71e1e; --color-error-700: #901717; --color-error-800: #691111; --color-error-900: #420b0b; --color-error-950: #2b0707; --color-warning-50: #fef3e6; --color-warning-100: #fddeba; --color-warning-200: #fcc98e; --color-warning-300: #fbb462; --color-warning-400: #f99f36; --color-warning-500: #f8890a; --color-warning-600: #cf7106; --color-warning-700: #a35904; --color-warning-800: #774103; --color-warning-900: #4a2902; --color-warning-950: #301b01; --color-info-50: #e8eefd; --color-info-100: #bed1f9; --color-info-200: #95b3f5; --color-info-300: #6b95f1; --color-info-400: #4277ee; --color-info-500: #185aea; --color-info-600: #1249c3; --color-info-700: #0e3a99; --color-info-800: #0a2a70; --color-info-900: #061a46; --color-info-950: #04112e; /* Surfaces */ --color-background: #F8F7F7; --color-surface: #FFFFFF; --color-elevated: #F8F7F7; --color-foreground: #1B1818; --color-muted: #87787A; --color-border: #E2DFDF; }
Frequently asked questions
Ready to build your color system?
Free forever, no credit card, Pro when you need more.