# Color Converter

URL: https://tools.otaku-dojo.com/en/color-converter
Updated: 2026-10-03

The Color Converter accepts any CSS color (#3a4fd8, rgb(58 79 216), hsl(233 67% 54%) or a name like tomato) and instantly converts it to HEX, RGB, HSL, HSV and CMYK. It also calculates the WCAG 2.1 contrast ratio against white and black, telling you whether the color meets AA or AAA as text or background.

## How to use the Color Converter

1. Type a color in any format into "Color", or pick one with the color picker.
2. The swatch and every format appear on the right.
3. Check "Contrast" to see whether white or black text is readable on it.
4. Press "Copy" to copy all formats.

## Specs & key facts

- **Input**: HEX (3/4/6/8 digits), rgb(), hsl(), CSS color names and other CSS colors your browser supports
- **Output**: HEX, RGB, HSL, HSV / HSB, CMYK
- **Contrast**: WCAG 2.1 relative luminance vs. white and black
- **Transparency**: Alpha supported (8-digit HEX and rgba())
- **CMYK note**: Mathematical conversion without a print color profile
- **Processing**: In your browser

## Examples: HEX to RGB and HSL

```text
#e2502c
```

→

```text
RGB: rgb(226 80 44)
HSL: hsl(12 76% 53%)
CMYK: 0%, 65%, 81%, 11%
```

## FAQ

### How do HEX and RGB relate?

HEX is RGB written in hexadecimal: in #e2502c, e2, 50 and 2c are red 226, green 80 and blue 44.

### Can I use the CMYK values for printing?

Only as a reference. Printed color depends on paper and the printer's ICC profile, so confirm important jobs with your printer's swatches.

### What do the three HSL numbers mean?

H is hue (0–360° on the color wheel), S is saturation and L is lightness. Adjusting L creates lighter and darker shades — handy for hover colors.