Color code converter · HEX RGB HSL, contrast checker
Enter a color in any format and get HEX, RGB, HSL, HSV and CMYK at once. Check whether two colors meet the WCAG contrast rules, and build tint and harmony palettes.
🔒 What you type is never sent anywhereTints, shades and palettes
Light → dark
Complementary · analogous · triadic
Contrast between two colors (WCAG)
Body text needs 4.5:1; large text, icons and borders need 3:1 to stay readable.
AA is the standard level (body 4.5:1 · large 3:1); AAA is the enhanced level (body 7:1 · large 4.5:1).
Use the color for the foreground and background of a QR code, or keep just the part of a photo you sampled it from with crop image.
Which format is used where
HEX (#2f6df6) — web and app design, CSS, Figma. The most common form. Two extra digits at the end (#2f6df680) are the alpha, or opacity.
RGB (47, 109, 246) — the "custom color" dialog in Photoshop, PowerPoint, Word and most office software takes these three numbers.
HSL (216°, 92%, 57%) — hue, saturation and lightness. The easiest form for a human to adjust: "the same color, a little lighter" is one number.
HSV / HSB — the H·S·B fields of the Photoshop color picker. Similar to HSL but with a different definition of brightness.
CMYK — for print. Screens and ink work differently, so these values are an approximation; always check a real print against a swatch book.
Frequently asked questions
Is anything I type sent anywhere?
No. Conversion and contrast calculation happen inside your browser. The page keeps working with the internet switched off.
Which formats can I enter?
HEX such as #fff, #ffffff or #ffffff80; rgb(255,0,0) and rgba(255,0,0,.5); hsl(120,100%,50%); and all 148 CSS color names such as red, tomato or steelblue. 2f6df6 without the # works too.
What does a contrast ratio of 4.5:1 mean?
It compares the brightness of the text color with the background. Black on white is the maximum at 21:1; identical colors are 1:1. The Web Content Accessibility Guidelines (WCAG) ask for at least 4.5:1 for body text and 3:1 for large text and icons at level AA, and 7:1 and 4.5:1 at level AAA. Grey text that is hard to read usually fails even 3:1.
The CMYK values differ from my printer's
Screens (RGB) and ink (CMYK) can reproduce different ranges of color, so there is no exact conversion. The values here come from the common simple formula; every program differs by a few percent depending on its color profile. Check printed work against a physical swatch.
How are the palettes built?
The tints and shades change only the HSL lightness in 10% steps. The complement sits opposite on the color wheel (180°), analogous colors are 30° either side, and the triad is spaced at 120°. Use them as a starting point for hover and pressed states of a button or for chart colors.