paletta

Token de Tailwind CSS

Tailwind Amber 600 en OKLCH

Quick answer: Tailwind Amber 600 es #D97706, que convierte a oklch(0.666 0.157 58.30). Sobre blanco, tiene una relación de contraste WCAG de 3.18:1 y un puntaje APCA de Lc +58.49.

Esto cumple el umbral de texto AA Large de WCAG 2.2 (3:1) sobre blanco. Este color se lanzó en Tailwind CSS v4.0 (January 2025) como parte de la paleta OKLCH predeterminada, que tiene 92% de soporte global en navegadores (caniuse, April 2026).

oklch(0.666 0.157 58.30)

Tailwind Amber 600 es un color utilitario de Tailwind. Esta página presenta #D97706 como un stop utilitario: copia la escala @theme generada abajo, o mapéala a tus propios tokens.

  • Especificaciones

    oklch(0.666 0.157 58.30)
    #D97706

    Mayor contraste: black

    6.59: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 -43.24
    Probar en Studio

  • Lente de accesibilidad

    • Base#D97706
    • 300#F2A66A
    • 500#D97706
    • 700#893D00

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

¿Cómo pasa Tailwind Amber 600 de primitivo a componente?

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#D97706
oklch
oklch(0.666 0.157 58.30)

Semantic

Bound to a role token that UI reads by name.

--primary: #D97706

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.

