Colour Converter (HEX / RGB / HSL)

HEX, RGB & HSL Colour Formats

• HEX: a hexadecimal code like #2563EB. Each pair of digits encodes red, green and blue as a value from 00 to FF (0–255). Widely used in CSS and design tools.
• RGB: three channels — red, green and blue — each from 0 to 255, written as rgb(37, 99, 235).
• HSL: Hue, Saturation and Lightness, written as hsl(217, 83%, 53%). More intuitive for adjusting how light, dark or vivid a colour looks.

How to use this converter

Pick an input format (HEX, RGB or HSL), enter your value, and the other two formats update instantly alongside a live colour preview. Tap any result to copy it to your clipboard.

Conversions round HSL values to whole numbers, so round-tripping a colour may shift it by one unit. This is normal and visually imperceptible.

Frequently Asked Questions

How do I convert HEX to RGB?

A HEX colour like #6366F1 is split into three pairs — red, green and blue — each a hexadecimal value from 00 to FF (0–255). #63 = 99, #66 = 102, #F1 = 241, giving rgb(99, 102, 241).

How do I convert RGB to HEX?

Convert each of the three 0–255 components to a two-digit hexadecimal value and join them with a leading #. For example rgb(99, 102, 241) becomes #6366F1.

What is HSL?

HSL stands for Hue (0–360°), Saturation (0–100%) and Lightness (0–100%). It maps more closely to how people think about colour, which makes it handy for tweaking shades and tints.

What is the difference between #RGB and #RRGGBB?

The 3-digit shorthand (e.g. #F00) duplicates each digit, so #F00 is the same as #FF0000. This converter accepts both 3- and 6-digit HEX codes.