Ctrl K

Color code converter

Convert a colour between HEX, RGB, HSL and CMYK in your browser: nothing is uploaded, you can paste any notation or pick a colour, and you see at once whether white or black text is readable on it.

Paste a code in another format and the rest is filled in. A CSS colour name works too.

or choose a colour
RGB
HSL
CMYK
  • HEX
  • RGB
  • HSL
  • CMYK

Readability of text on this colour

White text
Black text

How it works

  1. Enter a colour

    Type or paste a code (#1e90ff, rgb(30, 144, 255), hsl(...)) or a colour name, or pick a colour with the colour picker.

  2. See every format

    HEX, RGB, HSL and CMYK appear side by side at once. Change one value and the rest follows.

  3. Copy what you need

    Copy the code for your CSS, design or print with one click. Below you see whether white or black text is easy to read on it.

The formats

  • HEX (#1e90ff) is the usual way to write a colour on the web. The three pairs of digits are the amount of red, green and blue, from 00 to ff. A short form such as #f80 is the same as #ff8800.
  • RGB (rgb(30, 144, 255)) gives red, green and blue as a number from 0 to 255.
  • HSL (hsl(210, 100%, 56%)) gives hue (0 to 360 degrees on the colour wheel), saturation and lightness. Handy when you want to make a colour lighter or darker without changing its hue.
  • CMYK (cmyk(88%, 44%, 0%, 0%)) is the notation of printing: cyan, magenta, yellow and black.

What input works?

In the top field you can paste a code in any format: #1e90ff, 1e90ff, #f80, rgb(30 144 255), hsl(210, 100%, 56%) or a name such as dodgerblue. A transparency value (alpha) is ignored.

Readability of text

Under the result you see the contrast of the colour with white and with black, following the accessibility guidelines (WCAG). A ratio of 4.5 : 1 or more is easy to read for normal text (level AA), 7 : 1 or more is excellent (AAA), and from 3 : 1 large text is still fine. Use it to choose between white or black text.

Using the result in CSS

Modern CSS accepts all of these notations, so use the one that makes your task easiest. HSL is the most practical when you build a palette: keep the hue and change the lightness to make a hover colour, a border or a background tint. HEX is compact and the one that design tools export. If you need a transparent version, write it as rgb(30 144 255 / 50%) or add two hex digits (#1e90ff80).

Choosing accessible colours

A text colour is only readable if the contrast with its background is high enough. WCAG asks for 4.5 : 1 for normal text and 3 : 1 for large text. The check under the result gives the ratio for white and black text; for a mid-tone background, one of the two will usually pass and the other will not. Test text colours on buttons and banners before you ship them.

Print and screen differ

CMYK values are calculated, not measured. Bright screen colours such as a saturated blue or green cannot be printed exactly with ink, so ask your printer for a proof of brand colours.

See also: CSS minifier · CSS beautifier.

Frequently asked questions

What is the difference between HEX and RGB?

They hold the same information. HEX writes the red, green and blue values as two hexadecimal digits each, RGB as numbers from 0 to 255.

Why does my CMYK colour look different on paper?

The conversion is a simple formula and printers use colour profiles. Screen colours can also be brighter than ink can reproduce.

What contrast ratio do I need?

At least 4.5 : 1 for normal text (WCAG AA) and 3 : 1 for large text. 7 : 1 is the stricter AAA level.

Is my colour sent anywhere?

No. The conversion happens in your browser and nothing is uploaded.