# Color converter

Convert colours between HEX, RGB, HSL and more

Use it at https://www.quicktoolz.com/tools/color-converter. From QuickToolz.

One colour can be written many ways. Designers use HEX and HSL, screens use RGB, and print uses CMYK. Paste a colour in HEX, RGB or HSL, or use the picker, to see it in every format. We also show its contrast on white and black, with AA and AAA accessibility ratings.

## How it works

One colour, written in HEX, RGB, HSL, OKLCH and CMYK.

OKLCH is a newer CSS format that matches how we see colour, so equal changes look equal.

Contrast uses the WCAG formula. AA needs 4.5:1 for normal text, and AAA needs 7:1.

Worked example: #2f3198 is rgb(47, 49, 152) and hsl(239, 53%, 39%). On a white background, its contrast is 10.43:1, AAA.

## Examples

| HEX | RGB | HSL |
| --- | --- | --- |
| #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #2f3198 | rgb(47, 49, 152) | hsl(239, 53%, 39%) |

## What this tool doesn't cover

- CMYK here is approximate. Real print colour depends on ink and paper.

## Questions

### What is the difference between RGB and HEX?

They’re the same values, written differently. #ff0000 is rgb(255, 0, 0).

### Why is CMYK approximate?

Screens make colour with light, and print with ink, so an exact match needs a print profile.

### What contrast do I need?

For normal text, 4.5:1 meets AA, and 7:1 meets AAA.

### How do I convert HEX to RGB?

Split the code into three pairs and read each as a number from 0 to 255. So #FF8000 is 255, 128, 0.

### What is HSL used for?

HSL describes a colour by hue, saturation and lightness. It makes it easy to create lighter or darker shades.

## Sources

- [W3C CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/)
- [W3C: WCAG 2.2](https://www.w3.org/TR/WCAG22/)