What is Tailwind Rose 700 in OKLCH?

Tailwind Rose 700 (#BE123C) is oklch(0.514 0.198 16.9) in the OKLCH color space.

Is Tailwind Rose 700 WCAG 2.2 AA accessible?

Tailwind Rose 700 passes WCAG 2.2 AA on white for normal text. Contrast ratios: 6.29:1 on white, 3.34:1 on black.

What is the APCA Lc for Tailwind Rose 700?

On white, Tailwind Rose 700 has an APCA Lc of 79.2. On black, Lc is -22.6. APCA is a perceptual contrast model, not a WCAG compliance standard.

How do I use Tailwind Rose 700 in Tailwind?

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

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

Under deuteranopia (most common, around 5 percent of men), Tailwind Rose 700 simulates to #7e8a2f. Under protanopia it shifts to #747232. Under tritanopia it appears as #b52a28. Always pair color with shape, label, or icon for accessibility.

Tailwind CSS token

Tailwind Rose 700 in OKLCH

Quick answer: Tailwind Rose 700 is #BE123C, which converts to oklch(0.514 0.198 16.90). On white, it has a WCAG contrast ratio of 6.29:1 and an APCA score of Lc +79.17.

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.514 0.198 16.90)

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

Specs

oklch(0.514 0.198 16.90)

#BE123C

Highest contrast: white

6.29:1

Normal AA

Normal AAA

Large AA

Large AAA

Lc +79.17

Try in Studio

Accessibility lens

Base#BE123C
300#EB737C
500#BE123C
700#7E001A

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

How does Tailwind Rose 700 go from primitive to component?

Primitive
Semantic
Component

Primitive

The raw value, before it means anything.

hex: #BE123C
oklch: oklch(0.514 0.198 16.90)

Semantic

Bound to a role token that UI reads by name.

--primary: #BE123C

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.

AA6.29:1

DefaultSave paletteNew

HoverSave paletteNew

ActiveSave paletteNew

DisabledSave paletteNew

On-color text: white (6.29:1 on #BE123C).

How does Tailwind Rose 700 scale from 50 to 950?

Tailwind Rose 700

50 to 950

#FFEBEC

#FFC5C7

#F89DA1

#EB737C

#D7485A

#BE123C

#9F002A

#7E001A

#5C000E

#3B0005

#1E0000

50oklch(0.956 0.022 14.06)
100oklch(0.876 0.066 16.20)
200oklch(0.789 0.109 16.98)
300oklch(0.698 0.148 17.06)
400oklch(0.605 0.178 17.03)
500oklch(0.514 0.198 16.93)
600oklch(0.445 0.178 18.64)
700oklch(0.375 0.151 21.11)
800oklch(0.300 0.121 22.38)
900oklch(0.222 0.090 23.36)
950oklch(0.148 0.061 29.23)

How does Tailwind Rose 700 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.78Below AA

Aa3.70Below AA

Aa7.32AAA

Aa12.55AAA

Aa17.39AAA

Aa1.78Below AA

Aa1.00Below AA

Aa2.08Below AA

Aa4.12Below AA

Aa7.07AAA

Aa9.79AAA

Aa3.70Below AA

Aa2.08Below AA

Aa1.00Below AA

Aa1.98Below AA

Aa3.40Below AA

Aa4.70AA

Aa7.32AAA

Aa4.12Below AA

Aa1.98Below AA

Aa1.00Below AA

Aa1.72Below AA

Aa2.38Below AA

Aa12.55AAA

Aa7.07AAA

Aa3.40Below AA

Aa1.72Below AA

Aa1.00Below AA

Aa1.38Below AA

Aa17.39AAA

Aa9.79AAA

Aa4.70AA

Aa2.38Below AA

Aa1.38Below AA

Aa1.00Below AA

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

Aa6.29AA
White #FFFFFF
Aa5.76AA
Neutral 100 #F5F5F5
Aa4.99AA
Neutral 200 #E5E5E5
Aa2.49Below AA
Neutral 400 #A3A3A3
Aa1.24Below AA
Neutral 600 #525252
Aa2.85Below AA
Neutral 900 #171717
Aa3.34Below AA
Black #000000

What palettes pair with Tailwind Rose 700?

Analogous

#B112BE
#BE1284
#BE123C
#BE3012
#BE7712

Complementary

#EB315F
#BE123C

Triadic

#BE123C
#6A0A22
#3CBE12

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

#BE123C

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 700

Rose 700 is a deep crimson, oklch(0.514 0.198 16.9), less pink and more wine than the mid stops, which gives it gravity for destructive buttons and serious accent work. On white it is strong, WCAG 2.2 AA for normal text (6.29:1, APCA Lc +79.17), so #BE123C carries small delete labels and error copy on a light page without strain. Dark mode is the weak side, AA Large only (3.34:1), so keep those uses large on near-black. The complementary #EB315F is a brighter rose for hover, the analogous #BE3012 shifts toward rust, and the triad answers with a green #3CBE12. Set it on cool slate so the crimson stays rich rather than muddy. Under the accessibility lens it follows the rose pattern: protanopia and deuteranopia pull it to a dark olive (#7E8A2F), so a crimson-versus-green cue is unreliable, while tritanopia holds it red (#B52A28). Reinforce any destructive meaning with a label.

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

More Rose in Tailwind

Nearest hues across families

Browse all colors

@theme {
  --color-primary-50: #ffebec;
  --color-primary-100: #ffc5c7;
  --color-primary-200: #f89da1;
  --color-primary-300: #eb737c;
  --color-primary-400: #d7485a;
  --color-primary-500: #be123c;
  --color-primary-600: #9f002a;
  --color-primary-700: #7e001a;
  --color-primary-800: #5c000e;
  --color-primary-900: #3b0005;
  --color-primary-950: #1e0000;

  --color-secondary-50: #fff0e9;
  --color-secondary-100: #f3cec2;
  --color-secondary-200: #e3ac9a;
  --color-secondary-300: #d28a72;
  --color-secondary-400: #bc6a4e;
  --color-secondary-500: #a44b2c;
  --color-secondary-600: #883618;
  --color-secondary-700: #6b2408;
  --color-secondary-800: #4d1602;
  --color-secondary-900: #300800;
  --color-secondary-950: #160100;

  --color-accent-50: #ffecfd;
  --color-accent-100: #f5c7e4;
  --color-accent-200: #e5a0cd;
  --color-accent-300: #d379b6;
  --color-accent-400: #be539e;
  --color-accent-500: #a42c85;
  --color-accent-600: #88156d;
  --color-accent-700: #6b0154;
  --color-accent-800: #4d003c;
  --color-accent-900: #310025;
  --color-accent-950: #170010;

  --color-neutral-50: #f8f7f7;
  --color-neutral-100: #f1efef;
  --color-neutral-200: #e2dfdf;
  --color-neutral-300: #cac4c5;
  --color-neutral-400: #a99ea0;
  --color-neutral-500: #87787c;
  --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: #87787C;
  --color-border: #E2DFDF;
}

How do you export Tailwind Rose 700 as design tokens?

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

Accessibility lens

How does Tailwind Rose 700 go from primitive to component?

How does Tailwind Rose 700 scale from 50 to 950?

How does Tailwind Rose 700 score on WCAG 2.2 contrast?

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

What palettes pair with Tailwind Rose 700?

Analogous

Complementary

Triadic

Where should you use Tailwind Rose 700 in production UI?

Notes on Tailwind Rose 700

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

More Rose in Tailwind

Tailwind Rose 500 in OKLCH

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

Frequently asked questions

Ready to build your color system?