paletta
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
Try in Studio

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

What other Tailwind and shadcn colors look like Tailwind Rose 500?

@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.

Built by a product designer who ships to code.

Generate system See pricing