Free Online Calculators
Convert colours: HEX ↔ RGB ↔ HSL with live preview & colour picker
Whether you're a web developer fine-tuning a stylesheet, a designer building a cohesive brand palette, or simply curious about colour codes, understanding the relationship between different colour formats is essential. Our free colour converter lets you seamlessly convert colours between HEX, RGB, and HSL formats, complete with a live preview and an intuitive colour picker.
Before diving into how the tool works, it's helpful to understand what each colour format represents and where it's typically used.
HEX (hexadecimal) colour codes are the most widely recognised format in web design. A HEX code like #1A73E8 consists of six characters representing three pairs — each pair encoding the intensity of red, green, and blue on a scale from 00 to FF (0 to 255 in decimal). HEX codes are compact, copy-paste friendly, and supported universally in CSS and HTML.
RGB (Red, Green, Blue) is the additive colour model used by screens and monitors. Each channel accepts a value between 0 and 255. For example, pure red is expressed as rgb(255, 0, 0). RGB is particularly useful when you need to apply opacity via rgba(), making it a staple in modern CSS and design frameworks.
HSL (Hue, Saturation, Lightness) is arguably the most human-readable colour format. Hue is expressed as a degree on the colour wheel (0°–360°), saturation as a percentage of colour intensity, and lightness as a percentage from black to white. For instance, hsl(211, 80%, 50%) produces a vivid blue. HSL makes it exceptionally easy to create harmonious colour palettes by adjusting a single parameter.
Our tool is designed for speed and simplicity. Here's how to get started:
The colour converter is built to serve a wide range of users across creative and technical disciplines:
Imagine your brand's primary colour is defined as #E63946 in your style guide. A developer needs it as RGB for a CSS animation, while a mobile developer requires it in HSL. Instead of calculating manually, simply enter the HEX code and immediately receive rgb(230, 57, 70) and hsl(356, 77%, 56%). Consistency maintained in seconds.
Accessibility standards like WCAG require sufficient contrast between text and background colours. By converting your colours to RGB, you can then input them into contrast ratio calculators to ensure compliance. Our tool makes this first step effortless.
HSL is ideal for generating design tokens and tonal scales. Fix your hue and saturation, then incrementally adjust lightness to create a scale from light to dark — perfect for design systems. Convert each step to HEX or RGB for immediate use in code.
Both formats represent the same colour information — red, green, and blue channel intensities — but in different notations. HEX uses base-16 notation (e.g. #FF5733), while RGB uses decimal integers (e.g. rgb(255, 87, 51)). They are mathematically equivalent and easily interchangeable with our tool.
The current converter handles the core HEX, RGB, and HSL formats. For transparency, you can take the RGB output and manually add an alpha value to create an rgba() expression, or use the HSL output with hsla(). For example: rgba(255, 87, 51, 0.75).
HSL is more intuitive for designers because it maps to how humans perceive colour. Want a lighter version of a colour? Just increase the lightness percentage. Want a less saturated tone? Reduce saturation. This makes HSL much easier to manipulate programmatically than RGB.
Yes. The tool uses standard mathematical conversion formulas that produce results consistent with professional tools like Figma, Adobe Photoshop, and Chrome DevTools. Minor rounding differences of ±1 may occasionally appear in HSL values but have no visible impact on the rendered colour.
Absolutely. The colour converter is fully responsive and works seamlessly on smartphones and tablets. The colour picker also functions well on touch screens, making it convenient to use on the go.