What is Tailwind Blue 500 in OKLCH?

Tailwind Blue 500 (#3B82F6) is oklch(0.623 0.188 259.8) in the OKLCH color space.

Is Tailwind Blue 500 WCAG 2.2 AA accessible?

Tailwind Blue 500 passes WCAG 2.2 AA on black for normal text. Contrast ratios: 3.68:1 on white, 5.71:1 on black.

What is the APCA Lc for Tailwind Blue 500?

On white, Tailwind Blue 500 has an APCA Lc of 63.9. On black, Lc is -37.8. APCA is a perceptual contrast model, not a WCAG compliance standard.

How do I use Tailwind Blue 500 in Tailwind?

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

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

Under deuteranopia (most common, around 5 percent of men), Tailwind Blue 500 simulates to #5650d3. Under protanopia it shifts to #5a5ada. Under tritanopia it appears as #3fc4bf. Always pair color with shape, label, or icon for accessibility.

Tailwind CSS token

Tailwind Blue 500 in OKLCH

Quick answer: Tailwind Blue 500 is #3B82F6, which converts to oklch(0.623 0.188 259.80). On white, it has a WCAG contrast ratio of 3.68:1 and an APCA score of Lc +63.89.

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.623 0.188 259.80)

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

Also see

#3B82F6 is documented from more than one angle. This page frames it as a Tailwind utility. The same hex is also covered here:

shadcn Primary Blue (shadcn theme token framing)

Specs

oklch(0.623 0.188 259.80)

#3B82F6

Highest contrast: black

5.71:1

Normal AA

Normal AAA

Large AA

Large AAA

Lc -37.78

Try in Studio

Accessibility lens

Base#3B82F6
300#7BB2FF
500#3B82F6
700#0B48A4

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

How does Tailwind Blue 500 go from primitive to component?

Primitive
Semantic
Component

Primitive

The raw value, before it means anything.

hex: #3B82F6
oklch: oklch(0.623 0.188 259.80)

Semantic

Bound to a role token that UI reads by name.

--primary: #3B82F6

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

DefaultSave paletteNew

HoverSave paletteNew

ActiveSave paletteNew

DisabledSave paletteNew

