paletta

Token de shadcn

shadcn Slate Accessible en OKLCH

Quick answer: shadcn Slate Accessible es #1E293B, que convierte a oklch(0.279 0.037 260.00). Sobre blanco, tiene una relación de contraste WCAG de 14.62:1 y un puntaje APCA de Lc +101.41.

Esto cumple el umbral de texto AAA de WCAG 2.2 (7: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.279 0.037 260.00)

shadcn Slate Accessible es un token de tema de shadcn. Esta página presenta #1E293B como token de tema: pega los bloques :root y .dark de abajo para aplicar el tema a todos los componentes a la vez.

  • Especificaciones

    oklch(0.279 0.037 260.00)
    #1E293B

    Mayor contraste: white

    14.62:1
    Normal AAcumple con WCAG 2.2
    Normal AAAcumple con WCAG 2.2
    Large AAcumple con WCAG 2.2
    Large AAAcumple con WCAG 2.2
    Lc +101.41
    Probar en Studio

  • Lente de accesibilidad

    • Base#1E293B
    • 300#6A7484
    • 500#1E293B
    • 700#121B29

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

¿Cómo pasa shadcn Slate Accessible de primitivo a componente?

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#1E293B
oklch
oklch(0.279 0.037 260.00)

Semantic

Bound to a role token that UI reads by name.

--primary: #1E293B

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.

AAA14.62:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: white (14.62:1 on #1E293B).

¿Cómo escala shadcn Slate Accessible de 50 a 950?

shadcn Slate Accessible
50 to 950
#F2F5FA
#C3C8D1
#959DA9
#6A7484
#424D5F
#1E293B
#182232
#121B29
#0D141F
#080D16
#05070D
  • 50oklch(0.969 0.007 260.73)
  • 100oklch(0.832 0.014 262.37)
  • 200oklch(0.693 0.020 258.36)
  • 300oklch(0.556 0.028 259.80)
  • 400oklch(0.418 0.033 260.21)
  • 500oklch(0.279 0.037 260.03)
  • 600oklch(0.251 0.034 259.58)
  • 700oklch(0.221 0.031 259.02)
  • 800oklch(0.190 0.025 259.24)
  • 900oklch(0.159 0.021 261.35)
  • 950oklch(0.129 0.015 266.38)

¿Qué puntaje obtiene shadcn Slate Accessible 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
Aa2.50Below AA
Aa7.81AAA
Aa14.62AAA
Aa16.90AAA
Aa18.43AAA
Aa2.50Below AA
Aa1.00Below AA
Aa3.12Below AA
Aa5.84AA
Aa6.74AA
Aa7.35AAA
Aa7.81AAA
Aa3.12Below AA
Aa1.00Below AA
Aa1.87Below AA
Aa2.16Below AA
Aa2.35Below AA
Aa14.62AAA
Aa5.84AA
Aa1.87Below AA
Aa1.00Below AA
Aa1.15Below AA
Aa1.25Below AA
Aa16.90AAA
Aa6.74AA
Aa2.16Below AA
Aa1.15Below AA
Aa1.00Below AA
Aa1.09Below AA
Aa18.43AAA
Aa7.35AAA
Aa2.35Below AA
Aa1.25Below AA
Aa1.09Below AA
Aa1.00Below AA

¿shadcn Slate Accessible cumple WCAG 2.2 sobre fondos neutros comunes?

  • Aa14.62AAA

    Blanco #FFFFFF

  • Aa13.41AAA

    Neutro 100 #F5F5F5

  • Aa11.61AAA

    Neutro 200 #E5E5E5

  • Aa5.79AA

    Neutro 400 #A3A3A3

  • Aa1.87Below AA

    Neutro 600 #525252

  • Aa1.22Below AA

    Neutro 900 #171717

  • Aa1.43Below AA

    Negro #000000

¿Qué paletas combinan con shadcn Slate Accessible?

  • Análogos

    • #1E3B35
    • #1E353B
    • #1E293B
    • #1F1E3B
    • #2B1E3B

  • Complementarios

    • #384C6E
    • #1E293B

  • Triádicos

    • #1E293B
    • #151C29
    • #3B1E29

¿Dónde usar shadcn Slate Accessible 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 / white
$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 · fg: white
"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
#1E293B
focus ring: primary-100COMPONENT · INPUT
Search projects…⌘K
button-primary: primary-600 / whitebutton-secondary: primary-50 / primary-700
SETTINGS
Weekly digest
Net new tokens
$15,989
$18,871 last period

Notas sobre shadcn Slate Accessible

Slate Accessible es el slate casi negro, oklch(0.279 0.037 260), un poco más cálido y azulado que el zinc simple. Está construido para ser el color de texto y encabezados de alto contraste en un tema de shadcn, y los números lo respaldan: sobre blanco se lee en WCAG 2.2 AAA (14.62:1, APCA Lc +101.41), así que el texto de cuerpo, las etiquetas y los íconos en #1E293B se mantienen cómodos en cualquier tamaño. Trata el lado negro como fuera de límites; sobre una superficie negra verdadera cae en Below AA (1.43:1), así que es un primer plano para fondos claros, no un relleno para fondos oscuros. Cuando sí quieras profundidad en una tarjeta, el complementario #384C6E aporta un azul apagado, y el análogo #1E353B se inclina hacia el verde azulado para el chrome secundario. El lente de accesibilidad no es un problema aquí: las simulaciones de CVD se ubican en #222136 y #1F3332, tan cerca del origen que su papel como tinta confiable se mantiene para todo tipo de visión del color.

¿Qué otros colores de Tailwind y shadcn se relacionan con shadcn Slate Accessible?

Bloque :root de shadcn

: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 33% 17%;
  --primary-foreground: 0 0% 100%;
  --secondary: 244 21% 84%;
  --secondary-foreground: 247 36% 10%;
  --muted: 240 7% 94%;
  --muted-foreground: 216 6% 50%;
  --accent: 188 17% 83%;
  --accent-foreground: 187 50% 7%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 5% 88%;
  --input: 220 5% 88%;
  --ring: 217 33% 17%;
  --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 18% 32%;
  --primary-foreground: 0 0% 100%;
  --secondary: 247 32% 15%;
  --secondary-foreground: 244 21% 84%;
  --muted: 220 7% 18%;
  --muted-foreground: 218 6% 64%;
  --accent: 187 37% 13%;
  --accent-foreground: 188 17% 83%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 7% 18%;
  --input: 220 7% 18%;
  --ring: 217 18% 32%;
  --radius: 0.5rem;
}

¿Cómo exportas shadcn Slate Accessible como design tokens?

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

FAQ

Frequently asked questions

shadcn Slate Accessible (#1E293B) is oklch(0.279 0.037 260) in the OKLCH color space.

shadcn Slate Accessible passes WCAG 2.2 AA on white for normal text. Contrast ratios: 14.62:1 on white, 1.43:1 on black.

On white, shadcn Slate Accessible has an APCA Lc of 101.4. On black, Lc is 0. APCA is a perceptual contrast model, not a WCAG compliance standard.

Paste the snippet above into your globals.css (with :root and .dark blocks).

Under deuteranopia (most common, around 5 percent of men), shadcn Slate Accessible simulates to #222136. Under protanopia it shifts to #232337. Under tritanopia it appears as #1f3332. Always pair color with shape, label, or icon for accessibility.

¿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