paletta

Token de Tailwind CSS

Tailwind Amber 700 en OKLCH

Quick answer: Tailwind Amber 700 es #B45309, que convierte a oklch(0.555 0.146 49.00). Sobre blanco, tiene una relación de contraste WCAG de 5.02:1 y un puntaje APCA de Lc +74.04.

Esto cumple el umbral de texto AA de WCAG 2.2 (4.5: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.555 0.146 49.00)

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

  • Especificaciones

    oklch(0.555 0.146 49.00)
    #B45309

    Mayor contraste: white

    5.02: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 +74.04
    Probar en Studio

  • Lente de accesibilidad

    • Base#B45309
    • 300#DC9066
    • 500#B45309
    • 700#752800

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

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

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#B45309
oklch
oklch(0.555 0.146 49.00)

Semantic

Bound to a role token that UI reads by name.

--primary: #B45309

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.

AA5.02:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: white (5.02:1 on #B45309).

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

Tailwind Amber 700
50 to 950
#FFF0E4
#F7D1BD
#EAB092
#DC9066
#CA713C
#B45309
#953C00
#752800
#531700
#340800
#180000
  • 50oklch(0.964 0.023 61.24)
  • 100oklch(0.888 0.051 49.40)
  • 200oklch(0.803 0.080 48.52)
  • 300oklch(0.721 0.109 49.32)
  • 400oklch(0.639 0.131 49.42)
  • 500oklch(0.555 0.146 49.00)
  • 600oklch(0.471 0.134 45.47)
  • 700oklch(0.388 0.117 41.96)
  • 800oklch(0.301 0.095 39.71)
  • 900oklch(0.216 0.073 36.61)
  • 950oklch(0.131 0.054 29.23)

¿Qué puntaje obtiene Tailwind Amber 700 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.69Below AA
Aa3.17Below AA
Aa6.44AA
Aa12.63AAA
Aa18.13AAA
Aa1.69Below AA
Aa1.00Below AA
Aa1.87Below AA
Aa3.80Below AA
Aa7.46AAA
Aa10.70AAA
Aa3.17Below AA
Aa1.87Below AA
Aa1.00Below AA
Aa2.03Below AA
Aa3.98Below AA
Aa5.71AA
Aa6.44AA
Aa3.80Below AA
Aa2.03Below AA
Aa1.00Below AA
Aa1.96Below AA
Aa2.81Below AA
Aa12.63AAA
Aa7.46AAA
Aa3.98Below AA
Aa1.96Below AA
Aa1.00Below AA
Aa1.43Below AA
Aa18.13AAA
Aa10.70AAA
Aa5.71AA
Aa2.81Below AA
Aa1.43Below AA
Aa1.00Below AA

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

  • Aa5.02AA

    Blanco #FFFFFF

  • Aa4.60AA

    Neutro 100 #F5F5F5

  • Aa3.98Below AA

    Neutro 200 #E5E5E5

  • Aa1.99Below AA

    Neutro 400 #A3A3A3

  • Aa1.55Below AA

    Neutro 600 #525252

  • Aa3.57Below AA

    Neutro 900 #171717

  • Aa4.18Below AA

    Negro #000000

¿Qué paletas combinan con Tailwind Amber 700?

  • Análogos

    • #B4094E
    • #B40C09
    • #B45309
    • #B49A09
    • #87B409

  • Complementarios

    • #F37616
    • #B45309

  • Triádicos

    • #B45309
    • #5D2B05
    • #09B453

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

Amber 700 se lee como siena tostado, oklch(0.555 0.146 49), un marrón óxido con carácter que por fin funciona como texto pequeño sobre fondos claros. Alcanza WCAG 2.2 AA para texto normal sobre blanco (5.02:1, APCA Lc +74.04), así que #B45309 puede etiquetar una advertencia en línea y no solo dentro de una insignia. En modo oscuro baja a AA Large (4.18:1), así que aumenta el tamaño en esos casos. Las armonías se vuelven terrosas: el complementario #F37616 trae un naranja más brillante para contraste, el análogo #B49A09 se inclina hacia el ocre, y la tríada responde con un verde #09B453. Sobre slate frío se siente como un acento editorial cuidado. La lente de accesibilidad mantiene la advertencia habitual del amber: la protanopia y la deuteranopia lo atenúan a un olivo oscuro (#90971F), y la tritanopia lo empuja hacia el rojo (#AF292C), así que combina cualquier significado de precaución con un glifo y texto. Este es el amber al que recurrir cuando la calidez tiene que leerse en tamaño de cuerpo de texto.

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

Bloque @theme de Tailwind v4

@theme {
  --color-primary-50: #fff0e4;
  --color-primary-100: #f7d1bd;
  --color-primary-200: #eab092;
  --color-primary-300: #dc9066;
  --color-primary-400: #ca713c;
  --color-primary-500: #b45309;
  --color-primary-600: #953c00;
  --color-primary-700: #752800;
  --color-primary-800: #531700;
  --color-primary-900: #340800;
  --color-primary-950: #180000;

  --color-secondary-50: #f7f7e3;
  --color-secondary-100: #e3e2c1;
  --color-secondary-200: #d1ce9a;
  --color-secondary-300: #bfbb71;
  --color-secondary-400: #aca74b;
  --color-secondary-500: #9a9323;
  --color-secondary-600: #7a7400;
  --color-secondary-700: #5c5500;
  --color-secondary-800: #3e3900;
  --color-secondary-900: #231f00;
  --color-secondary-950: #0a0800;

  --color-accent-50: #ffeeeb;
  --color-accent-100: #f5c6c3;
  --color-accent-200: #e39d99;
  --color-accent-300: #d07470;
  --color-accent-400: #b74c4c;
  --color-accent-500: #9a232a;
  --color-accent-600: #820e1b;
  --color-accent-700: #67000f;
  --color-accent-800: #4c0007;
  --color-accent-900: #320002;
  --color-accent-950: #1a0000;

  --color-neutral-50: #f8f7f7;
  --color-neutral-100: #f1f0ef;
  --color-neutral-200: #e2e0df;
  --color-neutral-300: #cac6c4;
  --color-neutral-400: #a9a29e;
  --color-neutral-500: #877e78;
  --color-neutral-600: #67605b;
  --color-neutral-700: #4c4743;
  --color-neutral-800: #312e2b;
  --color-neutral-900: #1b1918;
  --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: #1B1918;
  --color-muted: #877E78;
  --color-border: #E2E0DF;
}

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

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

FAQ

Frequently asked questions

Tailwind Amber 700 (#B45309) is oklch(0.555 0.146 49) in the OKLCH color space.

Tailwind Amber 700 passes WCAG 2.2 AA on white for normal text. Contrast ratios: 5.02:1 on white, 4.18:1 on black.

On white, Tailwind Amber 700 has an APCA Lc of 74. On black, Lc is -27.7. 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 700 simulates to #90971f. Under protanopia it shifts to #8a891b. Under tritanopia it appears as #af292c. 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