What is Tailwind Blue 600 in OKLCH?

Tailwind Blue 600 (#2563EB) is oklch(0.546 0.215 262.9) in the OKLCH color space.

Is Tailwind Blue 600 WCAG 2.2 AA accessible?

Tailwind Blue 600 passes WCAG 2.2 AA on white for normal text. Contrast ratios: 5.17:1 on white, 4.06:1 on black.

What is the APCA Lc for Tailwind Blue 600?

On white, Tailwind Blue 600 has an APCA Lc of 74.9. On black, Lc is -26.9. APCA is a perceptual contrast model, not a WCAG compliance standard.

How do I use Tailwind Blue 600 in Tailwind?

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

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

Under deuteranopia (most common, around 5 percent of men), Tailwind Blue 600 simulates to #3c38c2. Under protanopia it shifts to #4040ca. Under tritanopia it appears as #28b0aa. Always pair color with shape, label, or icon for accessibility.

Tailwind CSS token

Tailwind Blue 600 in OKLCH

Quick answer: Tailwind Blue 600 is #2563EB, which converts to oklch(0.546 0.215 262.90). On white, it has a WCAG contrast ratio of 5.17:1 and an APCA score of Lc +74.86.

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.546 0.215 262.90)

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

Specs

oklch(0.546 0.215 262.90)

#2563EB

Highest contrast: white

5.17:1

Normal AA

Normal AAA

Large AA

Large AAA

Lc +74.86

Try in Studio

Accessibility lens

Base#2563EB
300#6CA0FF
500#2563EB
700#0333A1

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

How does Tailwind Blue 600 go from primitive to component?

Primitive
Semantic
Component

Primitive

The raw value, before it means anything.

hex: #2563EB
oklch: oklch(0.546 0.215 262.90)

Semantic

Bound to a role token that UI reads by name.

--primary: #2563EB

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.17:1

DefaultSave paletteNew

HoverSave paletteNew

ActiveSave paletteNew

DisabledSave paletteNew

