Color Converter
Translate any colour between HEX, RGB, HSL and HSV and check its contrast against black and white.
How Color Converter works
Convert colours between HEX, RGB, HSL and HSV, check contrast ratios and copy ready-to-use CSS values. Everything happens inside this page: the tool reads your input, runs the calculation or conversion locally, and hands the result back to you. Nothing is transmitted, because there is no backend to transmit it to.
That design choice is deliberate. Most free tool sites upload your files to a server, process them there, and quietly keep a copy. Toolcin cannot do that — the site is a set of static files. If your connection dropped the moment the page finished loading, every tool would still work.
Four ways to write one colour
HEX is what CSS and design tools default to, RGB matches what the screen actually emits, HSL describes hue, saturation and lightness in human terms, and HSV is the model behind most colour pickers. The same colour has four correct representations.
Conversion is exact in one direction and lossy in the other only through rounding — HSL to hex and back can shift a value by one step out of 255.
Why HSL is easier to reason about
To make a colour lighter you change one number in HSL. In RGB you change three, and the result drifts in hue. That is why design systems store tokens as HSL even when they output hex.
| Model | Best for |
|---|---|
| HEX | Copy-paste into CSS |
| RGB | Canvas, image processing |
| HSL | Tints, shades, palettes |
| HSV | Colour pickers and pickers' maths |
The hex shortcut
#38F2CF is three bytes: 0x38 = 56 red, 0xF2 = 242 green, 0xCF = 207 blue. Three-digit shorthand (#3FC) works only when each pair repeats a digit, which is why most modern palettes use six.
Good to know
- Works offline once loaded, including on flights and in locked-down networks.
- No file size limit beyond your device's own memory.
- Free to use, with no account and no usage counter.
- Results are produced locally, so they are not logged or shared with anyone.
Questions
Does it check accessibility contrast?
Yes — it reports the WCAG contrast ratio against white and black and flags AA or AAA compliance.
Can I paste a colour from a design file?
Yes, paste HEX, rgb() or hsl() notation and it is parsed automatically.
Does it handle alpha?
Not in this version; only opaque colours.
Is the conversion exact?
Yes, apart from rounding to integers in RGB and hex.
Keep going
More design tools
CSS Gradient Generator
Design a gradient with two or three colours, adjust the angle and copy the CSS.
Open toolBox Shadow Generator
Create a box shadow with live preview and copy the exact CSS declaration.
Open toolColor Palette Generator
Start from any colour and get five tints, five shades and three harmony colours with one-click copying.
Open toolFavicon Generator
Design a simple favicon from a letter or emoji, then download a multi-size .ico plus PNG versions.
Open toolBorder Radius Generator
Set each corner independently and copy the ready-to-use border-radius CSS.
Open toolColor Contrast Checker
Check the contrast ratio between text and background and see WCAG AA and AAA results.
Open tool