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.19: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.46Below AA
Aa2.27Below AA
Aa4.41Below AA
Aa10.67AAA
Aa18.21AAA
Aa1.46Below AA
Aa1.00Below AA
Aa1.56Below AA
Aa3.03Below AA
Aa7.33AAA
Aa12.52AAA
Aa2.27Below AA
Aa1.56Below AA
Aa1.00Below AA
Aa1.94Below AA
Aa4.70AA
Aa8.03AAA
Aa4.41Below AA
Aa3.03Below AA
Aa1.94Below AA
Aa1.00Below AA
Aa2.42Below AA
Aa4.13Below AA
Aa10.67AAA
Aa7.33AAA
Aa4.70AA
Aa2.42Below AA
Aa1.00Below AA
Aa1.71Below AA
Aa18.21AAA
Aa12.52AAA
Aa8.03AAA
Aa4.13Below AA
Aa1.71Below AA
Aa1.00Below AA

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

  • Aa3.19Below AA

    Blanco #FFFFFF

  • Aa2.92Below AA

    Neutro 100 #F5F5F5

  • Aa2.53Below AA

    Neutro 200 #E5E5E5

  • Aa1.26Below AA

    Neutro 400 #A3A3A3

  • Aa2.45Below AA

    Neutro 600 #525252

  • Aa5.63AA

    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
$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
#D97706
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 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.19: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?

Explora todos los colores

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

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