Color Picker
Pick a color and see it in HEX, RGB, HSL and HSV — all four formats at once. Generate complementary, analogous, triadic, split-complementary and monochromatic palettes. See tints and shades of the current color. Click any swatch to copy it.
How to use
1
Pick a color
Use the color picker to choose a base color.
2
See the conversions
See the color in HEX, RGB, HSL and HSV formats simultaneously.
3
Generate palettes
Click a palette type to generate complementary, analogous or other harmonious colors.
4
Copy any value
Click any swatch or value to copy it to your clipboard.
HEX
RGB
HSL
HSV
Tints & shades of the current color
#e8eefd
#c2d4f9
#9db9f6
#789ff2
#5284ef
#2d69eb
#1453db
#1145b6
#0d3791
#0a296b
#071b46
#04122f
#020917
Harmonious palettes
Complementary
#2563ebBase
#ebac24
Analogous
#2563ebBase
#24c6eb
#4824eb
Triadic
#2563ebBase
#eb2463
#63eb24
Split complementary
#2563ebBase
#eb4824
#c6eb24
Monochromatic
#2563ebBase
#04122f
#0b2c75
#1659e9
#8aacf4
#d0defb
Features
Four color formats
HEX, RGB, HSL and HSV — all shown at once.
Five palette types
Complementary, analogous, triadic, split-complementary and monochromatic.
Tints and shades
See lighter and darker variations of the current color.
Copy any value
Click any swatch or color value to copy it instantly.
Common use cases
- Convert a HEX color to RGB for CSS
- Generate a complementary color for a design
- Find tints and shades of a brand color
- Explore harmonious palettes for a project