Colour Picker

Whether you are building a website, tweaking a brand palette, styling a chart or just matching a colour you like, you constantly need to move between the different ways colours are written, and this tool does exactly that with a live preview. Pick a colour using the swatch picker, or type a value in any of the three standard formats, and it instantly shows you the matching HEX code, RGB values and HSL values, all kept in sync, with a large preview block so you can see the colour you are working with. The three formats each have their strengths. HEX, the six-digit code like the green used across this site, is the everyday currency of web design and CSS, compact and easy to paste. RGB describes the colour as amounts of red, green and blue from 0 to 255, which maps directly to how screens actually mix light and is handy when you are nudging a single channel. HSL, for hue, saturation and lightness, is often the most intuitive to adjust by hand, because you can spin the hue around the colour wheel, dial the saturation up or down to make a colour more or less vivid, and change the lightness without touching the underlying colour. Being able to convert freely between them means you can grab a HEX code from a style guide, fine-tune it in HSL, and read off the RGB for a tool that needs it, all without leaving the page. It is a quick, dependable helper for designers, developers, marketers and anyone who works with colour. The conversions and a worked example are explained below.

Calculate.co.nz is proud to be partnered with Premium Homes, a recognised leader in eco-friendly, sustainable, and energy-efficient homebuilding. With a dedicated team and award-winning experience, they create homes that prioritise health, comfort, and long-term performance. Their founders, Andrew and Kelly, set out to raise the standard of residential construction in New Zealand by combining practical building expertise with a clear commitment to doing things better for homeowners.
Premium Homes: got a section? Let's build your eco home on it.
Advertise on this page
HEX#28A745
RGBrgb(40, 167, 69)
HSLhsl(134, 61%, 41%)

How it works

A HEX code is three pairs of hexadecimal digits for red, green and blue, each from 00 to FF, which is 0 to 255 in decimal. Converting RGB to HEX turns each 0 to 255 value into two hex digits. HSL is found from RGB by scaling the values to 0 to 1, taking the maximum and minimum to get lightness and saturation, and computing the hue from which channel is largest.

Worked example

The colour red 40, green 167, blue 69 becomes the HEX code #28A745, since 40 is 28 in hex, 167 is A7, and 69 is 45. In HSL it is a hue of about 134 degrees, a saturation of about 61 percent and a lightness of about 41 percent, a medium green.

Related calculators

Frequently asked questions

What is a HEX colour code?

A HEX code is a six-digit code like #28A745 that describes a colour as three pairs of hexadecimal digits for red, green and blue, each from 00 to FF. It is the most common way to specify colours in web design and CSS.

How do you convert RGB to HEX?

Convert each of the red, green and blue values, which run from 0 to 255, into a two-digit hexadecimal number, then join them with a hash in front. For example, red 40, green 167, blue 69 becomes #28A745.

What is HSL?

HSL stands for hue, saturation and lightness. Hue is the colour's position on the colour wheel in degrees, saturation is how vivid it is as a percentage, and lightness is how light or dark it is. HSL is often easier to adjust by hand than RGB.