CODDY Tool

Color Converter

Convert a colour between HEX, RGB, HSL, HSV, CMYK and OKLCH.

Enter a colour in any notation and get every other format at once. Supports hex in three, four, six and eight digits, rgb() and hsl() in both comma and modern space syntax, CMYK for print, and OKLCH for perceptually even design work.

Everything you enter stays in this browser tab. Nothing is sent to our servers, logged or stored.

Loading tool…

What Color Converter supports

  • HEXThe web default, with optional alpha.
  • RGBRed, green and blue from 0 to 255.
  • HSLHue, saturation and lightness.
  • HSVThe model behind most colour pickers.
  • CMYKFour-colour process, for print.
  • OKLCHPerceptually even; modern CSS.

About Color Converter

Every colour format describes the same light in a different way, and each one exists because it suits a particular job. RGB matches how a screen emits light. HSL and HSV are built for humans, separating the question of which colour from how strong and how bright. CMYK describes ink on paper. OKLCH is the newest and is designed so that equal numeric steps look like equal steps to the eye.

This converter parses whatever you paste — hex with or without the hash, three, four, six or eight digits, functional notation in comma or space syntax, and the common colour names — and shows all six formats together, so you never have to chain two converters to get where you are going.

One conversion deserves a warning. CMYK is a device-dependent model: the numbers here follow the standard naive formula, which is fine for a rough idea but is not colour-managed. If the output is going to a commercial printer, get the values from their ICC profile rather than from any web converter, including this one.

How to convert a colour

  1. Enter a colour

    Type or paste any format — #4a49d8, rgb(74 73 216), hsl(241 68% 57%) or a name like teal. Or use the colour picker.

  2. Read every format

    All six notations update as you type. Each row has a copy button that copies the CSS-ready value.

  3. Fine-tune with the sliders

    Adjust hue, saturation and lightness directly and watch every other format follow.

Which format should you use?

  • HEX — the safe default for the web. Universally supported, compact, and what most design tools hand you.
  • RGB — use when you need an alpha channel readable at a glance, or when a value comes from code rather than a designer.
  • HSL — best when you want to adjust a colour by hand. Changing lightness alone is trivial; in hex it is guesswork.
  • HSV — what the square-and-slider picker in most graphics applications actually operates on.
  • CMYK — print only. Screens cannot display it, so the preview is an approximation of an approximation.
  • OKLCH — modern CSS, and the right choice for generating palettes and colour scales, because its lightness matches perceived lightness.

Why hex is eight digits sometimes

Six-digit hex encodes red, green and blue as two digits each. An eight-digit value adds a fourth pair for alpha, where 00 is fully transparent and ff is fully opaque — so #ff000080 is red at roughly 50% opacity.

The three and four digit forms are shorthand: each digit is doubled. #abc means #aabbcc, not #0a0b0c, which is a common and confusing mistake to make by hand.

Frequently asked questions

Is the CMYK conversion accurate enough for printing?

For getting a sense of the values, yes. For an actual print run, no. Real CMYK depends on the press, the ink and the paper, all captured in an ICC profile. Any converter that does not ask which profile you are targeting — this one included — is giving you an approximation.

What is OKLCH and should I be using it?

OKLCH is a perceptual colour space supported by every current browser. Its advantage is that lightness means what your eye thinks it means: 60% lightness looks equally bright at yellow and at blue, which is not true in HSL. That makes it excellent for generating consistent colour scales. For a single fixed brand colour, hex is still perfectly fine.

Why does my colour change slightly when I convert it back?

Rounding. Hex stores each channel as a whole number from 0 to 255, so a value that lands between two integers has to pick one. The difference is at most one step out of 256 and is invisible on screen.

Does the colour I enter get sent anywhere?

No. Everything is calculated in JavaScript in this browser tab. There is no request, no logging and no upload — you could disconnect from the network and the tool would work identically.

Color Converter is free to use with no account, no watermark and no usage limits. Last updated 14 August 2026.