Colour converter

Working with colours is an integral part of the creative process. Different projects require different colour formats, and switching between them can be annoying at best. Whether you're coding a website, designing a logo, or preparing digital prints, a reliable tool that can convert colours across formats can save you a lot of time and effort. To help streamline your workflow, I've developed a simple online colour conversion tool.

This widget enables you to seamlessly convert any colour from one notation to another, such as hex, RGB, HSL, HSV, HWB, LAB, LCH, and CMYK. When you update the colour data of one of the types it will automatically update the rest of the input values as well as the table for easy copy and pasting.

Why so many colour notations?

As a designer or developer, you may encounter projects that require you to work with multiple colour systems. A website project might use hex codes, but when it comes time to print your designs, you'll need to switch to CMYK. This tool eliminates the need for multiple converters and calculators, offering everything in one place.

Manually converting between formats requires a deep understanding of the underlying maths. Even then, it’s prone to errors. With this tool, you only need to input the colour once, and it will provide accurate conversions for all formats.

For projects where colour consistency is crucial across different media (like digital and print), this tool ensures that you’re working with the correct values in every format. Whether you’re moving from screen to print or vice versa, you’ll maintain consistent colour representation.

At its core, this tool leverages mathematical formulas to transform colours from one space to another. For example, converting from RGB to CMYK isn't as simple as it may seem; it requires calculating the exact cyan, magenta, yellow, and black values based on the interplay between red, green, and blue light. Similarly, converting between HSL and RGB involves breaking down the colour into its hue, saturation, and lightness components, then translating those values into RGB's additive colour system. The tool’s algorithm does all this heavy lifting for you, relying on well-established colour science principles to ensure accurate conversions across the board.

How does each colour format work?

If you're new to the technical side of design, you might wonder why there are so many different ways to represent colours. Here's a quick breakdown of the most common formats:

• Hexadecimal (Hex): Common in web design, hex codes are three or six-character codes that represent colour using hexadecimal numbers. For instance, #FFFFFF is white, #000000 is black, and #FF0000 is bright red.
• RGB (Red, Green, Blue): This format defines colours based on their red, green, and blue values, ranging from 0 to 255. For example, pure red is represented as rgb(255, 0, 0).
• HSL (Hue, Saturation, Lightness): HSL separates the concept of "colour" (hue) from intensity (saturation) and brightness (lightness). It's an intuitive way to manipulate colours based on how humans perceive them.
• HSV (Hue, Saturation, Value): Similar to HSL, but with "value" instead of "lightness", which determines how bright or dark the colour appears.
• HWB (Hue, Whiteness, Blackness): Another hue-based model, HWB allows for controlling colours using whiteness and blackness percentages, which can be easier for some designers to understand.
• LAB (Lightness, a, b): LAB separates colours into lightness and two colour dimensions (a and b), used mainly in advanced graphic and photographic applications to ensure consistency across devices.
• LCH (Lightness, Chroma, Hue): Derived from the LAB model, LCH is useful when you need to represent colours in a way that aligns closely with human visual perception.
• CMYK (Cyan, Magenta, Yellow, Key/Black): Mainly used in printing, CMYK defines colours by how much of each ink is used, with "key" representing black.

Related tools

• Colour accessibility checker: Easily check colour contrast ratios for WCAG compliance with this widget. Input HEX or RGB values to ensure accessibility for AA and AAA standards.
• Colour palette generator: Discover a colour palette generator that instantly creates harmonious palettes using hex or RGB inputs based on colour theory formulas.

Further reading

• W3C: CSS Color Module Level 3
• W3C: CSS Color Module Level 4
• W3C: CSS Color Module Level 5

Widget made with staark