Convert colors between HEX, RGB, and HSL formats with a live preview. Pick or type any value.
Designers and front-end developers matching colours across formats.
Pick or type a colour
Use the colour swatch, or type a HEX value like #6366f1 (or an RGB/HSL value).
See every format
HEX, RGB, and HSL are shown together with a live preview so you can confirm the colour.
Copy what you need
Click the copy icon next to the format your tool or code expects.
The same colour is written three different ways depending on what you are doing. CSS and design handoffs use HEX (#6366f1); canvas and drawing APIs want RGB channels; and HSL is the one you reach for when you need to nudge a colour lighter, darker, or more saturated without guessing. Constantly translating between them in your head — or copying the wrong value from a design tool — wastes time and causes mismatched colours. This converter takes a colour in any of those formats and shows all of them together with a live preview, so you always copy the correct value. Pick a colour from the swatch or type a HEX code, and read off the HEX, RGB, and HSL equivalents instantly. It runs entirely in your browser with no limits. Working in HSL in particular makes adjustments intuitive: change just the lightness number to build a tint or shade of the same hue.
CSS styling
Convert a designer’s HEX into HSL to fine-tune lightness and build consistent tints and shades.
Canvas & graphics
Get RGB channel values for drawing APIs and image work that need numeric components.
Design handoff
Translate a colour from a mockup into the exact format your codebase uses.
Brand consistency
Express a single brand colour across every format different tools require.
Accessibility tuning
Adjust lightness in HSL to push text/background contrast toward accessible levels.
Yes. Three-digit shorthand like #63f is expanded to the full six-digit form automatically.
Hue (0–360° around the colour wheel), Saturation (how vivid, 0–100%), and Lightness (how light/dark, 0–100%).
Because you can change one number — usually lightness or saturation — to get a related shade, which is far harder to do directly in HEX or RGB.
It focuses on solid colours (HEX, RGB, HSL). Add opacity separately in your CSS (e.g. rgba() or an alpha hex) if you need it.
They represent the same colour, with tiny rounding when converting to HSL’s percentages — visually identical.
Yes — enter a value in any supported format and the others update to match.
Yes. It runs entirely in your browser with no limits and nothing uploaded.
No — just open it and use it.