Color Code Converter — HEX to RGB, HSL & Contrast Checker
Convert color codes between HEX, RGB and HSL online free — no sign-up required. Includes a WCAG contrast ratio checker to ensure your color combinations meet accessibility standards.
Last updated: June 2026
History
WCAG contrast checker
CSS snippet
About this tool
Convert colors between HEX, RGB, HSL and more
Every colour on a screen can be written several ways, and different tools expect different
notations. A color code converter lets you move
between them freely: pick a colour or type any format above, and the
HEX, RGB, HSL, HSV and CMYK values all update
together. HEX (#3B82F6) and RGB (rgb(59, 130, 246)) describe the same
red-green-blue mix in hexadecimal and decimal; HSL and HSV describe it by hue; and CMYK gives
the print equivalent.
Each field has a copy button, and a ready-to-paste CSS snippet is generated for you. The built-in contrast checker computes the WCAG ratio between a background and foreground colour and tells you whether it passes AA and AAA for accessible text — a quick way to keep your interface readable. If a colour matches one of the 147 standard CSS named colours, its name is shown too.
The tool keeps a history of your recent colours so you can jump back to one, and remembers it across reloads. As with every CrispToolHub developer tool, the conversion runs entirely in your browser — there's no upload, no account, and no cost.
How it works
Three quick steps — no account, nothing uploaded to a server.
Enter your input
Paste or type your data into the tool.
Convert the color
Convert between HEX, RGB, HSL, HSV and CMYK.
Copy or download
Copy the result to your clipboard or download it as a file.
FAQ
Frequently asked questions
How do I convert HEX to RGB?
Type or paste a HEX value like #3B82F6 into the HEX field, or pick a colour, and the RGB equivalent appears instantly in the RGB field — rgb(59, 130, 246) in this case. Every field updates the others live, so you can edit any format and read the rest. Each has its own copy button, and a ready-to-paste CSS snippet is generated below.
What's the difference between HSL and HSV?
Both describe colour by hue, but they differ in the other two channels. HSL uses Saturation and Lightness, where 50% lightness is the pure, most vivid colour and 100% is white. HSV (also called HSB) uses Saturation and Value/Brightness, where 100% value is the brightest version of the colour and adding white means lowering saturation. HSL is common in CSS; HSV is common in design and image tools. This converter shows both at once.
What is CMYK used for?
CMYK (Cyan, Magenta, Yellow, Key/black) is the subtractive colour model used in print. Screens emit light and mix colours additively with RGB, while printers lay down ink and mix subtractively with CMYK, so the same colour has different values in each. The CMYK figures here are a standard mathematical conversion — useful as a starting point, though exact print colour depends on the press and paper profile.
How does the contrast checker work?
Enter a background and a foreground colour and the tool computes the WCAG contrast ratio between them, then shows whether it passes the AA (4.5:1) and AAA (7:1) thresholds for normal text. Accessible, readable text needs sufficient contrast, so use this to check that your colour choices meet accessibility guidelines before you ship them.
Does it support CSS named colors?
Yes. If your colour matches one of the 147 standard CSS named colours, its name is shown in the Name field, and you can type a name like 'tomato' or 'rebeccapurple' to load it. Named colours are handy shortcuts in CSS, and seeing the closest match helps you recognise and reuse them.
Related developer tools
You might also need these.