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.14: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.77: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.77:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: black (9.77: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.67Below AA
Aa3.13Below AA
Aa9.00AAA
Aa18.30AAA
Aa1.28Below AA
Aa1.00Below AA
Aa1.31Below AA
Aa2.44Below AA
Aa7.02AAA
Aa14.28AAA
Aa1.67Below AA
Aa1.31Below AA
Aa1.00Below AA
Aa1.86Below AA
Aa5.36AA
Aa10.89AAA
Aa3.13Below AA
Aa2.44Below AA
Aa1.86Below AA
Aa1.00Below AA
Aa2.87Below AA
Aa5.84AA
Aa9.00AAA
Aa7.02AAA
Aa5.36AA
Aa2.87Below AA
Aa1.00Below AA
Aa2.03Below AA
Aa18.30AAA
Aa14.28AAA
Aa10.89AAA
Aa5.84AA
Aa2.03Below AA
Aa1.00Below AA

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

  • Aa2.14Below AA

    Blanco #FFFFFF

  • Aa1.96Below AA

    Neutro 100 #F5F5F5

  • Aa1.70Below AA

    Neutro 200 #E5E5E5

  • Aa1.17Below AA

    Neutro 400 #A3A3A3

  • Aa3.63Below AA

    Neutro 600 #525252

  • Aa8.34AAA

    Neutro 900 #171717

  • Aa9.77AAA

    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 / black
$8.2k
JANFEBMARAPRMAYJUNJUL
bg: primary-600 · fg: black
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
#F59E0B
focus ring: primary-100COMPONENT · INPUT
Search projects…⌘K
button-primary: primary-600 / blackbutton-secondary: primary-50 / primary-700
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.14: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.77: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?

Bloque @theme de Tailwind v4

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

FAQ

Frequently asked questions

Tailwind Amber 500 (#F59E0B) is oklch(0.769 0.165 70.1) in the OKLCH color space.

Tailwind Amber 500 passes WCAG 2.2 AA on black for normal text. Contrast ratios: 2.14:1 on white, 9.77:1 on black.

On white, Tailwind Amber 500 has an APCA Lc of 41.8. On black, Lc is -60.5. 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 500 simulates to #d4db37. Under protanopia it shifts to #cfcf2f. Under tritanopia it appears as #f14b51. 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