Super Boring Tools

Search tools

Find a tool by name or what it does.

Color Converter

Type or pick a color and get HEX, RGB, HSL, HSV, and CMYK side by side, with a live swatch preview.

HEX, RGB, HSL, or HSV, or pick a color. Every format updates live, all in your browser.

Formats

HEX#6366f1
RGBrgb(99, 102, 241)
HSLhsl(239, 84%, 67%)
HSVhsv(239, 59%, 95%)
CMYKcmyk(59%, 58%, 0%, 5%)

How to convert HEX to RGB, HSL, HSV, or CMYK

  1. Enter or pick a color

    Type or paste a color into the field (HEX with or without the #, rgb(), hsl(), or hsv()), or open the swatch to pick one, or sample any color on your screen. The format is detected automatically.

  2. Read the conversions

    HEX, RGB, HSL, HSV, and CMYK plus a swatch preview update live as you type or pick. An alpha channel, if present, is carried into the HEX, RGB, HSL, and HSV outputs.

  3. Copy what you need

    Each format row has its own copy button, or use Copy all formats to grab HEX, RGB, HSL, HSV, and CMYK in one block.

Why use this tool

Five formats side by side

One input produces HEX, RGB, HSL, HSV, and CMYK at the same time, so comparing color models never means running the conversion twice.

Pick a color, not just type it

A swatch opens a color picker, and where your browser allows it you can sample any color already on your screen without knowing its code.

Accepts loose notation

Shorthand #f43, 6 and 8 digit hex, a missing # sign, and comma, space, or slash separated rgb(), hsl(), hsv(), and hsb() arguments all parse.

Alpha channel aware

Transparent colors come out as 8-digit hex and rgba, hsla, and hsva strings; fully opaque colors keep the shorter notation.

Live swatch on a checkerboard

The parsed color renders over a checker pattern, so partial transparency is visible instead of something you guess from the numbers.

Runs entirely in the page

Parsing and conversion are plain JavaScript in your browser. Nothing you type is transmitted or stored.

About this tool

This color converter parses a color written as HEX, RGB, HSL, or HSV (also called HSB) and rewrites it as all of those plus CMYK at once. Parsing is plain JavaScript running in the page: hex strings of 3, 4, 6, or 8 digits are expanded, functional notation is split on commas, spaces, or slashes, and HSL and HSV inputs are mapped through RGB with the standard formulas. You can also open a swatch to pick a color, or where your browser supports it, sample any color already on your screen. The output updates on every change, and a swatch renders the parsed color over a checkerboard so any transparency is visible.

The reason this job keeps coming up is that different tools speak different dialects. CSS codebases mix hex and hsl(), design apps report HSB values, canvas or WebGL code wants raw RGB channels, and print work is quoted in CMYK. Pasting a brand color from a style guide to read back its hsl() form, or turning a designer's HSB numbers into an 8-digit hex for a stylesheet, is exactly the kind of two-second task this page exists for.

Everything happens locally, so the values you type or pick are never sent to a server. Conversion is also only one part of working with color: to test a foreground and background pairing against WCAG rules use the contrast checker, to build a scheme outward from a starting color try the color palette generator, and for CSS backgrounds there is a gradient generator.

Frequently asked questions

Which color formats are supported?
You can enter a color as HEX (#f43f5e, #f43, or with an alpha like #f43f5e80), rgb()/rgba(), hsl()/hsla(), or hsv()/hsb(). The tool detects the format automatically and converts it to HEX, RGB, HSL, HSV, and CMYK.
Can I pick a color instead of typing one?
Yes. The swatch next to the field opens a color picker, and where your browser supports it, a screen sampler lets you grab any color you can see, on the page or off it. The picked color fills in and converts just like a typed one.
How is CMYK worked out?
CMYK is derived from the RGB values with the standard conversion and shown as whole percentages of cyan, magenta, yellow, and black. It is a device-independent estimate, so a print shop's color profile can shift the exact numbers. CMYK has no alpha, so transparency is not carried into it.
Does it handle transparency?
Yes. If your input includes an alpha channel, it is preserved: HEX shows an 8-digit value and the RGB, HSL, and HSV outputs use their alpha forms. Fully opaque colors use the shorter notation.
Is anything sent to a server?
No. All color parsing and conversion happens in your browser. Nothing you type leaves your device, is sent to a server, or is stored.
What is the difference between HSL and HSV?
Both describe a color by hue, but HSL uses saturation and lightness while HSV (also called HSB) uses saturation and value or brightness. They are different models, so the saturation numbers will not match between them even for the same color.
Why does my color look slightly different after converting?
Conversions round to whole channel values, so a color that started as HSL may shift by a fraction when expressed as integer RGB. The swatch always reflects the exact parsed color.

Related tools