On-color text: black (5.71:1 on #3B82F6).

How does Tailwind Blue 500 scale from 50 to 950?

Tailwind Blue 500

50 to 950

#E7F6FF

#C5E0FF

#A0C9FF

#7BB2FF

#5A9AFF

#3B82F6

#2164CF

#0B48A4

#002F76

#00174C

#000325

50oklch(0.965 0.020 233.85)
100oklch(0.897 0.052 251.98)
200oklch(0.826 0.088 255.49)
300oklch(0.757 0.126 256.93)
400oklch(0.691 0.163 259.18)
500oklch(0.623 0.188 259.81)
600oklch(0.525 0.179 259.79)
700oklch(0.426 0.160 259.76)
800oklch(0.328 0.131 259.59)
900oklch(0.231 0.103 261.49)
950oklch(0.132 0.074 263.86)

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

Aa2.54Below AA

Aa5.02AA

Aa11.40AAA

Aa18.30AAA

Aa1.55Below AA

Aa1.00Below AA

Aa1.64Below AA

Aa3.24Below AA

Aa7.37AAA

Aa11.82AAA

Aa2.54Below AA

Aa1.64Below AA

Aa1.00Below AA

Aa1.98Below AA

Aa4.50Below AA

Aa7.21AAA

Aa5.02AA

Aa3.24Below AA

Aa1.98Below AA

Aa1.00Below AA

Aa2.27Below AA

Aa3.64Below AA

Aa11.40AAA

Aa7.37AAA

Aa4.50Below AA

Aa2.27Below AA

Aa1.00Below AA

Aa1.60Below AA

Aa18.30AAA

Aa11.82AAA

Aa7.21AAA

Aa3.64Below AA

Aa1.60Below AA

Aa1.00Below AA

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

Aa3.68Below AA
White #FFFFFF
Aa3.37Below AA
Neutral 100 #F5F5F5
Aa2.92Below AA
Neutral 200 #E5E5E5
Aa1.46Below AA
Neutral 400 #A3A3A3
Aa2.12Below AA
Neutral 600 #525252
Aa4.87AA
Neutral 900 #171717
Aa5.71AA
Black #000000

What palettes pair with Tailwind Blue 500?

Analogous

#3BF6CE
#3BD0F6
#3B82F6
#423BF6
#903BF6

Complementary

#84B1F9
#3B82F6

Triadic

#3B82F6
#0953CC
#F63B82

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

#3B82F6

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 500

Blue 500 is the default blue you get from bg-blue-500 or text-blue-500, the mid stop most teams grab before theming anything. It is the same value as the shadcn primary, but the utility framing changes how you use it: it is a class you drop on one element, not a token that repaints the app. At oklch(0.623 0.188 259.8) it is bright and friendly. As text on white it holds AA Large only (3.68:1) under WCAG 2.2, so text-blue-500 on a white card is safe for large text and headings, not body copy; step down to blue-600 or blue-700 for paragraphs. On a near-black surface it reaches AA (5.71:1, APCA Lc -37.78). Its triad pairs it with a deep #0953CC and a pink #F63B82, and #3BD0F6 sits one analogous step toward cyan. The accessibility lens keeps it blue for red-green vision (#5A5ADA) but nudges it teal under tritanopia (#3FC4BF). For the theme-token view of this exact hex, see shadcn Primary Blue.

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

More Blue in Tailwind

Nearest hues across families

Browse all colors

@theme {
  --color-primary-50: #e7f6ff;
  --color-primary-100: #c5e0ff;
  --color-primary-200: #a0c9ff;
  --color-primary-300: #7bb2ff;
  --color-primary-400: #5a9aff;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2164cf;
  --color-primary-700: #0b48a4;
  --color-primary-800: #002f76;
  --color-primary-900: #00174c;
  --color-primary-950: #000325;

  --color-secondary-50: #f1f2ff;
  --color-secondary-100: #d2d4ff;
  --color-secondary-200: #b4b5ff;
  --color-secondary-300: #9895fa;
  --color-secondary-400: #7e76ed;
  --color-secondary-500: #6657da;
  --color-secondary-600: #513fb9;
  --color-secondary-700: #3c2a94;
  --color-secondary-800: #29196c;
  --color-secondary-900: #170947;
  --color-secondary-950: #070024;

  --color-accent-50: #e6f9fc;
  --color-accent-100: #cdf0f5;
  --color-accent-200: #b0e7f0;
  --color-accent-300: #90dfea;
  --color-accent-400: #72d5e3;
  --color-accent-500: #57cada;
  --color-accent-600: #2da0af;
  --color-accent-700: #007783;
  --color-accent-800: #004f59;
  --color-accent-900: #002b32;
  --color-accent-950: #000b10;

  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #efeff1;
  --color-neutral-200: #dfe0e2;
  --color-neutral-300: #c4c6ca;
  --color-neutral-400: #9ea2a9;
  --color-neutral-500: #787e87;
  --color-neutral-600: #5b6067;
  --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: #787E87;
  --color-border: #DFE0E2;
}

How do you export Tailwind Blue 500 as design tokens?

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

Also see

Accessibility lens

How does Tailwind Blue 500 go from primitive to component?

How does Tailwind Blue 500 scale from 50 to 950?

How does Tailwind Blue 500 score on WCAG 2.2 contrast?

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

What palettes pair with Tailwind Blue 500?

Analogous

Complementary

Triadic

Where should you use Tailwind Blue 500 in production UI?

Notes on Tailwind Blue 500

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

More Blue in Tailwind

Tailwind Blue 600 in OKLCH

Tailwind Blue 700 in OKLCH

Nearest hues across families

shadcn Primary Blue in OKLCH

shadcn Slate Accessible in OKLCH

Tailwind Slate 500 in OKLCH

Tailwind Slate 600 in OKLCH

How do you export Tailwind Blue 500 as design tokens?

Frequently asked questions

Ready to build your color system?