What is Tailwind Blue 700 in OKLCH?

Tailwind Blue 700 (#1D4ED8) is oklch(0.488 0.217 264.4) in the OKLCH color space.

Is Tailwind Blue 700 WCAG 2.2 AA accessible?

Tailwind Blue 700 passes WCAG 2.2 AA on white for normal text. Contrast ratios: 6.7:1 on white, 3.13:1 on black.

What is the APCA Lc for Tailwind Blue 700?

On white, Tailwind Blue 700 has an APCA Lc of 82.2. On black, Lc is -19.7. APCA is a perceptual contrast model, not a WCAG compliance standard.

How do I use Tailwind Blue 700 in Tailwind?

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

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

Under deuteranopia (most common, around 5 percent of men), Tailwind Blue 700 simulates to #2f2caf. Under protanopia it shifts to #3233b7. Under tritanopia it appears as #1f9c96. Always pair color with shape, label, or icon for accessibility.

Tailwind CSS token

Tailwind Blue 700 in OKLCH

Quick answer: Tailwind Blue 700 is #1D4ED8, which converts to oklch(0.488 0.217 264.40). On white, it has a WCAG contrast ratio of 6.70:1 and an APCA score of Lc +82.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.488 0.217 264.40)

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

Specs

oklch(0.488 0.217 264.40)

#1D4ED8

Highest contrast: white

6.70:1

Normal AA

Normal AAA

Large AA

Large AAA

Lc +82.17

Try in Studio

Accessibility lens

Base#1D4ED8
300#6594FC
500#1D4ED8
700#052596

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

How does Tailwind Blue 700 go from primitive to component?

Primitive
Semantic
Component

Primitive

The raw value, before it means anything.

hex: #1D4ED8
oklch: oklch(0.488 0.217 264.40)

Semantic

Bound to a role token that UI reads by name.

--primary: #1D4ED8

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

DefaultSave paletteNew

HoverSave paletteNew

ActiveSave paletteNew

DisabledSave paletteNew

On-color text: white (6.70:1 on #1D4ED8).

How does Tailwind Blue 700 scale from 50 to 950?

Tailwind Blue 700

50 to 950

#E7F6FF

#BDD6FF

#90B5FF

#6594FC

#3F71EE

#1D4ED8

#0E38BA

#052596

#021670

#00084B

#000129

50oklch(0.965 0.020 233.85)
100oklch(0.871 0.063 260.28)
200oklch(0.775 0.114 263.57)
300oklch(0.682 0.162 264.23)
400oklch(0.584 0.196 264.59)
500oklch(0.488 0.217 264.38)
600oklch(0.417 0.207 264.39)
700oklch(0.344 0.184 264.42)
800oklch(0.273 0.153 264.50)
900oklch(0.201 0.120 264.10)
950oklch(0.131 0.085 264.20)

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

Aa3.96Below AA

Aa8.30AAA

Aa14.08AAA

Aa18.36AAA

Aa1.86Below AA

Aa1.00Below AA

Aa2.13Below AA

Aa4.46Below AA

Aa7.58AAA

Aa9.88AAA

Aa3.96Below AA

Aa2.13Below AA

Aa1.00Below AA

Aa2.10Below AA

Aa3.56Below AA

Aa4.64AA

Aa8.30AAA

Aa4.46Below AA

Aa2.10Below AA

Aa1.00Below AA

Aa1.70Below AA

Aa2.21Below AA

Aa14.08AAA

Aa7.58AAA

Aa3.56Below AA

Aa1.70Below AA

Aa1.00Below AA

Aa1.30Below AA

Aa18.36AAA

Aa9.88AAA

Aa4.64AA

Aa2.21Below AA

Aa1.30Below AA

Aa1.00Below AA

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

Aa6.70AA
White #FFFFFF
Aa6.15AA
Neutral 100 #F5F5F5
Aa5.32AA
Neutral 200 #E5E5E5
Aa2.66Below AA
Neutral 400 #A3A3A3
Aa1.17Below AA
Neutral 600 #525252
Aa2.68Below AA
Neutral 900 #171717
Aa3.13Below AA
Black #000000

What palettes pair with Tailwind Blue 700?

Analogous

#1DD8C6
#1D9CD8
#1D4ED8
#3A1DD8
#881DD8

Complementary

#597FE9
#1D4ED8

Triadic

#1D4ED8
#123187
#D81D4E

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

#1D4ED8

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 700

Blue 700 is the deep, ink-leaning blue, oklch(0.488 0.217 264.4), the stop teams pick when a link or a primary button has to read as small text on a white page. That is its strength: on white it clears WCAG 2.2 AA comfortably (6.7:1, APCA Lc +82.17), close to AAA, so it carries body-sized links and dense labels without strain. The trade is dark mode, where it drops to AA Large (3.13:1) and should only appear at heading size on near-black. Its harmony leans rich; the triad grounds on a navy #123187 and answers with a rose #D81D4E, and #1D9CD8 sits one analogous step toward sky. Neutral slate keeps the depth from turning heavy. The accessibility lens is forgiving for a blue: protanopia and deuteranopia hold it deep blue (#2F2CAF), and only tritanopia shifts it toward teal (#1F9C96). It is the safest blue here for text on light surfaces.

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

More Blue in Tailwind

Nearest hues across families

Browse all colors

@theme {
  --color-primary-50: #e7f6ff;
  --color-primary-100: #bdd6ff;
  --color-primary-200: #90b5ff;
  --color-primary-300: #6594fc;
  --color-primary-400: #3f71ee;
  --color-primary-500: #1d4ed8;
  --color-primary-600: #0e38ba;
  --color-primary-700: #052596;
  --color-primary-800: #021670;
  --color-primary-900: #00084b;
  --color-primary-950: #000129;

  --color-secondary-50: #f3f2ff;
  --color-secondary-100: #d0ceff;
  --color-secondary-200: #afa9f4;
  --color-secondary-300: #8f84e7;
  --color-secondary-400: #725fd4;
  --color-secondary-500: #5839bc;
  --color-secondary-600: #4726a1;
  --color-secondary-700: #361682;
  --color-secondary-800: #260b61;
  --color-secondary-900: #160341;
  --color-secondary-950: #080024;

  --color-accent-50: #e7f9ff;
  --color-accent-100: #c8e6f1;
  --color-accent-200: #a4d4e6;
  --color-accent-300: #7fc2da;
  --color-accent-400: #5cb0cc;
  --color-accent-500: #399dbc;
  --color-accent-600: #157d99;
  --color-accent-700: #005d75;
  --color-accent-800: #003f52;
  --color-accent-900: #002331;
  --color-accent-950: #000a13;

  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #efeff1;
  --color-neutral-200: #dfe0e2;
  --color-neutral-300: #c4c5ca;
  --color-neutral-400: #9ea1a9;
  --color-neutral-500: #787c87;
  --color-neutral-600: #5b5e67;
  --color-neutral-700: #43454c;
  --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: #787C87;
  --color-border: #DFE0E2;
}

How do you export Tailwind Blue 700 as design tokens?

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

Accessibility lens

How does Tailwind Blue 700 go from primitive to component?

How does Tailwind Blue 700 scale from 50 to 950?

How does Tailwind Blue 700 score on WCAG 2.2 contrast?

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

What palettes pair with Tailwind Blue 700?

Analogous

Complementary

Triadic

Where should you use Tailwind Blue 700 in production UI?

Notes on Tailwind Blue 700

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

More Blue in Tailwind

Tailwind Blue 600 in OKLCH

Tailwind Blue 500 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 700 as design tokens?

Frequently asked questions

Ready to build your color system?