Color Picker
A full-featured color picker with HEX, RGB, HSL, and CMYK conversion. Interactive sliders for precise control, color harmony generator (complementary, triadic, analogous, split), tints & shades palette, and one-click copy for every format.
Click the swatch to open the native picker
59
130
246
217
91
60
Color Harmonies
Color Formats
HEX#3B82F6
RGBrgb(59, 130, 246)
RGBArgba(59, 130, 246, 1)
HSLhsl(217, 91%, 60%)
CMYKcmyk(76%, 47%, 0%, 4%)
CSS var--color: #3b82f6;
Tailwind[#3b82f6]
Tints & Shades
Features
- HEX, RGB, RGBA, HSL, CMYK, and CSS variable formats
- Interactive RGB and HSL sliders with live gradient preview
- Color harmony generator: complementary, triadic, analogous, split
- 10-step tints & shades palette
- Click any harmony or shade swatch to set it as the active color
- One-click copy for every format
Frequently Asked Questions
How do I convert a HEX color to RGB?
Enter your HEX code in the input field (e.g. #3b82f6) and the RGB, HSL, and CMYK equivalents are shown instantly below. Click the copy icon next to any format to copy it.
What is a complementary color?
A complementary color is directly opposite on the color wheel (180° away in hue). Pairing a color with its complement creates maximum contrast and visual pop — commonly used in logos and web design.
What are color harmonies?
Color harmonies are predefined relationships between colors on the color wheel. Complementary uses 2 opposite colors. Triadic uses 3 evenly spaced colors. Analogous uses 3 adjacent colors. Split-complementary uses a base color and two colors adjacent to its complement.
What is the difference between HSL and RGB?
RGB (Red, Green, Blue) describes color by the intensity of its three primary components. HSL (Hue, Saturation, Lightness) is more intuitive — Hue is the color wheel angle (0–360°), Saturation is color intensity (0–100%), and Lightness is brightness (0–100%). HSL makes it easy to create lighter/darker shades.