Color Converter

What this tool does

The Color Converter takes one colour and shows it in every format you are likely to need: HEX, RGB, HSL, HSV, CMYK and OKLCH. Pick a colour with the native colour picker, type a hex code, or drag the channel sliders — every other representation updates instantly. RGB is treated as the canonical value, and the large swatch at the top always reflects the current colour exactly. Each format row has a one-click copy button so you can paste a ready-made CSS string straight into your stylesheet. Everything is calculated in your browser, so the tool works offline and never transmits your colours anywhere.

Why you might need it

Colour formats are scattered across every part of a project. A designer hands you a HEX code, a CSS file uses hsl() so a theme is easy to tweak, an image editor reports HSV, a print shop wants CMYK, and the newest CSS specs encourage oklch() for perceptually even palettes. Converting between them by hand is tedious and error-prone. This tool removes that friction: you enter a colour once and read off whichever format the task in front of you needs. It is equally handy for the reverse problem — you have a hex string and want to know how saturated or light it actually is, which the HSL and HSV breakdowns answer at a glance.

How to use it

1. Set a starting colour: open the native colour picker, type a hex code into the HEX field, or move any slider.
2. Use the RGB sliders to nudge red, green and blue between 0 and 255.
3. Use the HSL sliders to adjust hue, saturation and lightness — handy when you want a lighter or more muted version of the same hue.
4. Watch the swatch and every format row update live as you change anything.
5. Click the copy icon on any row to copy that exact string, or Copy all to grab every format at once.

The hex input accepts both full six-digit codes and three-digit shorthand. If you type something that is not a valid hex colour, a short hint appears and the sliders simply keep their last good value.

Common pitfalls

The most common surprise is small rounding drift. HEX and RGB are exact, but HSL, HSV and CMYK are derived and rounded for readability, so converting back and forth can move a channel by a unit or two. Because this tool always stores RGB as the source of truth, the drift stays tiny — but it is worth knowing if you compare values against another converter. A second pitfall is treating the CMYK output as print-ready. The conversion here uses the standard naive sRGB formula; genuine print colour depends on the specific inks, paper stock and an ICC profile, so use these CMYK numbers as an approximation. Finally, remember that HSL lightness and HSV value are not the same thing: a fully saturated colour sits at 50% HSL lightness but 100% HSV value.

Tips and advanced use

To build a tint or shade of a colour, lock the hue and saturation and move only the HSL Lightness slider — you get a consistent family of related colours. For accessible palettes, lean on OKLCH: because it is perceptually uniform, stepping the lightness by equal amounts produces swatches that look evenly spaced, which HSL cannot promise. When you are matching a colour from a screenshot, paste its hex code and read the HSV saturation to judge how vivid it is. And because every calculation happens locally, it is perfectly safe to work with unreleased brand colours or client palettes here — none of it is ever uploaded, logged, or seen by anyone but you.