# Colour Converter - HEX, RGB, HSL

Page: https://hirantha.me/tools/color-converter
Part of: Hirantha Sandaruwan Lakshan free tools (https://hirantha.me/tools)
Updated: 2026-07-31

Convert a colour between HEX, RGB, and HSL.

This is a free tool that runs in the browser: open the page to use it. File tools process files on the visitor's own device; files are never uploaded or stored. No account, sign-up, payment or watermark.

Enter a colour in HEX, RGB, or HSL and see it instantly converted to the other two formats, with a live swatch preview.

HEX and RGB both describe a colour as red, green, and blue intensities - HEX just encodes each channel as two hexadecimal digits instead of a base-10 number.

HSL describes the same colour differently, as hue (a position on the colour wheel), saturation, and lightness - often easier to reason about when you want a lighter, darker, or more muted version of a colour.

All three formats are mathematically equivalent descriptions of the same colour, so converting between them is lossless - nothing is approximated or rounded away.

Q: Is my input sent anywhere?
A: No, all conversion happens entirely in your browser tab.

Q: Does this support alpha transparency?
A: Yes - an optional alpha value is supported and carried across HEX (8-digit), RGB, and HSL formats.

Q: Why do RGB and HSL values look so different for the same colour?
A: They describe colour along different axes - RGB by channel intensity, HSL by hue, saturation, and lightness - so the numbers don't resemble each other even though the colour is identical.

Q: Can I paste a named CSS colour like 'rebeccapurple'?
A: Not currently - only HEX, RGB, and HSL input formats are supported.

Q: What is the difference between HSL and HSB/HSV?
A: Both use hue and saturation, but HSL's third value is lightness (50% is the pure colour) while HSB's is brightness (100% is the pure colour). Design tools tend to use HSB, CSS uses HSL.

Q: How do I pick an accessible text colour?
A: Contrast between text and background is what matters, and it needs a ratio of at least 4.5:1 for normal body text. Adjusting lightness in HSL is the easiest way to reach it while keeping the hue.

Q: What does the alpha value mean?
A: Opacity, from 0 (fully transparent) to 1 (fully opaque). An alpha of 0.5 lets half the background show through.

Q: Can I convert to CMYK for printing?
A: No. CMYK conversion depends on the specific printer, ink, and paper profile, so any value produced without that profile would be misleading rather than useful.

Sources: RGB color model - Wikipedia (https://en.wikipedia.org/wiki/RGB_color_model); HSL and HSV - Wikipedia (https://en.wikipedia.org/wiki/HSL_and_HSV)

Related tools:

- [JSON formatter & validator](https://hirantha.me/tools/json-formatter.md): Pretty-print, minify, and validate JSON with clear error locations.
- [Colour contrast checker](https://hirantha.me/tools/color-contrast-checker.md): Check the WCAG contrast ratio of a text and background colour, see AA and AAA pass or fail for normal and large text, and get the nearest colour that passes.
- [CSS gradient generator](https://hirantha.me/tools/css-gradient-generator.md): Build linear, radial and conic CSS gradients with any number of colour stops, a live preview and copy-ready code. Repeating gradients and oklch blending included.
- [Colour picker from image](https://hirantha.me/tools/color-picker-from-image.md): Click any pixel of a photo to get its HEX, RGB and HSL value, magnify it, and pull a five-colour palette out of the picture. Runs in your browser.
- [CSS box-shadow generator](https://hirantha.me/tools/box-shadow-generator.md): Design CSS box-shadows with layers, offset, blur, spread, opacity and inset, watch them live, then copy the code. Text-shadow mode and presets are included.