🎨 Hex to RGB Converter

A six-digit hex colour is three pairs of base-16 digits, one pair each for red, green and blue. Each pair encodes a value from 00 to FF, which is 0 to 255 in decimal, so the first digit of a pair is worth 16 times its value and the second is worth its face value. The pair 5A is therefore 5 times 16 plus 10, which is 90.

Shorthand works by duplication rather than by padding. In a three-digit code each digit is repeated, so #F30 expands to #FF3300, not #0F0300. The converter performs that expansion and displays the normalised six-digit form, which is worth checking when a design file hands you a mixture of both notations.

HSL is derived from the RGB values after scaling them to the range 0 to 1. Lightness is the average of the largest and smallest channel. Saturation is the difference between those two, divided by either their sum or by 2 minus that sum, depending on whether lightness is below or above 0.5. Hue is an angle determined by which channel is largest, measured in 60-degree segments around the colour wheel, and reported here in degrees.

Enter FF5733, with or without the hash. Splitting it into pairs gives FF, 57 and 33. FF is 15 times 16 plus 15, which is 255. The pair 57 is 5 times 16 plus 7, which is 87. The pair 33 is 3 times 16 plus 3, which is 51. The result is rgb(255, 87, 51), a strong orange-red, and those three numbers also appear individually in the channel breakdown.

For HSL, scale the channels to 255ths: red is 1, green is about 0.341 and blue is 0.2. The maximum is 1 and the minimum is 0.2, so lightness is their average, 0.6, or 60 per cent. The difference between them is 0.8. Because lightness is above 0.5, saturation is 0.8 divided by 2 minus 1 minus 0.2, which is 0.8 divided by 0.8, giving 1, or 100 per cent.

Red is the largest channel, so hue is 60 multiplied by green minus blue divided by the difference: 0.341 minus 0.2 is 0.141, divided by 0.8 is 0.176, times 60 is about 11 degrees. The HSL value is hsl(11, 100%, 60%).

For comparison, the shorthand FFF expands to FFFFFF and converts to rgb(255, 255, 255).

All three notations describe the same colour, so pick on convenience. Hex is compact and universal, which is why design tools and style guides use it. RGB is what you need when a system wants numeric channels, including canvas drawing, image processing libraries, many charting tools and hardware such as LED strips.

HSL earns its place when you need to modify a colour rather than just state it. Because hue, saturation and lightness are separate, you can produce a hover state by lowering lightness by ten points while leaving the hue untouched, or build a whole tonal scale from one hue. Doing the same in hex means recalculating all three channels.

The comma-separated channel list in the CSS panel exists for a specific reason: writing rgba(255, 87, 51, 0.5) or storing the channels in a custom property lets you reuse one colour at several opacities without repeating the values.

Two cautions. Rounding means a hex to HSL to hex round trip can land a digit or two from where it started, so keep hex as your source of truth. These conversions also describe sRGB only, and say nothing about print, where a CMYK conversion noticeably dulls saturated oranges and blues.