HEX#6366F1
RGBrgb(99, 102, 241)
HSLhsl(239, 84%, 67%)
CMYKcmyk(59%, 58%, 0%, 5%)
OKLCHoklch(58.54% 0.2 277.12deg)
Shades
How to use
01
Pick or paste a color
Click the large swatch to open the native picker, or paste a 3 or 6 digit hex code into the field below it. Every format row updates as you type.
02
Copy the format you need
Each row, HEX, RGB, HSL, CMYK, and OKLCH, has its own copy button, so grabbing rgb(99, 102, 241) for a stylesheet takes exactly one click.
03
Explore the shades strip
Ten tints and shades of your color render along the bottom. Click any segment to make it the active color and read off its codes in all five formats.
Why Color Picker
- Native browser color picker, perfectly accurate.
- All major color formats in one place.
- Live preview of the selected color across a swatch.
Common questions
How many color formats does the picker show at once?
Five: HEX for markup and design tools, RGB for scripts and canvas work, HSL for human-friendly adjustments, CMYK as a print reference, and OKLCH for modern wide-gamut CSS. All of them describe the same color you picked.
How do I convert a hex code to RGB with this picker?
Paste the hex into the text field and read the RGB row. For example, #3D5BFF shows rgb(61, 91, 255) immediately, since each hex pair is just one channel written in base 16.
Why would I use HSL instead of hex from a color picker?
HSL separates what humans actually tweak: hue, saturation, and lightness. Making a hover state 10 percent darker is one number change in HSL, while in hex it means recomputing all three channels.
Is the CMYK value from a color code picker print-accurate?
Treat it as a starting point. The conversion here is the standard formula without an ICC profile, and real presses vary by paper and ink. For anything going to print, confirm the values against your printer's profile.
Can the picker generate lighter and darker shades?
Yes. The shades strip renders ten steps from a strongly brightened version of your color down to a strongly darkened one. It's a quick way to build tint scales for backgrounds, borders, and hover states.
Does the color picker support OKLCH for modern CSS?
It does. The OKLCH row gives you a css-ready value for the oklch() function, which is perceptually uniform and reaches wide-gamut colors that hex and rgb() can't express on P3 displays.
Do I need to install anything to pick colors here?
No. The tool uses your browser's built-in color input plus client-side conversion code, so it works the same on any modern browser with nothing to download and no account to create.