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 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.