paletta
shadcn token

shadcn Primary Blue in OKLCH

Quick answer: shadcn Primary Blue 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 OKLCH base colors used here are available in shadcn/ui since the Tailwind v4 update (February 2025), with 92% global browser support for OKLCH notation (caniuse, April 2026).

oklch(0.623 0.188 259.80)

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

Protanopia#5A5ADA
Deuteranopia#5650D3
Tritanopia#3FC4BF

How does shadcn Primary Blue scale from 50 to 950?

shadcn Primary Blue
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 shadcn Primary Blue 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

Where should you use shadcn Primary Blue 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
"Paletta replaced our color brainstorm meetings."
Sora Mehta
Design lead, Northwind
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

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

:root {
  --background: 240 7% 97%;
  --foreground: 220 6% 10%;
  --card: 240 7% 97%;
  --card-foreground: 220 6% 10%;
  --popover: 240 7% 97%;
  --popover-foreground: 220 6% 10%;
  --primary: 227 65% 56%;
  --primary-foreground: 0 0% 100%;
  --secondary: 247 63% 86%;
  --secondary-foreground: 246 64% 15%;
  --muted: 240 7% 94%;
  --muted-foreground: 216 6% 50%;
  --accent: 187 63% 86%;
  --accent-foreground: 187 64% 15%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 5% 88%;
  --input: 220 5% 88%;
  --ring: 227 65% 56%;
  --radius: 0.5rem;
}

.dark {
  --background: 210 7% 6%;
  --foreground: 240 7% 97%;
  --card: 220 6% 10%;
  --card-foreground: 240 7% 97%;
  --popover: 220 6% 10%;
  --popover-foreground: 240 7% 97%;
  --primary: 222 67% 61%;
  --primary-foreground: 0 0% 100%;
  --secondary: 247 64% 24%;
  --secondary-foreground: 247 63% 86%;
  --muted: 220 7% 18%;
  --muted-foreground: 218 6% 64%;
  --accent: 188 64% 24%;
  --accent-foreground: 187 63% 86%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 7% 18%;
  --input: 220 7% 18%;
  --ring: 222 67% 61%;
  --radius: 0.5rem;
}

Frequently asked questions

Ready to build your color system?

Free forever, no credit card, Pro when you need more.

Get started for free See pricing