What is Tailwind Amber 700 in OKLCH?

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

Is Tailwind Amber 700 WCAG 2.2 AA accessible?

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.

What is the APCA Lc for Tailwind Amber 700?

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.

How do I use Tailwind Amber 700 in Tailwind?

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

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

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.

Tailwind CSS token

Tailwind Amber 700 in OKLCH

Quick answer: Tailwind Amber 700 is #B45309, which converts to oklch(0.555 0.146 49.00). On white, it has a WCAG contrast ratio of 5.02:1 and an APCA score of Lc +74.04.

This meets the WCAG 2.2 AA Normal text threshold (4.5: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.555 0.146 49.00)

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

Specs

oklch(0.555 0.146 49.00)

#B45309

Highest contrast: white

5.02:1

Normal AA

Normal AAA

Large AA

Large AAA

Lc +74.04

Try in Studio

Accessibility lens

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

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

How does Tailwind Amber 700 go from primitive to component?

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

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

How does Tailwind Amber 700 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.69Below AA

Aa3.17Below AA

Aa6.44AA

Aa12.64AAA

Aa18.13AAA

Aa1.69Below AA

Aa1.00Below AA

Aa1.87Below AA

Aa3.80Below AA

Aa7.46AAA

Aa10.71AAA

Aa3.17Below AA

Aa1.87Below AA

Aa1.00Below AA

Aa2.03Below AA

Aa3.98Below AA

Aa5.72AA

Aa6.44AA

Aa3.80Below AA

Aa2.03Below AA

Aa1.00Below AA

Aa1.96Below AA

Aa2.81Below AA

Aa12.64AAA

Aa7.46AAA

Aa3.98Below AA

Aa1.96Below AA

Aa1.00Below AA

Aa1.43Below AA

Aa18.13AAA

Aa10.71AAA

Aa5.72AA

Aa2.81Below AA

Aa1.43Below AA

Aa1.00Below AA

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

Aa5.02AA
White #FFFFFF
Aa4.61AA
Neutral 100 #F5F5F5
Aa3.99Below AA
Neutral 200 #E5E5E5
Aa1.99Below AA
Neutral 400 #A3A3A3
Aa1.56Below AA
Neutral 600 #525252
Aa3.57Below AA
Neutral 900 #171717
Aa4.18Below AA
Black #000000

What palettes pair with Tailwind Amber 700?

Analogous

#B4094E
#B40C09
#B45309
#B49A09
#87B409

Complementary

#F37616
#B45309

Triadic

#B45309
#5D2B05
#09B453

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

#B45309

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 700

Amber 700 reads as burnt sienna, oklch(0.555 0.146 49), a grounded rust-brown that finally works as small text on light backgrounds. It clears WCAG 2.2 AA for normal text on white (5.02:1, APCA Lc +74.04), so #B45309 can label a warning inline rather than only inside a badge. In dark mode it eases to AA Large (4.18:1), so size those up. The harmonies turn earthy: the complementary #F37616 brings a brighter orange for contrast, the analogous #B49A09 leans toward ochre, and the triad answers with a green #09B453. On cool slate it feels like a considered editorial accent. The accessibility lens keeps the amber caveat: protanopia and deuteranopia mute it to a dark olive (#90971F), and tritanopia pushes it red (#AF292C), so pair any caution meaning with a glyph and text. This is the amber to reach for when the warmth has to read at body size.

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

More Amber in Tailwind

Nearest hues across families

Browse all colors

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

How do you export Tailwind Amber 700 as design tokens?

Export a W3C DTCG token document for the Tailwind Amber 700 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 700 in OKLCH

Accessibility lens

How does Tailwind Amber 700 go from primitive to component?

How does Tailwind Amber 700 scale from 50 to 950?

How does Tailwind Amber 700 score on WCAG 2.2 contrast?

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

What palettes pair with Tailwind Amber 700?

Analogous

Complementary

Triadic

Where should you use Tailwind Amber 700 in production UI?

Notes on Tailwind Amber 700

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

More Amber in Tailwind

Tailwind Amber 500 in OKLCH

Tailwind Amber 600 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 700 as design tokens?

Frequently asked questions

Ready to build your color system?