CompleteToolkit

Color Code Converter

Convert any color between HEX, RGB, HSL, HSV and CMYK — edit any format and the rest sync live.

RGB
R
G
B
HSL
H
S
L

All formats

hex

#6d5bff

rgb

rgb(109, 91, 255)

hsl

hsl(247, 100%, 68%)

hsv

hsv(247, 64%, 100%)

cmyk

cmyk(57%, 64%, 0%, 0%)

About this tool

Different tools demand different color formats: CSS takes HEX or RGB or HSL, design software often shows HSV/HSB, and print work needs CMYK. Converting a single color between these by hand is fiddly and error-prone. This converter shows one color in all five formats at once — change any of them, or use the color picker, and every other format updates live to match.

Each format earns its place. HEX (#6D5BFF) is the web's compact standard. RGB is the same information as the three color channels. HSL (hue, saturation, lightness) is the format designers reach for when adjusting colors intuitively — nudge the lightness to make a shade darker without touching the hue. HSV/HSB is HSL's cousin used in many design tools' color pickers. CMYK is the subtractive model print uses, so the conversion is there when a screen color needs to head to print (with the usual caveat that screen-to-print color is approximate).

Every format has a one-click copy button that gives you the ready-to-use value — copy hsl(248, 100%, 68%) straight into your CSS, or the CMYK percentages into your design file. The live color swatch shows exactly what you're working with as you edit. It pairs naturally with the other color tools here: the Palette Extractor to pull colors from an image, the Contrast Checker to verify accessibility.

How to use the Color Code Converter

  1. 1Use the color picker, or type a value into any format field.
  2. 2Every other format updates live to match.
  3. 3Adjust HSL lightness or saturation for intuitive tweaks to a color.
  4. 4Click Copy on any format to grab the ready-to-use value.

Frequently asked questions

What's the difference between HSL and HSV?

Both use Hue and Saturation but differ in the third value: HSL uses Lightness (where 100% is white, 50% is the pure color), while HSV/HSB uses Value/Brightness (where 100% is the brightest form of the color, and white requires 0% saturation). Design tools often use HSV; CSS uses HSL.

When would I need CMYK?

For print. Screens emit light and mix colors additively (RGB); printing absorbs light and mixes inks subtractively (CMYK — Cyan, Magenta, Yellow, Key/black). If a color is heading to a printed medium, the CMYK values matter — though exact color depends on the printer and paper, so treat screen CMYK as approximate.

Why does my HEX color look different in print?

Because screen (RGB) and print (CMYK) are fundamentally different color models with different achievable ranges (gamuts). Bright, saturated screen colors — especially vivid blues and greens — often can't be reproduced exactly in CMYK ink. The conversion gives the nearest equivalent, but a proof is the only way to be sure.

What's the most common color format for websites?

HEX (#RRGGBB) is the most common in CSS and design handoffs for its brevity. RGB and especially HSL are also fully supported in CSS and increasingly popular — HSL because it's easier to create color variations by adjusting lightness and saturation. All are equivalent; this tool converts freely between them.

Related tools

HEX / RGB / HSL Converter

Paste a color in any format — HEX, rgb() or hsl() — and get all three, instantly.

Open tool

Color Palette Extractor

Pull the dominant colors from any image as copyable hex codes — extracted locally in your browser.

Open tool

Color Contrast Checker

Check text/background contrast against WCAG AA and AAA — with a live preview of how it actually reads.

Open tool

CSS Gradient Generator

Design linear and radial gradients visually — with the exact CSS one click away.

Open tool