Color Converter
Free color converter and picker. Convert between HEX, RGB and HSL, preview the color live and copy any format with one click.
HEX
#6366f1RGB
rgb(99, 102, 241)HSL
hsl(239, 84%, 67%)Preview
The same colour has several names depending on where you are using it. CSS wants hex, design tools often work in RGB, and anyone adjusting a palette by hand almost always wants HSL. This tool converts between all three and shows the result live.
It also gives you the CSS-ready string for each format, so you can copy straight into a stylesheet or design file.
How to use the Color Converter
Enter a colour in any format
Type a hex code, RGB values or HSL values — the other formats update automatically.
Or pick visually
Use the colour picker to choose, then read off the exact values.
Adjust with the sliders
HSL sliders are the most intuitive for making a colour lighter, darker or less saturated.
Copy the format you need
One click copies a ready-to-paste CSS value.
The three formats compared
| Format | Looks like | Best for |
|---|---|---|
| HEX | #4F46E5 | CSS, design handoff, the most compact form |
| RGB | rgb(79, 70, 229) | Programmatic manipulation, canvas, image work |
| HSL | hsl(243, 75%, 59%) | Building palettes and tweaking colours by hand |
| RGBA / HSLA | rgba(79, 70, 229, 0.5) | Anything needing transparency |
How hex codes work
A hex colour is three pairs of hexadecimal digits: red, green, blue, each from 00 (none) to FF (255, full). #FF0000 is pure red, #00FF00 pure green, #0000FF pure blue.
Equal values give a grey — #808080 is mid grey. Three-digit shorthand doubles each digit, so #F00 expands to #FF0000. An eight-digit code adds alpha: #4F46E580 is 50% transparent.
Why HSL is easier to work with
HSL describes a colour the way people actually think about it: hue as a position on the colour wheel from 0 to 360, saturation as intensity from grey to vivid, and lightness from black to white.
That makes systematic palettes trivial. Keep hue and saturation fixed and vary only lightness to build a tint scale. Rotate the hue by 180° for a complementary colour, by 120° for a triadic scheme, or by 30° for an analogous one — none of which is obvious from a hex code.
Contrast and accessibility
The Web Content Accessibility Guidelines set minimum contrast ratios between text and its background. Meeting them is a legal requirement for many public-sector and commercial sites.
| Level | Normal text | Large text (18pt+ or 14pt bold) |
|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
Light grey text on white is the most common failure on the web. Contrast is computed from relative luminance, not from how different two colours look — two colours can appear distinct and still fail.
Colour spaces beyond sRGB
- sRGB — the web default and what hex codes describe. Assume this unless told otherwise.
- Display P3 — a wider gamut supported by modern Apple and high-end displays, capable of more saturated reds and greens.
- CMYK — subtractive ink, used for print. Bright RGB colours often cannot be reproduced in CMYK, which is why screen designs can look duller in print.
- OKLCH — a newer perceptually uniform space now supported in CSS. Equal numeric steps look like equal visual steps, which HSL does not achieve.
Frequently asked questions
How do I convert hex to RGB?
Split the code into three pairs and read each as a hexadecimal number. #4F46E5 is 4F = 79, 46 = 70, E5 = 229, giving rgb(79, 70, 229).
What does the # mean in a colour code?
It is simply the CSS marker that the following characters are hexadecimal digits. The colour itself is the six digits after it.
What is the difference between HSL and HSV?
Both use hue and saturation, but HSL’s third value is lightness, where 100% is white; HSV uses value, where 100% is the most vivid form of the colour. HSL is used in CSS.
How do I make a colour lighter or darker?
Convert to HSL and change only the lightness. This preserves the hue exactly, whereas adjusting RGB channels by hand usually shifts the colour.
What is a good contrast ratio for text?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA. Aim for 7:1 to meet AAA.
Can I use transparency in a hex code?
Yes. Eight-digit hex adds an alpha pair at the end — #4F46E580 is roughly 50% transparent. It is supported in all modern browsers.
Why does my colour look different in print?
Screens emit light in RGB; print reflects it in CMYK ink, a smaller gamut. Very saturated blues and greens have no CMYK equivalent and shift when converted.
What are named CSS colours?
A set of 148 keywords such as tomato and rebeccapurple that map to fixed hex values. Convenient for prototyping, but hex or HSL is clearer in production code.
100% private. Files are processed on your device and never uploaded.
Instant results. No upload queue. Processing time depends on your device.
Free forever. No signup, no watermark, no paid tier.
Works everywhere. Use a modern browser on your phone or computer.
Related tools
Color Converter is one of all the free tools on ToolNest. No account or subscription needed — anywhere in the world.