What is Tailwind Amber 600 in OKLCH?

Tailwind Amber 600 (#D97706) is oklch(0.666 0.157 58.3) in the OKLCH color space.

Is Tailwind Amber 600 WCAG 2.2 AA accessible?

Tailwind Amber 600 passes WCAG 2.2 AA on black for normal text. Contrast ratios: 3.19:1 on white, 6.59:1 on black.

What is the APCA Lc for Tailwind Amber 600?

On white, Tailwind Amber 600 has an APCA Lc of 58.5. On black, Lc is -43.2. APCA is a perceptual contrast model, not a WCAG compliance standard.

How do I use Tailwind Amber 600 in Tailwind?

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

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

Under deuteranopia (most common, around 5 percent of men), Tailwind Amber 600 simulates to #b4bc28. Under protanopia it shifts to #afae21. Under tritanopia it appears as #d4373c. Always pair color with shape, label, or icon for accessibility.

Tailwind CSS token

Tailwind Amber 600 in OKLCH

Quick answer: Tailwind Amber 600 is #D97706, which converts to oklch(0.666 0.157 58.30). On white, it has a WCAG contrast ratio of 3.19:1 and an APCA score of Lc +58.49.

This meets the WCAG 2.2 AA Large text threshold (3:1) on white. 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.666 0.157 58.30)

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

Specs

oklch(0.666 0.157 58.30)

#D97706

Highest contrast: black

6.59:1

Normal AA

Normal AAA

Large AA

Large AAA

Lc -43.24

Try in Studio

Accessibility lens

Base#D97706
300#F2A66A
500#D97706
700#893D00

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

How does Tailwind Amber 600 go from primitive to component?

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

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

How does Tailwind Amber 600 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.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

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

Aa3.19Below AA
White #FFFFFF
Aa2.92Below AA
Neutral 100 #F5F5F5
Aa2.53Below AA
Neutral 200 #E5E5E5
Aa1.26Below AA
Neutral 400 #A3A3A3
Aa2.45Below AA
Neutral 600 #525252
Aa5.63AA
Neutral 900 #171717
Aa6.59AA
Black #000000

What palettes pair with Tailwind Amber 600?

Analogous

#D90645
#D91F06
#D97706
#D9CF06
#8BD906

Complementary

#F99D32
#D97706

Triadic

#D97706
#804604
#06D977

Where should you use Tailwind Amber 600 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

$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

Notes on Tailwind Amber 600

Amber 600 darkens the amber toward true orange, oklch(0.666 0.157 58.3), trading some glow for better behavior on light UI. As text on white it reaches AA Large (3.19:1), so it is safe for large warning headings but not body copy; on a near-black surface it steps up to WCAG 2.2 AA (6.59:1, APCA Lc -43.24) for normal text, making it the more usable amber in dark mode. The complementary #F99D32 is a lighter apricot for hovers, and the triad grounds on a brown #804604 and a green #06D977. Keep the neutrals cool so it reads as amber, not mud. The accessibility lens still matters: protanopia and deuteranopia shift it to an olive yellow-green (#B4BC28), and tritanopia reads it red (#D4373C), so a warm-versus-cool status cue needs an icon behind it. Use it where you want warmth with more restraint than the 500 stop.

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

More Amber in Tailwind

Nearest hues across families

Browse all colors

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

How do you export Tailwind Amber 600 as design tokens?

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

Frequently asked questions

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 600 in OKLCH

Accessibility lens

How does Tailwind Amber 600 go from primitive to component?

How does Tailwind Amber 600 scale from 50 to 950?

How does Tailwind Amber 600 score on WCAG 2.2 contrast?

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

What palettes pair with Tailwind Amber 600?

Analogous

Complementary

Triadic

Where should you use Tailwind Amber 600 in production UI?

Notes on Tailwind Amber 600

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

More Amber in Tailwind

Tailwind Amber 500 in OKLCH

Tailwind Amber 700 in OKLCH

Nearest hues across families

shadcn Orange in OKLCH

shadcn Red in OKLCH

Tailwind Rose 600 in OKLCH

Tailwind Rose 700 in OKLCH

How do you export Tailwind Amber 600 as design tokens?

Frequently asked questions

Ready to build your color system?