Color Picker and Converter
Colour codes appear in three main formats in web design, graphic design and digital media, and you often need to convert between them. HEX codes like #FF5733 are the standard format in HTML and CSS: six hexadecimal digits representing the red, green and blue channels, each running from 00 (none) to FF (full intensity). RGB notation, rgb(255, 87, 51), uses the same three channels but expresses each as a decimal number from 0 to 255. HSL notation describes a colour by its hue (position on the colour wheel in degrees from 0 to 360), saturation (intensity as a percentage), and lightness (brightness as a percentage), which many designers find more intuitive because adjusting saturation or lightness feels natural while hue gives you the colour family. Knowing the HSL representation also makes it trivial to find the complementary colour: just add 180 degrees to the hue. This tool accepts a six-digit hex colour code and converts it to both RGB and HSL instantly, displays a live colour swatch, and shows the complementary colour alongside its hex and HSL values. You can also use the browser's native colour input to pick any colour visually. The default is #FF5733, a warm reddish-orange.
How it works
The hex string is split into three two-character pairs and each is parsed with parseInt(pair, 16) to get the red, green and blue decimal values (0 to 255). For HSL conversion, each channel is normalised to the 0-1 range. The maximum and minimum of the three normalised channels determine the lightness (average of max and min) and saturation (difference divided by 1 minus the absolute value of 2L minus 1). Hue is calculated from which channel dominates and the relative values of the other two channels, then multiplied by 60 degrees. The complement hue is the original hue plus 180 modulo 360; the complement colour is rebuilt from its HSL values back to RGB and then to hex.
Worked example
#FF5733 splits to R=255, G=87, B=51. Normalised: R=1, G=0.341, B=0.2. Max=1 (red), min=0.2. Lightness=(1+0.2)/2=0.6=60%. Saturation=(1-0.2)/(1-|2(0.6)-1|)=0.8/0.8=1=100%. Hue: red dominates, hue=60 times ((G-B)/(max-min) mod 6)=60 times (0.882)=approx 11 degrees. HSL is (11, 100%, 60%). Complement hue=11+180=191 degrees, giving #33DAFF. These match the defaults pre-filled above.
Related calculators
- Hexadecimal Calculator: arithmetic on hex numbers with decimal and binary output.
- Bitwise Calculator: AND, OR, XOR and NOT operations on integers.
- Base64 Encoder/Decoder: encode and decode text in Base64 format.