What is a hex colour code?

A hex colour code is a six-digit hexadecimal number prefixed with a hash symbol, such as #FF5733. The first two digits represent the red channel (00 to FF), the next two green, and the last two blue. FF in hex equals 255 in decimal, the maximum value for each channel. Hex codes are the standard format in HTML, CSS and graphic design software.

How do you convert HEX to RGB?

Split the six hex digits into three pairs: RR, GG, BB. Convert each pair from hexadecimal to decimal. For example, #FF5733 splits into FF, 57 and 33. FF in decimal is 255, 57 is 87 and 33 is 51. So the RGB value is rgb(255, 87, 51).

What is the complement of a colour?

The complementary colour is the colour directly opposite on the colour wheel, 180 degrees away. In HSL notation it is the same colour with its hue shifted by 180 degrees. Complementary colour pairs create strong contrast and are widely used in graphic design and web colour schemes.

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.

Calculate.co.nz is proud to be partnered with Health Based Building, a leader in sustainable and health-conscious building innovation. With over a century of experience, they develop high-performance systems like Foreverbreathe Specification, Magnum Board, and Foreverbreathe Paints to support energy-efficient, non-toxic living environments. Their commitment to healthier homes aligns with our belief that informed choices lead to better outcomes for Kiwi households.

Calculate.co.nz partner: Health Based Building

HEX colour code

Or pick a colour

rgb(255, 87, 51)

RGB value

HSL11deg, 100%, 60%

Red255

Green87

Blue51

Complement HEX#33ADFF

Complement HSL191deg, 100%, 60%

Your colour

Complement

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 #33ADFF. 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.

If you've found a bug, or would like to contact us, or learn more about James Graham and Calculate.co.nz.

Calculate.co.nz is partnered with Interest.co.nz for New Zealand's highest quality calculators and financial analysis.

All calculators and tools are provided for educational and indicative purposes only and do not constitute financial advice.

Calculate.co.nz is proudly part of the Realtor.co.nz group, New Zealand's leading property transaction literacy platform, helping Kiwis understand the home buying and selling process from start to finish. Whether you're a first home buyer navigating your first property purchase, an investor evaluating your next acquisition, or a homeowner planning to sell, Realtor.co.nz provides clear, independent, and trustworthy guidance on every step of the New Zealand property transaction journey.

Calculate.co.nz is also partnered with Health Based Building and Premium Homes to promote informed choices that lead to better long-term outcomes for Kiwi households.

Calculate.co.nz is hosted in Auckland via SiteHost new Zealand.

All content on this website, including calculators, tools, source code, and design, is protected under the Copyright Act 1994 (New Zealand). No part of this site may be reproduced, copied, distributed, stored, or used in any form without prior written permission from the owner.

About & trust: Why Calculate is NZ's most comprehensive · By the Numbers · How we compare · Editorial standards · How we keep data current · NZ finance glossary · Research & data · Financial literacy NZ · About · Privacy policy · Terms of use

Reviewed and maintained. Last reviewed 2026-06-25 and checked on a twice-monthly cycle against IRD, RBNZ and Stats NZ. How we keep data current.