What are HEX, RGB and HSL?

They are three ways of writing the same colour. HEX is a six-digit code like #3366FF, RGB gives red, green and blue from 0 to 255, and HSL gives hue, saturation and lightness, which is friendlier for adjusting a colour.

How do I convert a hex code to RGB?

Split the six-digit hex into three pairs and read each pair as a number from 0 to 255. The converter does this and also gives the HSL version.

HSL makes it easy to tweak a colour: change the hue to shift the colour, the saturation to make it more or less vivid, and the lightness to make it lighter or darker.

Colour Converter

This colour converter turns a colour between the three formats used across the web and design, HEX, RGB and HSL, and shows a live preview so you can see exactly what you are working with. The three are just different ways of describing the same colour. HEX is the familiar six-digit code such as #3366FF, used throughout web and graphics work. RGB describes a colour as amounts of red, green and blue, each from 0 to 255, which is how screens actually mix light. HSL describes it as hue, the position around the colour wheel, saturation, how vivid it is, and lightness, how light or dark, which is the most intuitive set for adjusting a colour by hand. You can type a hex code or enter RGB values, and the converter keeps all formats in sync and updates the preview swatch instantly, so changing the red channel or pasting a new hex immediately shows the matching RGB, HSL and colour. This is handy for web developers matching brand colours, designers tweaking a palette, and anyone who needs to copy a colour from one tool into another that expects a different format. The HSL output is especially useful for building lighter and darker shades of the same hue. Enter a hex code or RGB values to see every format and the preview straight away.

HEX

Red (0-255)

Green (0-255)

Blue (0-255)

HEX#3366FF

RGBrgb(51, 102, 255)

HSLhsl(220, 100%, 60%)

How it works

When you enter a hex code, the converter reads its three pairs of digits as red, green and blue values. When you change an RGB value, it rebuilds the hex. From the RGB values it then computes the HSL form using the standard conversion, and paints the preview swatch with the current colour.

Worked example

The hex code #3366FF is red 51, green 102 and blue 255, written rgb(51, 102, 255). In HSL that is a hue of 220 degrees, full saturation and 60 percent lightness, a bright blue.

Related calculators

Aspect Ratio Calculator: width and height ratios.
Percentage Calculator: percentages.
Data Storage Converter: file sizes.
Unit Converter: units.

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.