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)

shadcn Primary Blue is a shadcn theme token. This page frames #3B82F6 as a theme token: paste the :root and .dark blocks below to theme every component at once.

Also see

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

Specs

oklch(0.623 0.188 259.80)
#3B82F6

Highest contrast: black

5.71:1
Normal AAmeets WCAG 2.2
Normal AAAdoes not meet WCAG 2.2
Large AAmeets WCAG 2.2
Large AAAmeets WCAG 2.2
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 shadcn Primary Blue go from primitive to component?

  1. Primitive
  2. Semantic
  3. 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 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

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

Analogous

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

Complementary

  • #84B1F9
  • #3B82F6

Triadic

  • #3B82F6
  • #0953CC
  • #F63B82

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

As the shadcn --primary token, this blue drives buttons, focus rings, links, and the whole default theme from one value at oklch(0.623 0.188 259.8). The number to remember is the button: white primary-foreground text on a #3B82F6 fill reaches only AA Large (3.68:1) under WCAG 2.2, fine for the standard large label but tight for small text, so bump the size or darken the token a stop for dense UI. The same blue as text on a near-black card is stronger at AA (5.71:1, APCA Lc -37.78), so dark mode is friendlier here. For a secondary or ring accent, the triad offers a deep #0953CC and a pink #F63B82, while #84B1F9 gives a muted hover. Under the accessibility lens it stays reliably blue for protanopia and deuteranopia (near #5650D3); tritanopia shifts it teal (#3FC4BF), so keep blue and teal apart by more than hue. See the Tailwind Blue 500 page for the same hex framed as a utility class.

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

Browse all colors

: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: 217 91% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 237 100% 91%;
  --secondary-foreground: 254 78% 16%;
  --muted: 240 7% 94%;
  --muted-foreground: 216 6% 50%;
  --accent: 188 67% 88%;
  --accent-foreground: 188 100% 10%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 5% 88%;
  --input: 220 5% 88%;
  --ring: 217 91% 60%;
  --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: 217 100% 68%;
  --primary-foreground: 0 0% 100%;
  --secondary: 252 62% 26%;
  --secondary-foreground: 237 100% 91%;
  --muted: 220 7% 18%;
  --muted-foreground: 218 6% 64%;
  --accent: 187 100% 17%;
  --accent-foreground: 188 67% 88%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 7% 18%;
  --input: 220 7% 18%;
  --ring: 217 100% 68%;
  --radius: 0.5rem;
}

How do you export shadcn Primary Blue as design tokens?

Export a W3C DTCG token document for the shadcn Primary Blue 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