AA6.59:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: black (6.59:1 on #D97706).

¿Cómo escala Tailwind Amber 600 de 50 a 950?

Tailwind Amber 600
50 to 950
#FFF1E1
#FED9BE
#F9C095
#F2A66A
#E78E40
#D97706
#B25800
#893D00
#612500
#3A0F00
#180000
  • 50oklch(0.965 0.026 71.20)
  • 100oklch(0.910 0.055 58.10)
  • 200oklch(0.849 0.087 58.28)
  • 300oklch(0.787 0.118 58.22)
  • 400oklch(0.726 0.141 58.64)
  • 500oklch(0.666 0.157 58.32)
  • 600oklch(0.560 0.141 53.37)
  • 700oklch(0.453 0.121 49.62)
  • 800oklch(0.348 0.098 45.98)
  • 900oklch(0.239 0.073 41.25)
  • 950oklch(0.131 0.054 29.23)

¿Qué puntaje obtiene Tailwind Amber 600 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.45Below AA
Aa2.26Below AA
Aa4.41Below AA
Aa10.67AAA
Aa18.21AAA
Aa1.45Below AA
Aa1.00Below AA
Aa1.55Below AA
Aa3.03Below AA
Aa7.33AAA
Aa12.51AAA
Aa2.26Below AA
Aa1.55Below AA
Aa1.00Below AA
Aa1.94Below AA
Aa4.70AA
Aa8.02AAA
Aa4.41Below AA
Aa3.03Below AA
Aa1.94Below AA
Aa1.00Below AA
Aa2.41Below AA
Aa4.12Below AA
Aa10.67AAA
Aa7.33AAA
Aa4.70AA
Aa2.41Below AA
Aa1.00Below AA
Aa1.70Below AA
Aa18.21AAA
Aa12.51AAA
Aa8.02AAA
Aa4.12Below AA
Aa1.70Below AA
Aa1.00Below AA

¿Tailwind Amber 600 cumple WCAG 2.2 sobre fondos neutros comunes?

  • Aa3.18Below AA

    Blanco #FFFFFF

  • Aa2.92Below AA

    Neutro 100 #F5F5F5

  • Aa2.52Below AA

    Neutro 200 #E5E5E5

  • Aa1.26Below AA

    Neutro 400 #A3A3A3

  • Aa2.45Below AA

    Neutro 600 #525252

  • Aa5.62AA

    Neutro 900 #171717

  • Aa6.59AA

    Negro #000000

¿Qué paletas combinan con Tailwind Amber 600?

  • Análogos

    • #D90645
    • #D91F06
    • #D97706
    • #D9CF06
    • #8BD906

  • Complementarios

    • #F99D32
    • #D97706

  • Triádicos

    • #D97706
    • #804604
    • #06D977

¿Dónde usar Tailwind Amber 600 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 / black
$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
#D97706
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 Tailwind Amber 600

Amber 600 oscurece el amber hacia un naranja más puro, oklch(0.666 0.157 58.3), a cambio de sacrificar algo de brillo por mejor comportamiento en interfaces claras. Como texto sobre blanco alcanza AA Large (3.18:1), así que es seguro para títulos de advertencia grandes pero no para texto de cuerpo; sobre una superficie casi negra sube a WCAG 2.2 AA (6.59:1, APCA Lc -43.24) para texto normal, lo que lo convierte en el amber más útil en modo oscuro. El complementario #F99D32 es un albaricoque más claro para hover, y la tríada se afirma en un marrón #804604 y un verde #06D977. Mantén los neutros fríos para que se lea como amber y no como lodo. La lente de accesibilidad sigue siendo relevante: la protanopia y la deuteranopia lo desplazan a un verde amarillento oliva (#B4BC28), y la tritanopia lo lee rojo (#D4373C), así que una señal de estado cálido contra frío necesita un ícono de respaldo. Úsalo donde quieras calidez con más contención que en la variante 500.

¿Qué otros colores de Tailwind y shadcn se relacionan con Tailwind Amber 600?

Bloque @theme de Tailwind v4

@theme {
  --color-primary-50: #fff1e1;
  --color-primary-100: #fed9be;
  --color-primary-200: #f9c095;
  --color-primary-300: #f2a66a;
  --color-primary-400: #e78e40;
  --color-primary-500: #d97706;
  --color-primary-600: #b25800;
  --color-primary-700: #893d00;
  --color-primary-800: #612500;
  --color-primary-900: #3a0f00;
  --color-primary-950: #180000;

  --color-secondary-50: #f5f8e0;
  --color-secondary-100: #e8ebc1;
  --color-secondary-200: #dadf9d;
  --color-secondary-300: #cdd375;
  --color-secondary-400: #c1c64f;
  --color-secondary-500: #b4b926;
  --color-secondary-600: #8d9100;
  --color-secondary-700: #686b00;
  --color-secondary-800: #454700;
  --color-secondary-900: #252600;
  --color-secondary-950: #090800;

  --color-accent-50: #ffede8;
  --color-accent-100: #fec8c1;
  --color-accent-200: #f3a297;
  --color-accent-300: #e57a6e;
  --color-accent-400: #d25449;
  --color-accent-500: #b92b26;
  --color-accent-600: #9b1012;
  --color-accent-700: #7b0003;
  --color-accent-800: #590000;
  --color-accent-900: #390000;
  --color-accent-950: #1c0000;

  --color-neutral-50: #f8f7f7;
  --color-neutral-100: #f1f0ef;
  --color-neutral-200: #e2e1df;
  --color-neutral-300: #cac7c4;
  --color-neutral-400: #a9a49e;
  --color-neutral-500: #878078;
  --color-neutral-600: #67615b;
  --color-neutral-700: #4c4843;
  --color-neutral-800: #312e2b;
  --color-neutral-900: #1b1a18;
  --color-neutral-950: #100f0e;

  --color-success-50: #e6fce9;
  --color-success-100: #c4eaca;
  --color-success-200: #9ddaa7;
  --color-success-300: #74c985;
  --color-success-400: #4ab766;
  --color-success-500: #16a34a;
  --color-success-600: #008330;
  --color-success-700: #00631a;
  --color-success-800: #00440a;
  --color-success-900: #002700;
  --color-success-950: #000d00;

  --color-error-50: #ffebe6;
  --color-error-100: #ffc9c0;
  --color-error-200: #ffa398;
  --color-error-300: #fe7c6f;
  --color-error-400: #f0544a;
  --color-error-500: #dc2626;
  --color-error-600: #b8000a;
  --color-error-700: #910000;
  --color-error-800: #680000;
  --color-error-900: #420000;
  --color-error-950: #200000;

  --color-warning-50: #fff1e1;
  --color-warning-100: #fed9be;
  --color-warning-200: #f9c095;
  --color-warning-300: #f2a66a;
  --color-warning-400: #e78e40;
  --color-warning-500: #d97706;
  --color-warning-600: #b25800;
  --color-warning-700: #893d00;
  --color-warning-800: #612500;
  --color-warning-900: #3a0f00;
  --color-warning-950: #180000;

  --color-info-50: #e6f6ff;
  --color-info-100: #bfdaff;
  --color-info-200: #95bdff;
  --color-info-300: #6ca0ff;
  --color-info-400: #4782fd;
  --color-info-500: #2563eb;
  --color-info-600: #114ac8;
  --color-info-700: #0333a1;
  --color-info-800: #002076;
  --color-info-900: #000e4e;
  --color-info-950: #000129;

  /* Surfaces */
  --color-background: #F8F7F7;
  --color-surface: #FFFFFF;
  --color-elevated: #F8F7F7;
  --color-foreground: #1B1A18;
  --color-muted: #878078;
  --color-border: #E2E1DF;
}

¿Cómo exportas Tailwind Amber 600 como design tokens?

Exporta un documento de tokens W3C DTCG para la escala de Tailwind Amber 600 de 50 a 950, listo para Style Dictionary o cualquier pipeline compatible con DTCG.

FAQ

Frequently asked questions

Tailwind Amber 600 (#D97706) is oklch(0.666 0.157 58.3) in the OKLCH color space.

Tailwind Amber 600 passes WCAG 2.2 AA on black for normal text. Contrast ratios: 3.18:1 on white, 6.59:1 on black.

On white, Tailwind Amber 600 has an APCA Lc of 58.5. On black, Lc is -43.2. APCA is a perceptual contrast model, not a WCAG compliance standard.

Paste the snippet above into your tailwind.config (or globals.css with @theme).

Under deuteranopia (most common, around 5 percent of men), Tailwind Amber 600 simulates to #b4bc28. Under protanopia it shifts to #afae21. Under tritanopia it appears as #d4373c. 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