Open the Vootkit workspace.
01Design toolTool result
Colour Converter
HEX, RGB and HSL with a live swatch.
100% FreeRuns instantlyNo watermark
- 1Choose toolOpen the Vootkit workspace.
- 2Add inputProvide the content or settings.
- 3ProcessLet the browser do the work.
Private by designProcessed on your device where possible.
Works on any deviceDesktop, tablet and mobile browsers.
No installationOpen the page and start working.
Always free coreUse the free plan for everyday tasks.
How to use Colour Converter
Provide the content or settings.
02Let the browser do the work.
03Copy, download or continue.
04Your files stay private
Your work is processed locally in your browser where possible and is never added to a Vootkit upload library.
Learn more about privacyHEX, RGB and HSL describe the same colours in three different vocabularies, and the reason to know all three is that only one of them lets you adjust a colour predictably.
What Colour Converter does
Converts between HEX, RGB and HSL with a live swatch.
HSL is the one worth thinking in. Hue, saturation and lightness map onto how people describe colour — "the same blue but lighter" is one number in HSL and three unpredictable ones in HEX.
The three notations
| HEX | <code>#RRGGBB</code> — compact, universal in CSS |
|---|---|
| RGB | 0–255 per channel — how screens work |
| HSL | Hue 0–360, saturation and lightness 0–100% |
| <strong>HSL is best for</strong> | <strong>Adjusting a colour predictably</strong> |
| Lighter shade | Raise HSL lightness — one number |
| Same in HEX | Three unrelated values to guess |
| Alpha | RGBA and HSLA add opacity |
| Runs | On your device |
Detailed steps
- Enter a colour in any notation.
- Read the other two and the swatch.
- Use HSL when you need variations of the same colour.
Worth knowing
Build palettes in HSL and export whatever your CSS needs. Keeping hue fixed and moving lightness gives you a tonal scale that is genuinely consistent — the thing designers build by eye and get subtly wrong. It is also why every serious design system stores colour as HSL underneath, whatever it ships.
Frequently Asked Questions
Which notation should I use?
HEX for storing and sharing since it is compact and universal, HSL when adjusting. The conversion is lossless, so working in HSL and exporting HEX costs nothing.
Why is HSL easier to adjust?
Because its axes match how people think. Making a colour lighter means raising one number; in HEX all three components change in ways that are hard to predict, and you end up guessing.
Do the three describe identical colours?
Yes, within rounding — they are different coordinate systems over the same space. HSL uses percentages, so very occasionally a round trip shifts by one unit in the last digit.
What about alpha?
RGBA and HSLA add an opacity channel, and CSS also accepts an 8-digit HEX where the last two characters are alpha. All describe the same transparency.
Is Colour Converter free?
Yes. The Vootkit free plan includes 5 tool runs a day. Upgrade to Vootkit Pro for unlimited daily use, an ad-free workspace and saved workflows.
Are my files uploaded?
No. Colour Converter runs entirely in your browser — your file is processed on your own device and never sent to a server. There is nothing for us to store or delete.
Do I need to install anything?
No. Colour Converter works in any modern browser on desktop, tablet or phone. Open the page and start.
How often can I use it? Is there a daily limit?
On the free plan you get 5 tool runs a day. When you reach the limit you'll see a prompt to upgrade, and it resets the next day. Vootkit Pro removes the cap entirely for unlimited daily use.
Recently viewed
This tool processes everything locally in your browser. You can disconnect from the internet after the page loads and it will still work.