paletta
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)

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

Protanopia#4040CA
Deuteranopia#3C38C2
Tritanopia#28B0AA

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

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

What other Tailwind and shadcn colors look like Tailwind Blue 600?

@theme {
  --color-primary-50: #e8eefc;
  --color-primary-100: #bfd1f6;
  --color-primary-200: #98b3f1;
  --color-primary-300: #7095eb;
  --color-primary-400: #4b77e7;
  --color-primary-500: #2d5be2;
  --color-primary-600: #244abc;
  --color-primary-700: #1b3a93;
  --color-primary-800: #132a6c;
  --color-primary-900: #0a1a43;
  --color-primary-950: #06112c;

  --color-secondary-50: #eeebfa;
  --color-secondary-100: #cfc7f0;
  --color-secondary-200: #b0a3e7;
  --color-secondary-300: #917fdd;
  --color-secondary-400: #725cd4;
  --color-secondary-500: #5338ca;
  --color-secondary-600: #442da8;
  --color-secondary-700: #352384;
  --color-secondary-800: #271a60;
  --color-secondary-900: #18103c;
  --color-secondary-950: #100a27;

  --color-accent-50: #ebf7fa;
  --color-accent-100: #c7e8f0;
  --color-accent-200: #a3dae7;
  --color-accent-300: #7fcbdd;
  --color-accent-400: #5cbdd4;
  --color-accent-500: #38aeca;
  --color-accent-600: #2d91a8;
  --color-accent-700: #237284;
  --color-accent-800: #1a5360;
  --color-accent-900: #10343c;
  --color-accent-950: #0a2227;

  --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: #e9fcf0;
  --color-success-100: #c1f7d4;
  --color-success-200: #99f1b9;
  --color-success-300: #71ec9e;
  --color-success-400: #49e683;
  --color-success-500: #21e168;
  --color-success-600: #19bb55;
  --color-success-700: #149343;
  --color-success-800: #0e6b31;
  --color-success-900: #09431f;
  --color-success-950: #062c14;

  --color-error-50: #fbe9e9;
  --color-error-100: #f5c2c2;
  --color-error-200: #ef9b9b;
  --color-error-300: #e97474;
  --color-error-400: #e24d4d;
  --color-error-500: #dc2626;
  --color-error-600: #b71e1e;
  --color-error-700: #901717;
  --color-error-800: #691111;
  --color-error-900: #420b0b;
  --color-error-950: #2b0707;

  --color-warning-50: #fef3e6;
  --color-warning-100: #fddeba;
  --color-warning-200: #fcc98e;
  --color-warning-300: #fbb462;
  --color-warning-400: #f99f36;
  --color-warning-500: #f8890a;
  --color-warning-600: #cf7106;
  --color-warning-700: #a35904;
  --color-warning-800: #774103;
  --color-warning-900: #4a2902;
  --color-warning-950: #301b01;

  --color-info-50: #e8eefd;
  --color-info-100: #bed1f9;
  --color-info-200: #95b3f5;
  --color-info-300: #6b95f1;
  --color-info-400: #4277ee;
  --color-info-500: #185aea;
  --color-info-600: #1249c3;
  --color-info-700: #0e3a99;
  --color-info-800: #0a2a70;
  --color-info-900: #061a46;
  --color-info-950: #04112e;

  /* Surfaces */
  --color-background: #F7F7F8;
  --color-surface: #FFFFFF;
  --color-elevated: #F7F7F8;
  --color-foreground: #18191B;
  --color-muted: #787D87;
  --color-border: #DFE0E2;
}

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