Color Picker
Pick a color, tune channels, and copy production-ready values.
Selected color
#3B82F6
Picker
Drag in the field to choose saturation and lightness.
217deg
Quick Picks
RGB Channels
59
130
246
Copy Values
Use the selected color in code or design tools.
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
CSS Var
--color-picked: #3B82F6;
Tints & Shades
Click a generated swatch to use it.
Shade 40
#234E94
Shade 20
#2F68C5
Shade 10
#3575DD
Base
#3B82F6
Tint 10
#4F8FF7
Tint 20
#629BF8
Tint 40
#89B4FA
Theme Palette
CSS variables for a full UI theme based on your primary color.
Background
#FAFAFA
Foreground
#0C0D0E
Primary
#3C83F6
Primary Foreground
#FAFAFA
Secondary
#BA8D45
Secondary Foreground
#FAFAFA
Muted
#EBEDEF
Muted Foreground
#6B717B
Accent
#503EDA
Accent Foreground
#FAFAFA
Border
#DEE0E3
Destructive
#DC2828