paletta
Token de shadcn

shadcn Primary Blue en OKLCH

Quick answer: shadcn Primary Blue es #3B82F6, que convierte a oklch(0.623 0.188 259.80). Sobre blanco, tiene una relación de contraste WCAG de 3.68:1 y un puntaje APCA de Lc +63.89.

Esto cumple el umbral de texto AA Large de WCAG 2.2 (3:1) sobre blanco. Los colores base OKLCH usados aquí están disponibles en shadcn/ui desde la actualización de Tailwind v4 (February 2025), con 92% de soporte global en navegadores para la notación OKLCH (caniuse, April 2026).

oklch(0.623 0.188 259.80)

shadcn Primary Blue es un token de tema de shadcn. Esta página presenta #3B82F6 como token de tema: pega los bloques :root y .dark de abajo para aplicar el tema a todos los componentes a la vez.

Ver también

#3B82F6 está documentado desde más de un ángulo. Esta página lo presenta como token de tema de shadcn. El mismo hex también se cubre aquí:

Especificaciones

oklch(0.623 0.188 259.80)
#3B82F6

Mayor contraste: black

5.71:1
Normal AAcumple con WCAG 2.2
Normal AAAno cumple con WCAG 2.2
Large AAcumple con WCAG 2.2
Large AAAcumple con WCAG 2.2
Lc -37.78
Probar en Studio

Lente de accesibilidad

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

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

¿Cómo pasa shadcn Primary Blue de primitivo a componente?

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

¿Cómo escala shadcn Primary Blue de 50 a 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)

¿Qué puntaje obtiene shadcn Primary Blue en contraste WCAG 2.2?

Cada combinación de primer plano y fondo, con el veredicto de WCAG 2.2.

AAA (7:1+)
AA (4.5:1+)
No cumple AA (menos de 4.5:1)
Pasa el cursor para ver 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

¿shadcn Primary Blue cumple WCAG 2.2 sobre fondos neutros comunes?

  • Aa3.68Below AA

    Blanco #FFFFFF

  • Aa3.37Below AA

    Neutro 100 #F5F5F5

  • Aa2.92Below AA

    Neutro 200 #E5E5E5

  • Aa1.46Below AA

    Neutro 400 #A3A3A3

  • Aa2.12Below AA

    Neutro 600 #525252

  • Aa4.87AA

    Neutro 900 #171717

  • Aa5.71AA

    Negro #000000

¿Qué paletas combinan con shadcn Primary Blue?

Análogos

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

Complementarios

  • #84B1F9
  • #3B82F6

Triádicos

  • #3B82F6
  • #0953CC
  • #F63B82

¿Dónde usar shadcn Primary Blue en UI de producción?

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

Notas sobre shadcn Primary Blue

Como el token --primary de shadcn, este azul impulsa botones, anillos de foco, enlaces y todo el tema por defecto desde un solo valor en oklch(0.623 0.188 259.8). El número que hay que recordar es el del botón: el texto primary-foreground blanco sobre un relleno #3B82F6 alcanza solo AA Large (3.68:1) bajo WCAG 2.2, lo cual está bien para la etiqueta grande estándar pero es ajustado para texto pequeño, así que aumenta el tamaño u oscurece el token un paso para UI densa. Ese mismo azul como texto sobre una tarjeta casi negra es más fuerte, en AA (5.71:1, APCA Lc -37.78), así que el modo oscuro es más amigable aquí. Para un acento secundario o de anillo, la tríada ofrece un #0953CC profundo y un rosa #F63B82, mientras que #84B1F9 da un hover apagado. Bajo el lente de accesibilidad se mantiene confiablemente azul para protanopia y deuteranopia (cerca de #5650D3); la tritanopia lo desplaza a verde azulado (#3FC4BF), así que mantén el azul y el verde azulado separados por algo más que el matiz. Consulta la página de Tailwind Blue 500 para ver el mismo hex enmarcado como clase de utilidad.

¿Qué otros colores de Tailwind y shadcn se relacionan con shadcn Primary Blue?

Explora todos los colores

: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;
}

¿Cómo exportas shadcn Primary Blue como design tokens?

Exporta un documento de tokens W3C DTCG para la escala de shadcn Primary Blue de 50 a 950, listo para Style Dictionary o cualquier pipeline compatible con DTCG.

Frequently asked questions

¿Listo para construir tu sistema de color?

Gratis para siempre, sin tarjeta, Pro cuando necesites más.

Hecho por un diseñador de producto que publica en código.

Genera un sistema Ver precios