How to use the Color Converter tool
- Enter or pick a colorType a color in any format, such as #7C3AED, rgb(124 58 237), hsl(262 83% 58%) or a CSS name like “teal”, or use the color picker.
- Copy the format you needEvery format is shown at once. Click “Copy” next to the one you need for CSS, design tools or print.
- Check contrastChoose a text color to see the WCAG contrast ratio and whether it passes AA and AAA.
- Explore variationsClick any tint, shade or harmony swatch to load it and see its values.
Features
- Every common formatHEX (including 8-digit with alpha), modern and legacy RGB, HSL, HSV/HSB and CMYK.
- Flexible inputPaste colors as you find them: with or without #, commas or spaces, percentages or CSS names.
- Accessibility checkWCAG 2 contrast ratio with clear pass/fail results for normal and large text.
- Ready-made palettes19-step tint and shade scale plus complementary, analogous and triadic colors.
- Instant and privateEverything is calculated in your browser as you type.
Color formats explained
| Format | Example | Best for |
|---|---|---|
| HEX | #7C3AED | Web design, CSS, design handoff |
| RGB | rgb(124 58 237) | Screens, CSS, image editing, adding transparency |
| HSL | hsl(262 83% 58%) | Building palettes and lighter or darker variants |
| HSV / HSB | hsv(262, 76%, 93%) | Color pickers in Photoshop, Figma and similar tools |
| CMYK | cmyk(48%, 76%, 0%, 7%) | Print: cyan, magenta, yellow and key (black) ink |
HEX is simply RGB written in hexadecimal: the pairs 7C, 3A and ED are red 124, green 58 and blue 237. An optional fourth pair adds transparency, so #7C3AED80 is about 50% opaque.
Why HSL is great for designers
HSL describes a color the way people think about it: hue (the position on the color wheel, 0–360°), saturation (how vivid it is) and lightness (how light or dark). To make a hover state, keep the hue and saturation and lower the lightness by 8–10 points. To build a muted background, lower the saturation and raise the lightness.
A note on CMYK
Screens mix light (RGB), while printers mix ink (CMYK), and many bright screen colors can’t be printed exactly. The CMYK values here are a straightforward mathematical conversion. For professional print work, your printer’s color profile (for example FOGRA39 or GRACoL) gives the most accurate values, so ask for a proof when color matters.
Contrast and accessibility (WCAG)
The Web Content Accessibility Guidelines measure contrast as a ratio from 1:1 (no contrast) to 21:1 (black on white). To meet level AA, normal text needs at least 4.5:1, and large text (about 24px, or 19px bold) and UI elements need 3:1. Level AAA asks for 7:1 and 4.5:1. Good contrast helps people with low vision and anyone reading on a phone in sunlight.
Tints, shades and harmonies
- Tints mix your color with white; shades mix it with black. Together they give you a full scale for backgrounds, borders and hover states.
- Complementary colors sit opposite each other on the color wheel and create strong contrast.
- Analogous colors sit next to each other and feel calm and cohesive.
- Triadic colors are evenly spaced, 120° apart, for balanced but colorful palettes.
Building a website? Use the Image to Base64 tool to inline small icons, and the WebP Converter to make images load faster.