tailwind / cyan

400

#22D3EE

bg-cyan-400

Color Codes

HEX#22D3EE
RGBrgb(34, 211, 238)
HSLhsl(188, 86%, 53%)
OKLCHoklch(79.7% 0.1339 211.6)
R34
G211
B238
Hue188°
Saturation86%
Lightness53%
OKL79.7%
Chroma0.1339

Tailwind Classes

Backgroundbg-cyan-400
Texttext-cyan-400
Borderborder-cyan-400
Ringring-cyan-400
Outlineoutline-cyan-400
Shadowshadow-cyan-400
Caretcaret-cyan-400
Accentaccent-cyan-400
Fillfill-cyan-400
Strokestroke-cyan-400
From (gradient)from-cyan-400
To (gradient)to-cyan-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 Cyan

cyan-300#67e8f9
cyan-500#06b6d4
cyan-200#a5f3fc
cyan-600#0891b2
cyan-100#cffafe
cyan-700#0e7490

Complementary ColorsColors opposite on the hue wheel

neutral-300#d4d4d4
neutral-400#a3a3a3
neutral-500#737373
neutral-600#525252
neutral-700#404040
red-300#fca5a5
red-400#f87171
red-500#ef4444

Full Cyan Palette

50#ecfeff100#cffafe200#a5f3fc300#67e8f9400#22d3ee500#06b6d4600#0891b2700#0e7490800#155e75900#164e63950#083344