tailwind / yellow

400

#FACC15

bg-yellow-400

Color Codes

HEX#FACC15
RGBrgb(250, 204, 21)
HSLhsl(48, 96%, 53%)
OKLCHoklch(86.1% 0.173 91.9)
R250
G204
B21
Hue48°
Saturation96%
Lightness53%
OKL86.1%
Chroma0.173

Tailwind Classes

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

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 Yellow

yellow-300#fde047
yellow-500#eab308
yellow-200#fef08a
yellow-600#ca8a04
yellow-100#fef9c3
yellow-700#a16207

Complementary ColorsColors opposite on the hue wheel

indigo-300#a5b4fc
blue-700#1d4ed8
indigo-400#818cf8
blue-600#2563eb
gray-500#6b7280
gray-400#9ca3af
gray-700#374151
blue-500#3b82f6

Full Yellow Palette

50#fefce8100#fef9c3200#fef08a300#fde047400#facc15500#eab308600#ca8a04700#a16207800#854d0e900#713f12950#422006