Color Converter
Convert between HEX, RGB, and HSL — with a contrast check against white and black.
Runs entirely in your browserRelated Tools
Three Ways to Say the Same Colour
HEX, RGB, and HSL all describe identical colours — they differ only in how the numbers are arranged, and each arrangement makes a different task easy.
HEX (#3b82f6) is three bytes written in hexadecimal: red, green, blue. It is compact and it is what design tools hand you, which is why it dominates in practice. It is also completely opaque to human reasoning — you cannot look at #3b82f6 and know it is a medium blue.
RGB (rgb(59 130 246)) is the same three numbers in decimal. Slightly easier to read, and the form you need when working with canvas, image data, or any code that manipulates pixels.
HSL (hsl(217 91% 60%)) restructures the same information into hue, saturation, and lightness — and this is the one worth learning. Because lightness is its own number, building a colour scale means changing one value: hsl(217 91% 40%) is the same blue, darker. Doing that in HEX means recalculating all three channels.
Why HSL Makes Palettes Easier
- Tints and shades — hold hue and saturation, move lightness. You get a coherent scale instead of colours that drift towards grey or neon.
- Complementary colours — add 180 to the hue.
- Triadic schemes — add 120 and 240.
- Muting a colour — lower saturation without touching hue, so it stays recognisably the same colour family.
This is exactly how design systems like Tailwind construct their 50-to-950 scales, and why so many CSS frameworks store colours as HSL components.
The Contrast Numbers
The ratios shown compare your colour against white and black using the WCAG formula, which weights the channels by how sensitive human vision is to each — green counts for far more than blue.
- 4.5:1 — the minimum for normal body text (WCAG AA)
- 3:1 — the minimum for large text, roughly 18pt or 14pt bold
- 7:1 — the stricter AAA level
A common trap: mid-tone colours often fail against both white and black. If your brand colour is one of those, it works as a background or accent but needs a lighter or darker variant for text.
Building a Palette From One Brand Colour
The reason HSL is worth learning shows up the moment you need more than one shade. Take your brand colour, read off its hue and saturation, and generate the rest by moving lightness alone: around 95% for a subtle background tint, 85% for a hover state, the original for the main element, 40% for text on a light background, and 25% for a pressed state.
Because hue and saturation never change, every step stays recognisably the same colour. Doing the equivalent in HEX means recomputing three channels for each shade and hoping the result does not drift toward grey or neon.
One caveat worth knowing: HSL lightness is not perceptual. Yellow at 50% lightness looks far brighter than blue at 50%, so a scale built purely on the number can look uneven across different hues. That is exactly the problem OKLCH was designed to solve, and it is why design systems are gradually moving to it.
FAQ
What does the fourth pair of hex digits mean?
Alpha — opacity. An eight-digit HEX such as #3b82f680 is the same colour at 50% opacity. Every current browser supports it.
Is a three-digit HEX the same as six?
Yes, when each digit repeats. #f0a expands to #ff00aa. Only colours where all three channels have doubled digits can be written short.
Should I use HSL or HEX in my CSS?
Either renders identically. HSL is easier to reason about when generating variants, HEX is more compact and more familiar. Many teams store HSL components in custom properties precisely so they can adjust lightness in one place.
What about OKLCH?
OKLCH is a newer, perceptually uniform space where equal changes in lightness look equally different to the eye — something HSL does not guarantee. It is well supported in modern browsers and worth exploring for serious palette work, though HEX, RGB, and HSL remain the everyday formats.
Which colour names are recognised?
The common ones — red, blue, teal, navy and so on. CSS defines around 150 names; this tool handles the widely used subset and any HEX, RGB, or HSL value.
How do I make a lighter or darker version of a colour?
Convert to HSL, keep the hue and saturation, and change only the lightness. That keeps every shade recognisably the same colour, which adjusting HEX channels does not.
Why does my palette look uneven across different hues?
HSL lightness is mathematical rather than perceptual — yellow at 50% looks much brighter than blue at 50%. OKLCH fixes this by being perceptually uniform, and modern browsers support it.
Does the contrast check cover colour blindness?
No. The WCAG contrast ratio measures luminance difference, which helps but does not guarantee that two colours are distinguishable to someone with colour vision deficiency. Never rely on colour alone to convey meaning.
Which colour formats can I paste in?
HEX with three, four, six, or eight digits, rgb() and rgba(), hsl() and hsla(), and common colour names. Both comma-separated and space-separated CSS syntax work.
⚠️ Reference Only
Output is generated based on your input and is provided for reference. Results may vary depending on your specific use case, edge cases, or environment-specific behavior. We do not guarantee accuracy of conversions, validations, or computed values.
Always verify critical outputs against official documentation or production environments. We are not responsible for any decisions or losses based on these tool results.