tailwind / amber

500

#F59E0B

bg-amber-500

Color Codes

HEX#F59E0B
RGBrgb(245, 158, 11)
HSLhsl(38, 92%, 50%)
OKLCHoklch(76.9% 0.1646 70.1)
R245
G158
B11
Hue38°
Saturation92%
Lightness50%
OKL76.9%
Chroma0.1646

Tailwind Classes

Backgroundbg-amber-500
Texttext-amber-500
Borderborder-amber-500
Ringring-amber-500
Outlineoutline-amber-500
Shadowshadow-amber-500
Caretcaret-amber-500
Accentaccent-amber-500
Fillfill-amber-500
Strokestroke-amber-500
From (gradient)from-amber-500
To (gradient)to-amber-500

UI Previews

Solid Button
Outlined Button
Ghost Button
Badge / Tag
New FeatureBeta
Text on White

The quick brown fox

jumps over the lazy dog — 0123456789

Text on Dark

The quick brown fox

jumps over the lazy dog — 0123456789

Card Header
Dashboard Overview

Monthly active users increased by 24% this quarter.

Alert / Banner
●Your changes have been saved successfully.
Progress Bar
68%
Input / Focus Ring
Gradient (to white)
Gradient (to black)

Similar ColorsOther shades of Amber

amber-400#fbbf24
amber-600#d97706
amber-300#fcd34d
amber-700#b45309
amber-200#fde68a
amber-800#92400e

Complementary ColorsColors opposite on the hue wheel

gray-400#9ca3af
gray-700#374151
blue-500#3b82f6
gray-300#d1d5db
gray-500#6b7280
slate-400#94a3b8
slate-500#64748b
slate-600#475569

Full Amber Palette

50#fffbeb100#fef3c7200#fde68a300#fcd34d400#fbbf24500#f59e0b600#d97706700#b45309800#92400e900#78350f950#451a03