What is Tailwind Rose 600 in OKLCH?

Tailwind Rose 600 (#E11D48) is oklch(0.586 0.222 17.6) in the OKLCH color space.

Is Tailwind Rose 600 WCAG 2.2 AA accessible?

Tailwind Rose 600 passes WCAG 2.2 AA on white for normal text. Contrast ratios: 4.7:1 on white, 4.47:1 on black.

What is the APCA Lc for Tailwind Rose 600?

On white, Tailwind Rose 600 has an APCA Lc of 70.5. On black, Lc is -31.2. APCA is a perceptual contrast model, not a WCAG compliance standard.

How do I use Tailwind Rose 600 in Tailwind?

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

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

Under deuteranopia (most common, around 5 percent of men), Tailwind Rose 600 simulates to #98a63b. Under protanopia it shifts to #8c8a3e. Under tritanopia it appears as #d73534. Always pair color with shape, label, or icon for accessibility.

Tailwind CSS token

Tailwind Rose 600 in OKLCH

Quick answer: Tailwind Rose 600 is #E11D48, which converts to oklch(0.586 0.222 17.60). On white, it has a WCAG contrast ratio of 4.70:1 and an APCA score of Lc +70.50.

This meets the WCAG 2.2 AA Normal text threshold (4.5: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.586 0.222 17.60)

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

Specs

oklch(0.586 0.222 17.60)

#E11D48

Highest contrast: white

4.70:1

Normal AA

Normal AAA

Large AA

Large AAA

Lc +70.50

Try in Studio

Accessibility lens

Base#E11D48
300#FF7983
500#E11D48
700#94001F

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

How does Tailwind Rose 600 go from primitive to component?

Primitive
Semantic
Component

Primitive

The raw value, before it means anything.

hex: #E11D48
oklch: oklch(0.586 0.222 17.60)

Semantic

Bound to a role token that UI reads by name.

--primary: #E11D48

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.

AA4.70:1

DefaultSave paletteNew

HoverSave paletteNew

ActiveSave paletteNew

DisabledSave paletteNew

On-color text: white (4.70:1 on #E11D48).

How does Tailwind Rose 600 scale from 50 to 950?

Tailwind Rose 600

50 to 950

#FFEAEA

#FFC8C9

#FFA2A6

#FF7983

#F45064

#E11D48

#BC0031

#94001F

#6A0010

#430004

#200000

50oklch(0.954 0.023 17.56)
100oklch(0.882 0.063 17.20)
200oklch(0.806 0.111 17.02)
300oklch(0.735 0.163 17.38)
400oklch(0.662 0.199 17.56)
500oklch(0.586 0.222 17.58)
600oklch(0.503 0.202 19.44)
700oklch(0.421 0.170 21.59)
800oklch(0.331 0.134 23.17)
900oklch(0.241 0.098 25.47)
950oklch(0.153 0.063 29.23)

How does Tailwind Rose 600 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.66Below AA

Aa2.95Below AA

Aa5.72AA

Aa11.24AAA

Aa17.16AAA

Aa1.66Below AA

Aa1.00Below AA

Aa1.78Below AA

Aa3.45Below AA

Aa6.77AA

Aa10.34AAA

Aa2.95Below AA

Aa1.78Below AA

Aa1.00Below AA

Aa1.94Below AA

Aa3.81Below AA

Aa5.82AA

Aa5.72AA

Aa3.45Below AA

Aa1.94Below AA

Aa1.00Below AA

Aa1.96Below AA

Aa3.00Below AA

Aa11.24AAA

Aa6.77AA

Aa3.81Below AA

Aa1.96Below AA

Aa1.00Below AA

Aa1.53Below AA

Aa17.16AAA

Aa10.34AAA

Aa5.82AA

Aa3.00Below AA

Aa1.53Below AA

Aa1.00Below AA

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

Aa4.70AA
White #FFFFFF
Aa4.31Below AA
Neutral 100 #F5F5F5
Aa3.73Below AA
Neutral 200 #E5E5E5
Aa1.86Below AA
Neutral 400 #A3A3A3
Aa1.66Below AA
Neutral 600 #525252
Aa3.82Below AA
Neutral 900 #171717
Aa4.47Below AA
Black #000000

What palettes pair with Tailwind Rose 600?

Analogous

#D71DE1
#E11D9A
#E11D48
#E1441D
#E1951D

Complementary

#EB607E
#E11D48

Triadic

#E11D48
#90132E
#48E11D

Where should you use Tailwind Rose 600 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

#E11D48

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 600

Rose 600 is the balanced middle of the rose family, oklch(0.586 0.222 17.6), a confident raspberry red that suits primary destructive actions and bold accents. It is one of the rare stops that reads close to the same both ways: as text on white it just clears WCAG 2.2 AA for normal text (4.7:1, APCA Lc +70.5), and on a near-black surface it sits at AA Large (4.47:1), a hair under the AA line, so favor light backgrounds for small copy and size up in dark mode. The complementary #EB607E is a softer rose for hovers, and the triad swings from a deep #90132E to a green #48E11D. Cool slate neutrals keep it from feeling sweet. The accessibility lens is the thing to plan around: protanopia and deuteranopia drain it to olive (#98A63B), the familiar red-green collapse, though tritanopia keeps it red (#D73534). If rose marks danger, add an icon and a word so the meaning survives without the color.

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

More Rose in Tailwind

Nearest hues across families

Browse all colors

@theme {
  --color-primary-50: #ffeaea;
  --color-primary-100: #ffc8c9;
  --color-primary-200: #ffa2a6;
  --color-primary-300: #ff7983;
  --color-primary-400: #f45064;
  --color-primary-500: #e11d48;
  --color-primary-600: #bc0031;
  --color-primary-700: #94001f;
  --color-primary-800: #6a0010;
  --color-primary-900: #430004;
  --color-primary-950: #200000;

  --color-secondary-50: #fff0e7;
  --color-secondary-100: #fad3c5;
  --color-secondary-200: #f1b6a0;
  --color-secondary-300: #e6987b;
  --color-secondary-400: #d77c59;
  --color-secondary-500: #c4613a;
  --color-secondary-600: #a14721;
  --color-secondary-700: #7e300d;
  --color-secondary-800: #591c01;
  --color-secondary-900: #370a00;
  --color-secondary-950: #180000;

  --color-accent-50: #ffebfd;
  --color-accent-100: #fdcae9;
  --color-accent-200: #f4a6d7;
  --color-accent-300: #e981c6;
  --color-accent-400: #d85db2;
  --color-accent-500: #c43a9d;
  --color-accent-600: #a21e80;
  --color-accent-700: #7f0362;
  --color-accent-800: #5a0045;
  --color-accent-900: #380029;
  --color-accent-950: #190010;

  --color-neutral-50: #f8f7f7;
  --color-neutral-100: #f1efef;
  --color-neutral-200: #e2dfdf;
  --color-neutral-300: #cac4c5;
  --color-neutral-400: #a99ea0;
  --color-neutral-500: #87787b;
  --color-neutral-600: #675b5e;
  --color-neutral-700: #4c4345;
  --color-neutral-800: #312b2c;
  --color-neutral-900: #1b1819;
  --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: #1B1819;
  --color-muted: #87787B;
  --color-border: #E2DFDF;
}

How do you export Tailwind Rose 600 as design tokens?

Export a W3C DTCG token document for the Tailwind Rose 600 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 600 in OKLCH

Accessibility lens

How does Tailwind Rose 600 go from primitive to component?

How does Tailwind Rose 600 scale from 50 to 950?

How does Tailwind Rose 600 score on WCAG 2.2 contrast?

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

What palettes pair with Tailwind Rose 600?

Analogous

Complementary

Triadic

Where should you use Tailwind Rose 600 in production UI?

Notes on Tailwind Rose 600

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

More Rose in Tailwind

Tailwind Rose 500 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 600 as design tokens?

Frequently asked questions

Ready to build your color system?