Home › Tools › Colour Converter
Colour Converter
Convert a colour between HEX, RGB and HSL, see it rendered, and get a luminance reading that tells you whether dark or light text will sit legibly on top of it.
100% private — everything runs in your browser, nothing is ever uploaded.
What this tool does
A design handoff gives a brand colour as #2F6B4F, a CSS file wants rgb(47, 107, 79), and a charting library asks for HSL. Converting between the three by hand invites small errors that are hard to spot until a screenshot is compared with a style guide. This tool accepts a HEX value or an rgb() string and immediately shows all three notations plus a live swatch, so a colour can be copied into whichever format the target expects. It also reports luminance, which answers a practical accessibility question: will dark or light text remain legible on top of this background. That single number is more useful than guessing from the swatch, especially for mid-tone colours where either choice looks plausible at a glance.
How to use it in three steps
- Type or paste a HEX colour such as #2F6B4F, or an rgb() value you copied from a stylesheet or a design tool.
- The swatch updates immediately and HEX, RGB and HSL forms appear underneath. Compare the swatch with the source before copying.
- Copy the notation your target needs, and use the luminance reading to decide whether to pair the colour with dark or light text. Paste the copied notation into your stylesheet and re-check the swatch after any opacity or theme override is applied.
Questions people ask
Why does the RGB value not match what my design tool shows?
Check whether the design tool is working in a different colour space or applying an opacity or a profile. The conversion here is the standard sRGB interpretation used by CSS, which is what browsers will render.
What does the luminance reading tell me?
It estimates how bright the colour appears, which lets you choose high-contrast text. For a production interface, still check the pair against a contrast-ratio calculator; the reading here is a fast guide, not a full accessibility audit.
Can I enter a colour name such as rebeccapurple?
The input expects HEX or rgb() notation. Convert named CSS colours to their HEX value first, then paste that here to get the other forms.
Why does HSL look different from the HEX value in my design tool?
HSL describes hue, saturation and lightness, while HEX encodes red, green and blue channels. Both describe the same sRGB colour when converted correctly, but a design tool working in another colour space can display a subtly different shade on screen.
Privacy: Every colour value, swatch and luminance reading is computed locally in this browser tab, so unpublished brand palettes, client style guides and design tokens stay on your machine with no network request.
How to use it
- Type or paste a HEX colour, or an
rgb()value. - The swatch updates immediately, and all three notations appear below it.
- Copy the values you need.
Why it stays private
Colour values are rarely confidential, but this tool needs no network access at all, which means it keeps working offline — useful on a locked-down machine where an online converter may be blocked.
Questions
What is the difference between HEX, RGB and HSL?
They describe the same colour in different terms. HEX and RGB specify the red, green and blue channels directly. HSL describes it as a hue angle, a saturation percentage and a lightness percentage, which is usually easier when you want to reason about a colour rather than copy it.
What does the luminance value mean here?
It is a weighted average of the three channels reflecting how the human eye responds to them, on a scale from 0 for black to 1 for white. Above roughly 0.55, dark text on that background is usually more readable; below it, light text is.
Does this check accessibility contrast?
Not yet. The luminance figure is a useful guide, but WCAG contrast ratios are computed from relative luminance with a different formula. For a formal accessibility check, use a dedicated contrast tool.