Color Converter
HEX/RGB/HSL.
Loading tool…
How colour is written on the web
The same colour has several notations. Hexadecimal — #3B82F6 — encodes red, green, and blue as two hex digits each. RGB writes those same channels as decimals from 0 to 255. HSL describes the colour instead as hue in degrees around a colour wheel, plus saturation and lightness percentages, which is far more intuitive for design work: to make a shade lighter you change one number rather than guessing at three. Print work uses CMYK, a different model entirely, based on subtractive ink rather than emitted light.
Converting between RGB and HSL is exact arithmetic; both describe the same sRGB space. CMYK is not exact, because ink gamuts and screen gamuts do not overlap perfectly — a vivid screen blue simply cannot be reproduced in process ink, so any conversion is an approximation that a proper colour-managed workflow would refine.
Why we built this tool
Designers and developers cross these notations all day: a brand guide gives Pantone and CMYK, the design file gives hex, the CSS variable wants HSL so a theme can generate hover states, and an old plugin insists on RGB.
It is quick arithmetic, and there is no reason it should involve a server — yet most online converters round-trip every keystroke through one. We do it in your browser, which makes the conversion instant, keeps unreleased brand colours off other people's machines, and works offline. That last point matters more than it sounds: this is exactly the kind of small tool you want available when you are mid-flow in a design tool with no connection.
Tips and common mistakes
- Work in HSL when building tints and shades — changing one number keeps the hue consistent.
- Check text and background pairs against WCAG contrast ratios: 4.5:1 for body text, 3:1 for large text.
- CMYK output is an approximation; confirm colour-critical print work against a physical proof.
- Hex with eight digits carries an alpha channel, which some older tools silently discard.
Open Color Converter with a link
Color Converter can be handed its input by the link that opens it, so the page arrives with the work already done. This is meant for assistants and scripts: if a chatbot, an editor extension, or a command-line agent already holds your content, it can build a link instead of asking you to copy and paste into a box.
The payload rides in the fragment — the part of a URL after the #. Browsers never send the fragment to a server, so anything handed over this way stays on your device exactly as a dropped file would. A link that uses the query string instead is rewritten into the fragment by the page before any analytics or ad script can read the address.
#color=— a colour in any CSS notation
Example: https://mygadgets.ink/tools/color-converter/#color=...
Quick start: using Color Converter
- Enter a colour in whichever notation you have — hex, RGB, or HSL.
- Read the equivalent values in the other formats instantly.
- Adjust lightness or saturation in HSL to build tints and shades of the same hue.
- Copy the notation your stylesheet or design tool needs.
- Treat CMYK output as an approximation and confirm against a printed proof.
To pull a colour out of an image instead of typing it, use Color Picker.