On-color text: white (5.17:1 on #2563EB).

How does Tailwind Blue 600 scale from 50 to 950?

Tailwind Blue 600

50 to 950

#E6F6FF

#BFDAFF

#95BDFF

#6CA0FF

#4782FD

#2563EB

#114AC8

#0333A1

#002076

#000E4E

#000129

50oklch(0.964 0.021 232.12)
100oklch(0.881 0.059 256.32)
200oklch(0.794 0.104 260.20)
300oklch(0.712 0.150 261.60)
400oklch(0.632 0.194 262.84)
500oklch(0.546 0.215 262.88)
600oklch(0.463 0.204 262.86)
700oklch(0.380 0.183 262.94)
800oklch(0.297 0.150 263.03)
900oklch(0.215 0.117 263.67)
950oklch(0.131 0.085 264.20)

How does Tailwind Blue 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.73Below AA

Aa3.23Below AA

Aa6.69AA

Aa12.93AAA

Aa18.32AAA

Aa1.73Below AA

Aa1.00Below AA

Aa1.87Below AA

Aa3.88Below AA

Aa7.49AAA

Aa10.61AAA

Aa3.23Below AA

Aa1.87Below AA

Aa1.00Below AA

Aa2.07Below AA

Aa4.00Below AA

Aa5.67AA

Aa6.69AA

Aa3.88Below AA

Aa2.07Below AA

Aa1.00Below AA

Aa1.93Below AA

Aa2.74Below AA

Aa12.93AAA

Aa7.49AAA

Aa4.00Below AA

Aa1.93Below AA

Aa1.00Below AA

Aa1.42Below AA

Aa18.32AAA

Aa10.61AAA

Aa5.67AA

Aa2.74Below AA

Aa1.42Below AA

Aa1.00Below AA

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

Aa5.17AA
White #FFFFFF
Aa4.74AA
Neutral 100 #F5F5F5
Aa4.10Below AA
Neutral 200 #E5E5E5
Aa2.05Below AA
Neutral 400 #A3A3A3
Aa1.51Below AA
Neutral 600 #525252
Aa3.47Below AA
Neutral 900 #171717
Aa4.06Below AA
Black #000000

What palettes pair with Tailwind Blue 600?

Analogous

#25EBCE
#25B5EB
#2563EB
#3A25EB
#8C25EB

Complementary

#6B95F1
#2563EB

Triadic

#2563EB
#0F3EA5
#EB2563

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

#2563EB

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

Blue 600 is the workhorse primary for most Tailwind builds, dark enough to carry solid buttons and links yet saturated enough to still read as brand blue rather than navy. At oklch(0.546 0.215 262.9) it keeps real chroma, so it holds its identity across the whole 50 to 950 ramp. As body text on white it meets WCAG 2.2 AA (5.17:1, APCA Lc +74.86), which covers links and form labels; the same swatch on a near-black surface slips to AA Large (4.06:1), so keep it for headings or chunky UI in dark mode. The triad anchors on a deep #0F3EA5 and answers with a warm #EB2563, while the softer complementary #6B95F1 suits hover and visited states. Rest all of it on Tailwind Slate neutrals for chrome. Red-green color vision keeps it clearly blue (protanopia simulates near #4040CA), but tritanopia drags it toward teal (#28B0AA), so never let a blue-versus-teal cue carry meaning on its own.

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

More Blue in Tailwind

Nearest hues across families

Browse all colors

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

  --color-secondary-50: #f2f2ff;
  --color-secondary-100: #d0d0ff;
  --color-secondary-200: #b0adfc;
  --color-secondary-300: #928af3;
  --color-secondary-400: #7667e3;
  --color-secondary-500: #5d43cd;
  --color-secondary-600: #4a2daf;
  --color-secondary-700: #381b8d;
  --color-secondary-800: #270e68;
  --color-secondary-900: #160345;
  --color-secondary-950: #080025;

  --color-accent-50: #e6f9fe;
  --color-accent-100: #caebf4;
  --color-accent-200: #a8deec;
  --color-accent-300: #85d0e4;
  --color-accent-400: #64c2da;
  --color-accent-500: #43b3cd;
  --color-accent-600: #1a8ea6;
  --color-accent-700: #006a7e;
  --color-accent-800: #004757;
  --color-accent-900: #002732;
  --color-accent-950: #000a12;

  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #efeff1;
  --color-neutral-200: #dfe0e2;
  --color-neutral-300: #c4c6ca;
  --color-neutral-400: #9ea1a9;
  --color-neutral-500: #787d87;
  --color-neutral-600: #5b5f67;
  --color-neutral-700: #43464c;
  --color-neutral-800: #2b2d31;
  --color-neutral-900: #18191b;
  --color-neutral-950: #0e0f10;

  --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: #F7F7F8;
  --color-surface: #FFFFFF;
  --color-elevated: #F7F7F8;
  --color-foreground: #18191B;
  --color-muted: #787D87;
  --color-border: #DFE0E2;
}

How do you export Tailwind Blue 600 as design tokens?

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

Accessibility lens

How does Tailwind Blue 600 go from primitive to component?

How does Tailwind Blue 600 scale from 50 to 950?

How does Tailwind Blue 600 score on WCAG 2.2 contrast?

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

What palettes pair with Tailwind Blue 600?

Analogous

Complementary

Triadic

Where should you use Tailwind Blue 600 in production UI?

Notes on Tailwind Blue 600

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

More Blue in Tailwind

Tailwind Blue 500 in OKLCH

Tailwind Blue 700 in OKLCH

Nearest hues across families

shadcn Slate Accessible in OKLCH

shadcn Primary Blue in OKLCH

Tailwind Slate 500 in OKLCH

Tailwind Slate 600 in OKLCH

How do you export Tailwind Blue 600 as design tokens?

Frequently asked questions

Ready to build your color system?