Tailwind CSS token

Tailwind Amber 500 in OKLCH

Quick answer: Tailwind Amber 500 is #F59E0B, which converts to oklch(0.769 0.165 70.10). On white, it has a WCAG contrast ratio of 2.14:1 and an APCA score of Lc +41.78.

This falls below the WCAG 2.2 AA Large text threshold (3:1) on white; pair with a darker foreground. The color shipped in Tailwind CSS v4.0 (January 2025) as part of the OKLCH default palette, which has 92% global browser support (caniuse, April 2026).

oklch(0.769 0.165 70.10)

Tailwind Amber 500 is a Tailwind utility color. This page frames #F59E0B as a utility stop: copy the generated @theme scale below, or map it into your own tokens.

Specs
oklch(0.769 0.165 70.10)
#F59E0B
Highest contrast: black
9.77:1
Normal AAmeets WCAG 2.2
Normal AAAmeets WCAG 2.2
Large AAmeets WCAG 2.2
Large AAAmeets WCAG 2.2
Lc -60.46
Try in Studio
Accessibility lens
- Base#F59E0B
- 300#FFBF6F
- 500#F59E0B
- 700#985400
Toggle a lens to preview this color under color vision differences.

How does Tailwind Amber 500 go from primitive to component?

Primitive
Semantic
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).

How does Tailwind Amber 500 scale from 50 to 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)

How does Tailwind Amber 500 score on WCAG 2.2 contrast?

Every fg × bg combination, with WCAG 2.2 verdicts.

AAA (7:1+)

AA (4.5:1+)

Below AA (under 4.5:1)

Hover for 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

Does Tailwind Amber 500 pass WCAG 2.2 on common neutral backgrounds?

Aa2.14Below AA
White #FFFFFF
Aa1.96Below AA
Neutral 100 #F5F5F5
Aa1.70Below AA
Neutral 200 #E5E5E5
Aa1.17Below AA
Neutral 400 #A3A3A3
Aa3.63Below AA
Neutral 600 #525252
Aa8.34AAA
Neutral 900 #171717
Aa9.77AAA
Black #000000

What palettes pair with Tailwind Amber 500?

Analogous
- #F50B3B
- #F53C0B
- #F59E0B
- #EBF50B
- #89F50B
Complementary
- #F8BB54
- #F59E0B
Triadic
- #F59E0B
- #9E6506
- #0BF59E

Where should you use Tailwind Amber 500 in production UI?

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

Notes on Tailwind Amber 500

Amber 500 is pure signage, oklch(0.769 0.165 70.1), the golden yellow-orange for warnings, ratings, and highlight moments. It is among the lowest-contrast text colors on a light page, Below AA at 2.14:1 (APCA Lc +41.78), so #F59E0B has to be a fill, a star, or a large graphic, never small text on white. On a near-black surface it flips to WCAG 2.2 AAA (9.77:1, APCA Lc -60.46). Its analogous run is a built-in warm gradient from red-orange #F53C0B to yellow #EBF50B, and the triad throws a mint #0BF59E for a cool counterpoint. Rest it on charcoal or slate so it reads as gold rather than glare. The accessibility lens keeps it bright but shifts its family: protanopia and deuteranopia push it to yellow-green (#D4DB37), close to where greens sit, and tritanopia turns it red (#F14B51). Do not let amber alone separate caution from go.

What other Tailwind and shadcn colors relate to Tailwind Amber 500?

More Amber in Tailwind

Nearest hues across families

Browse all colors

Tailwind v4 @theme block

@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;
}

How do you export Tailwind Amber 500 as design tokens?

Export a W3C DTCG token document for the Tailwind Amber 500 50 to 950 scale, ready for Style Dictionary or any DTCG aware pipeline.

FAQ

Frequently asked questions

What is Tailwind Amber 500 in OKLCH?

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

Is Tailwind Amber 500 WCAG 2.2 AA accessible?

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.

What is the APCA Lc for Tailwind Amber 500?

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.

How do I use Tailwind Amber 500 in Tailwind?

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

How does Tailwind Amber 500 look to people with color vision differences?

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.

Ready to build your color system?

Free forever, no credit card, Pro when you need more.

Built by a product designer who ships to code.

Generate system See pricing

Tailwind Amber 500 in OKLCH

Accessibility lens

How does Tailwind Amber 500 go from primitive to component?

How does Tailwind Amber 500 scale from 50 to 950?

How does Tailwind Amber 500 score on WCAG 2.2 contrast?

Does Tailwind Amber 500 pass WCAG 2.2 on common neutral backgrounds?

What palettes pair with Tailwind Amber 500?

Analogous

Complementary

Triadic

Where should you use Tailwind Amber 500 in production UI?

Notes on Tailwind Amber 500

What other Tailwind and shadcn colors relate to Tailwind Amber 500?

Tailwind Amber 600 in OKLCH

Tailwind Amber 700 in OKLCH

shadcn Orange in OKLCH

shadcn Red in OKLCH

Tailwind Rose 600 in OKLCH

Tailwind Rose 700 in OKLCH

Tailwind v4 @theme block

How do you export Tailwind Amber 500 as design tokens?

Frequently asked questions

Ready to build your color system?