🎨
Pro Color Picker
🎨 Color Picker
🌈 Harmonies
📐 Contrast
🖌 Gradients
💾 Saved
← Home
Current
Previous
Color Values
HEX
RGB
HSL
HSB
CMYK
📋 Copy
R
G
B
A
📋 Copy RGB
H°
S%
L%
A%
📋 Copy HSL
H°
S%
B%
A%
📋 Copy HSB
C%
M%
Y%
K%
📋 Copy CMYK
Sliders
R
79
G
142
B
247
A
100
💾 Save Color to Palette
🔍 Eyedropper (Pick from Screen)
🎲 Random
📋 Copy HEX
Material Design Palette
Color Harmonies
Complementary
Analogous
Triadic
Tetradic
Split
Monochromatic
Shades & Tints
Gradient Builder
Linear
Radial
Conic
→ Right
← Left
↓ Bottom
↑ Top
↘ Diagonal
↗ Diagonal
+ Add Stop
📋 Copy CSS
background: linear-gradient(to right, #4f8ef7 0%, #8b5cf6 100%);
Saved Colors
(0)
Save colors from the left panel to see them here.
Color Information
HEX
#4f8ef7
RGB
79, 142, 247
HSL
220°, 90%, 64%
HSB
220°, 68%, 97%
CMYK
68, 43, 0, 3
Luminance
—
Brightness
—
Type
—
WCAG Contrast Checker
Background Color
Contrast Ratio
—
AA Normal
—
AA Large
—
AAA Normal
—
AAA Large
—
Large text sample
Normal text sample. This is how your color looks on white background.
Large text sample
Normal text on dark. Check readability here.
White on color
Normal text on your selected color background.
CSS Variables
--color-primary:
#4f8ef7
;
--color-primary-rgb:
79, 142, 247
;
--color-primary-hsl:
hsl(220, 90%, 64%)
;
📋 Copy CSS Variables
Tailwind Classes
bg-[#4f8ef7]
text-[#4f8ef7]
border-[#4f8ef7]
ring-[#4f8ef7]
📋 Copy Tailwind