Color Picker
Pick any color visually, convert between HEX, RGB, HSL, and CMYK, generate harmonious palettes, and copy CSS color codes with one click.
#2661bfrgb(38, 97, 191)hsl(217, 67%, 45%)cmyk(80%, 49%, 0%, 25%)--color-primary: #2661bf;Color Palette Generator
Color Format Reference
| Format | Description | Example |
|---|---|---|
| HEX | 6-digit hexadecimal notation with # prefix, widely used in CSS and web design | #3b82f6 |
| RGB | Red, Green, Blue values from 0-255, the standard digital color model | rgb(59, 130, 246) |
| HSL | Hue (0-360), Saturation (0-100%), Lightness (0-100%) — intuitive for color selection | hsl(217, 91%, 60%) |
| CMYK | Cyan, Magenta, Yellow, Key (Black) — subtractive model used in print design | cmyk(76%, 47%, 0%, 4%) |
| CSS Custom Property | Reusable variable for design systems and component libraries | --color-primary: #3b82f6; |
Related Color Tools
Related Tools
Frequently Asked Questions
How do I use the color picker?
Click or drag anywhere on the gradient area to select a saturation and brightness. Use the hue slider below to change the base color. You can also type a HEX value directly into the input field to jump to a specific color.
What color formats are supported?
The color picker converts between HEX, RGB, HSL, and CMYK formats in real-time. Click any format value to copy it to your clipboard for use in CSS, design tools, or any application.
What are color harmonies?
Color harmonies are combinations of colors based on their position on the color wheel. Complementary colors are opposite each other, analogous colors are adjacent, triadic colors are evenly spaced at 120 degrees, and split-complementary uses the two colors adjacent to the complement.
Can I use these colors in CSS?
Yes. All output formats (HEX, RGB, HSL) are valid CSS color values. Click any value to copy it, then paste it directly into your CSS stylesheet, Tailwind config, or design tool.
What is CMYK used for?
CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in print design. The CMYK values shown are approximate conversions from the RGB color space and are useful for getting print-ready color specifications.
How does the palette generator work?
The palette generator creates harmonious color combinations based on color theory. Select a harmony type (complementary, analogous, triadic, split-complementary, tetradic, or monochromatic) and the tool generates a palette derived from your selected color.