Otaku Dojo Tools
English

Color Converter

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.

  • Free
  • No sign-up
  • Runs in your browser
Options
Color codes
The result will appear here
Results appear as you type

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.

Examples

HEX to RGB and HSL

Input
#e2502c
Output
RGB: rgb(226 80 44)
HSL: hsl(12 76% 53%)
CMYK: 0%, 65%, 81%, 11%

Reading WCAG contrast ratios

WCAG 2.1 measures readability with contrast ratio: normal text needs at least 4.5:1 (AA) and 7:1 for AAA; large text (18pt, or 14pt bold) needs 3:1. Ratios range from 1:1 (same color) to 21:1 (black on white).

Specs & key facts

InputHEX (3/4/6/8 digits), rgb(), hsl(), CSS color names and other CSS colors your browser supports
OutputHEX, RGB, HSL, HSV / HSB, CMYK
ContrastWCAG 2.1 relative luminance vs. white and black
TransparencyAlpha supported (8-digit HEX and rgba())
CMYK noteMathematical conversion without a print color profile
ProcessingIn your browser

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.