Color Converter — HEX, RGB & HSL
Instantly convert any colour between HEX, RGB, and HSL. Type a value in any field and every format updates in real time — with one-click copying for each.
HEX
RGB
rgb(91, 141, 238)
HSL
hsl(220, 81%, 65%)
Preview
#5B8DEE
All Values
HEX
#5B8DEE
RGB
91, 141, 238
HSL
220°, 81%, 65%
Why Convert Between Colour Formats?
Different tools, platforms and workflows speak different colour languages. CSS and HTML use HEX codes. Design tools like Figma and Sketch work in RGB. HSL gives designers intuitive control over hue, saturation and lightness when building colour systems. Having all three on hand means less friction — and fewer copy-paste errors between tools.
Whether you're translating a brand colour from a style guide, matching a paint reference to a web hex, or building a token-based design system, a reliable colour converter eliminates the manual maths and keeps values consistent across every format.
- CSS and browsers read HEX — design tools often output RGB
- HSL makes it easy to create lighter and darker tints programmatically
- Design tokens and style guides need consistent values across formats
- Paint references and digital hex values need to stay in sync
- Copying the right format first time avoids errors in production code
How to Use This Converter
Enter any colour value
Type a HEX code, RGB channel values or HSL components into the corresponding input. You can also pick a colour visually with the colour picker.
All formats update instantly
As you type, every other format recalculates in real time. No submit button. No page reload. The live preview shows the exact colour as you go.
Copy the format you need
Hit Copy next to any value — HEX, rgb(), or hsl() — to put it on your clipboard, ready to paste directly into CSS, Figma, Tailwind, or any design tool.
What Each Colour Format Is Used For
HEX
#5B8DEE
The standard for web and HTML. HEX codes are the most widely used colour format across CSS, browsers, email templates, and design tools. Every web colour can be expressed as a six-character hex string.
RGB
rgb(91, 141, 238)
Red, Green, Blue channels on a 0–255 scale. RGB is common in CSS, image editing software and anywhere colour is rendered on screen. Each channel controls how much of that primary light is mixed into the final colour.
HSL
hsl(220, 80%, 65%)
Hue, Saturation, Lightness. HSL is more intuitive for designers — changing lightness alone creates tints and shades, and adjusting hue shifts the colour family. Widely used in CSS custom properties and design token systems.
Who This Tool Is For
Common Questions
How do I convert HEX to RGB?
Enter your HEX code into the HEX field above. The RGB values update instantly — no calculation needed. You can then copy the full rgb() string in one click.
How do I convert RGB to HSL?
Type your R, G and B values (each between 0–255) into the RGB inputs. The HSL hue, saturation and lightness values will update in real time alongside the HEX equivalent.
What is the difference between HEX and RGB?
HEX and RGB represent the same colour using different notation. HEX expresses the RGB values as two hexadecimal digits each — for example, #FF0000 is rgb(255, 0, 0). They are interchangeable in CSS.
Why use HSL instead of HEX or RGB?
HSL separates colour into three human-readable properties: hue (the colour angle on a wheel), saturation (how vivid it is) and lightness (how light or dark). This makes it easy to create tints, shades and harmonious variations without needing to know the underlying RGB maths.
Is this colour converter free to use?
Yes — completely free, no account required. All conversions run directly in your browser, so nothing is sent to a server.
More Colour Tools
Once you have your colour values, put them to work. Check accessibility contrast ratios, generate full coordinated palettes or explore colour guides for design, architecture and interiors.