paletta
Token de Tailwind CSS

Tailwind Amber 500 en OKLCH

Quick answer: Tailwind Amber 500 es #F59E0B, que convierte a oklch(0.769 0.165 70.10). Sobre blanco, tiene una relación de contraste WCAG de 2.15:1 y un puntaje APCA de Lc +41.78.

Esto no alcanza el umbral de texto grande AA de WCAG 2.2 (3:1) sobre blanco. Combínalo con un primer plano más oscuro. 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.769 0.165 70.10)

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

Especificaciones

oklch(0.769 0.165 70.10)
#F59E0B

Mayor contraste: black

9.78: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 -60.46
Probar en Studio

Lente de accesibilidad

  • Base#F59E0B
  • 300#FFBF6F
  • 500#F59E0B
  • 700#985400

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

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

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#F59E0B
oklch
oklch(0.769 0.165 70.10)

Semantic

Bound to a role token that UI reads by name.

--primary: #F59E0B

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.

AAA9.78:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: black (9.78:1 on #F59E0B).

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

Tailwind Amber 500
50 to 950
#FFF2DE
#FFE2BF
#FFD199
#FFBF6F
#FDAE45
#F59E0B
#C77700
#985400
#693500
#3D1800
#160100
  • 50oklch(0.966 0.030 78.79)
  • 100oklch(0.928 0.056 72.27)
  • 200oklch(0.888 0.088 71.78)
  • 300oklch(0.847 0.122 71.06)
  • 400oklch(0.809 0.149 70.12)
  • 500oklch(0.769 0.165 70.08)
  • 600oklch(0.642 0.144 65.04)
  • 700oklch(0.515 0.120 60.55)
  • 800oklch(0.389 0.094 57.12)
  • 900oklch(0.260 0.068 50.67)
  • 950oklch(0.130 0.048 33.11)

¿Qué puntaje obtiene Tailwind Amber 500 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.28Below AA
Aa1.68Below AA
Aa3.13Below AA
Aa9.01AAA
Aa18.30AAA
Aa1.28Below AA
Aa1.00Below AA
Aa1.31Below AA
Aa2.44Below AA
Aa7.03AAA
Aa14.28AAA
Aa1.68Below AA
Aa1.31Below AA
Aa1.00Below AA
Aa1.87Below AA
Aa5.36AA
Aa10.90AAA
Aa3.13Below AA
Aa2.44Below AA
Aa1.87Below AA
Aa1.00Below AA
Aa2.88Below AA
Aa5.84AA
Aa9.01AAA
Aa7.03AAA
Aa5.36AA
Aa2.88Below AA
Aa1.00Below AA
Aa2.03Below AA
Aa18.30AAA
Aa14.28AAA
Aa10.90AAA
Aa5.84AA
Aa2.03Below AA
Aa1.00Below AA

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

  • Aa2.15Below AA

    Blanco #FFFFFF

  • Aa1.97Below AA

    Neutro 100 #F5F5F5

  • Aa1.70Below AA

    Neutro 200 #E5E5E5

  • Aa1.17Below AA

    Neutro 400 #A3A3A3

  • Aa3.64Below AA

    Neutro 600 #525252

  • Aa8.35AAA

    Neutro 900 #171717

  • Aa9.78AAA

    Negro #000000

¿Qué paletas combinan con Tailwind Amber 500?

Análogos

  • #F50B3B
  • #F53C0B
  • #F59E0B
  • #EBF50B
  • #89F50B

Complementarios

  • #F8BB54
  • #F59E0B

Triádicos

  • #F59E0B
  • #9E6506
  • #0BF59E

¿Dónde usar Tailwind Amber 500 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
#F59E0B
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 500

Amber 500 es pura señalización, oklch(0.769 0.165 70.1), el amarillo anaranjado dorado para advertencias, calificaciones y momentos destacados. Está entre los colores de texto con menor contraste sobre una página clara, Below AA con 2.15:1 (APCA Lc +41.78), así que #F59E0B debe usarse como relleno, estrella o gráfico grande, nunca como texto pequeño sobre blanco. Sobre una superficie casi negra pasa a WCAG 2.2 AAA (9.78:1, APCA Lc -60.46). Su secuencia análoga es un degradado cálido natural que va del rojo anaranjado #F53C0B al amarillo #EBF50B, y la tríada aporta un menta #0BF59E como contrapunto frío. Apóyalo sobre carbón o slate para que se lea como dorado y no como deslumbre. La lente de accesibilidad lo mantiene brillante pero desplaza su familia: la protanopia y la deuteranopia lo empujan hacia un verde amarillento (#D4DB37), cerca de donde se ubican los verdes, y la tritanopia lo vuelve rojo (#F14B51). No dejes que el amber sea lo único que separe precaución de vía libre.

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

Explora todos los colores

@theme {
  --color-primary-50: #fff2de;
  --color-primary-100: #ffe2bf;
  --color-primary-200: #ffd199;
  --color-primary-300: #ffbf6f;
  --color-primary-400: #fdae45;
  --color-primary-500: #f59e0b;
  --color-primary-600: #c77700;
  --color-primary-700: #985400;
  --color-primary-800: #693500;
  --color-primary-900: #3d1800;
  --color-primary-950: #160100;

  --color-secondary-50: #f3f9de;
  --color-secondary-100: #e8f1c3;
  --color-secondary-200: #dceaa0;
  --color-secondary-300: #d1e379;
  --color-secondary-400: #c7db55;
  --color-secondary-500: #bdd22e;
  --color-secondary-600: #93a500;
  --color-secondary-700: #6b7900;
  --color-secondary-800: #465000;
  --color-secondary-900: #242a00;
  --color-secondary-950: #070900;

  --color-accent-50: #ffede6;
  --color-accent-100: #ffcdc2;
  --color-accent-200: #fdab9b;
  --color-accent-300: #f48774;
  --color-accent-400: #e66550;
  --color-accent-500: #d2432e;
  --color-accent-600: #af2815;
  --color-accent-700: #891000;
  --color-accent-800: #620100;
  --color-accent-900: #3e0000;
  --color-accent-950: #1c0000;

  --color-neutral-50: #f8f7f7;
  --color-neutral-100: #f1f0ef;
  --color-neutral-200: #e2e1df;
  --color-neutral-300: #cac8c4;
  --color-neutral-400: #a9a59e;
  --color-neutral-500: #878178;
  --color-neutral-600: #67625b;
  --color-neutral-700: #4c4843;
  --color-neutral-800: #312f2b;
  --color-neutral-900: #1b1a18;
  --color-neutral-950: #10100e;

  --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: #878178;
  --color-border: #E2E1DF;
}

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

Exporta un documento de tokens W3C DTCG para la escala de Tailwind Amber 500 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