Color Picker

The Color Picker lets you pick any color and instantly see it expressed in every notation you're likely to need for code, design tools, or print: HEX, RGB, RGBA, HSL, HSLA, HSV/HSB, and CMYK. Pick a shade with the native color swatch, or type a HEX value directly, and the conversion table updates as you go.

Why so many formats?

Different tools and file formats expect color in different notations, and they aren't interchangeable without conversion:

• HEX (#464AFF) is the shorthand used almost everywhere on the web — CSS, HTML, and design tools.
• RGB (rgb(70, 74, 255)) and RGBA (with an alpha/opacity channel) are the values CSS, canvas APIs, and most graphics libraries operate on under the hood.
• HSL (hsl(239, 100%, 64%)) and HSLA describe color as hue, saturation, and lightness — the most intuitive model for adjusting a color by hand ("make it a bit lighter" is just nudging L), common in design systems and CSS custom properties.
• HSV/HSB (hue, saturation, value/brightness) is the model used by most color pickers in image editors like Photoshop and GIMP.
• CMYK (cyan, magenta, yellow, key/black) is the subtractive model used in print production — if you're sending a design to a printer, they'll want CMYK, not RGB.

Having all seven side by side means you never have to hunt for a separate converter when you're handed a color in one format and need it in another.

How to use it

1. Click the color swatch to open your browser's native color picker, or type a HEX code (with or without the leading #) directly into the field.
2. The table updates immediately with the same color in HEX, RGB, RGBA, HSL, HSLA, HSV, and CMYK notation.
3. Copy any row's value from the table, or use the output card's copy/download actions to grab the whole table as CSV.

Both 3-digit shorthand hex (#abc) and full 6-digit hex (#aabbcc) are accepted; shorthand is normalized to its 6-digit equivalent before converting.

FAQ

Why do my HSV and HSL percentages differ for the same color? HSL and HSV are two different mathematical models built from the same RGB values — they share the hue angle but compute saturation differently, and HSL's "lightness" is not the same axis as HSV's "value/brightness." Both are valid; which one you need depends on which tool or spec you're matching.

Why is CMYK an approximation? The RGB→CMYK conversion uses the standard naive formula (K = 1 - max(R,G,B)/255, then deriving C/M/Y from it) — the same baseline used by most on-screen converters. Real-world print output also depends on your printer's ink profile and paper stock, so treat the CMYK values as a close estimate, not a guaranteed print match.

Does the alpha channel in RGBA/HSLA mean anything? The picker always outputs full opacity (1), since a plain color swatch has no transparency concept — the RGBA/HSLA rows just give you the correct syntax ready to edit if you need a specific alpha value.

Privacy

All color conversion happens locally in your browser — the color you pick is never sent to a server or logged anywhere.