Color Converter

1. Pick a color using the color picker, or type a HEX, RGB, or HSL value into any of the input fields.
2. All other fields update instantly. The preview swatch shows your selected color.
3. The HSV, CMYK, and closest CSS named color are calculated automatically.
4. Use the Copy buttons to copy any format to your clipboard.

This converter uses the color-convert library, the same library that powers the popular tailwindcss color system. It performs mathematically correct conversions between RGB, HSL, HSV, CMYK, HEX, and the CSS named color list. Conversions are bidirectional — type any value in any field and the others will update.

A color model is a mathematical way to describe colors as tuples of numbers. Different models are useful for different purposes:

• HEX — the standard way to specify colors in HTML and CSS. Six hexadecimal digits encode the red, green, and blue channels (two digits each, 00–FF).
• RGB (Red, Green, Blue) — the additive color model used by screens. Each channel is a number from 0 to 255 (or 0% to 100%). Used in CSS, image formats (JPEG, PNG), and graphics APIs.
• HSL (Hue, Saturation, Lightness) — a more human-friendly representation. Hue is the color wheel position (0–360°), Saturation is intensity (0–100%), Lightness is brightness (0–100%). Used in CSS, design tools, and color picker UIs.
• HSV (Hue, Saturation, Value) — similar to HSL but with a different definition of brightness. Used in graphics software (Photoshop, GIMP, Inkscape).
• CMYK (Cyan, Magenta, Yellow, Key/Black) — the subtractive color model used by printers. Each value is a percentage from 0% to 100%.
• CSS named colors — the 148 color names defined in the CSS Color Module Level 4 (e.g. rebeccapurple, cornflowerblue). Useful for accessibility and readability.

Screens emit light (additive RGB color). Printers absorb light (subtractive CMYK color). The gamut — the range of colors a device can produce — is different for each. Bright greens, deep blues, and saturated reds often look duller in print because CMYK cannot reproduce them. For accurate print color, use a CMYK-aware design tool (Illustrator, InDesign) and request a proof from your printer.

Both express color as hue, saturation, and a brightness value, but they define brightness differently. In HSL, 100% lightness is always pure white regardless of saturation. In HSV, 100% value is the pure color (white only happens when saturation is 0). HSL tends to be more intuitive for designers; HSV tends to be more intuitive for image processing algorithms.

The converter computes the Euclidean distance between your color and every color in the CSS named color list (in RGB space), then returns the closest one. This is useful when you want to use a named color in your CSS but only have a HEX value.

No. Everything happens in your browser. Your input never leaves your device.