Convert between HEX, RGB, and HSL colour formats instantly. Use the colour picker for visual selection.
Click the box to open the colour picker
HEX is the most common format on the web, used in CSS, HTML, and design tools. It is a 6-digit hexadecimal code (or 3-digit shorthand) that encodes red, green, and blue channels as values from 00 to FF. #000000 is black and #FFFFFF is white.
RGB expresses red, green, and blue as integers from 0 to 255. It is the native format for screens and monitors. rgb(255, 0, 0) is pure red. Use RGB when working with CSS or canvas graphics.
HSL (Hue, Saturation, Lightness) is often more intuitive for designers. Hue is a degree on the colour wheel (0-360), Saturation is how vivid the colour is (0-100%), and Lightness is how light or dark it is (0-100%). Adjusting only the lightness gives you tints and shades of the same hue.
Click the large colour preview box to open the browser's native colour picker. Drag to any colour and all three format values update automatically.
Enter a HEX colour code and instantly see the equivalent RGB and HSL values. Click the colour preview to use the browser's colour picker to choose any colour visually.
#FF5733
RGB: rgb(255, 87, 51) | HSL: hsl(11, 100%, 60%)
#3B82F6 (Tailwind blue-500)
RGB: rgb(59, 130, 246) | HSL: hsl(217, 91%, 60%)
#000000 (black)
RGB: rgb(0, 0, 0) | HSL: hsl(0, 0%, 0%)
#FFFFFF (white)
RGB: rgb(255, 255, 255) | HSL: hsl(0, 0%, 100%)
Converting HEX #FF8800 to RGB
RGB: rgb(255, 136, 0) — a deep orange
Converting RGB to HSL (simplified)
See CSS specification for full formula
The hexadecimal colour system became standard on the web through HTML 3.2 in 1997. The 216 'web-safe' colours were defined at a time when most monitors could only display 256 colours. Modern displays can render over 16 million colours (8 bits per channel), making the web-safe palette largely obsolete. CSS Color Level 4 now supports wide-gamut Display P3 colours, which go beyond the standard sRGB range.
HEX and RGB describe red, green, and blue channel values, while HSL expresses a colour as hue, saturation, and lightness. They are different representations of the same colour space for ordinary screen colours, so conversion changes the notation rather than magically improving the colour. Keep alpha or transparency separate when your target format supports it.
Screens, browsers, brightness settings, colour profiles, and ambient light affect how a colour appears. A numeric conversion cannot guarantee identical physical output. For print or brand work, use the organisation’s approved colour profile and proof the result on the intended material instead of relying only on a browser swatch.
Compare foreground and background contrast, not just whether the colours look different to you. Dark text on a light background or light text on a dark background is usually easier to read, but saturation and font size matter too. Check the final combination with an accessibility contrast checker before publishing.
Keep the alpha value separate from the red, green, and blue channels unless the target format explicitly uses an alpha notation. Preview the colour over the actual background because transparency changes the resulting appearance. Export in a format and colour notation that the receiving design or web system supports.