Colour Converter

A colour converter translates colour values between the major colour models used in design, development, and print: HEX, RGB, HSL, HSB/HSV, CMYK, and LAB. It is used by web developers, graphic designers, UI/UX designers, and print professionals who need to move colours between applications that use different colour formats.

How to Use the Colour Converter

1. Enter a colour value in any supported format: a HEX code (e.g., #3A7BD5), an RGB value (e.g., rgb(58, 123, 213)), an HSL value, or a CMYK value.
2. The converter displays the equivalent values in all other formats simultaneously.
3. Click any colour format's value to copy it to your clipboard.
4. Use the colour picker to select a colour visually and see all its format equivalents update in real time.
5. Save recently used colours to a palette for quick reference.

The Formula

Each colour model describes colour differently:

HEX: A 6-digit hexadecimal string (#RRGGBB) where each pair of digits represents the red, green, and blue channel values from 00 (0) to FF (255). Example: #FF5733 = Red 255, Green 87, Blue 51.

RGB: Three integer values from 0 to 255 for red, green, and blue. RGB is the native format for screens and monitors.

HEX to RGB: R = HEX(RR) as decimal, G = HEX(GG) as decimal, B = HEX(BB) as decimal

RGB to HSL:

1. Normalise: R' = R/255, G' = G/255, B' = B/255.
2. Max = max(R', G', B'), Min = min(R', G', B'), Delta = Max - Min.
3. Lightness: L = (Max + Min) / 2.
4. Saturation: if Delta = 0, S = 0; else S = Delta / (1 - |2L - 1|).
5. Hue: calculated based on which channel is the maximum, ranging 0-360 degrees.

HSL to RGB: use the inverse formula with intermediate chroma values.

RGB to CMYK: R' = R/255, G' = G/255, B' = B/255. K (black) = 1 - max(R', G', B'). C = (1 - R' - K) / (1 - K), M = (1 - G' - K) / (1 - K), Y = (1 - B' - K) / (1 - K).

Real-World Example

A designer receives a brand colour defined as HEX #1E90FF (Dodger Blue) and needs to use it across web CSS, a Figma design (HSL), and a printed brochure (CMYK).

HEX: #1E90FF RGB: R = 30, G = 144, B = 255

Normalise: R' = 0.118, G' = 0.565, B' = 1.0 Max = 1.0 (Blue), Min = 0.118 (Red), Delta = 0.882

Lightness: L = (1.0 + 0.118) / 2 = 0.559 = 55.9% Saturation: S = 0.882 / (1 - |2(0.559) - 1|) = 0.882 / (1 - 0.118) = 0.882 / 0.882 = 1.0 = 100% Hue: 210 degrees (blue family)

HSL: hsl(210, 100%, 56%)

CMYK: K = 0, C = (1 - 0.118) / 1 = 0.882 = 88%, M = (1 - 0.565) / 1 = 44%, Y = 0%, K = 0% CMYK: (88, 44, 0, 0)

The designer uses #1E90FF in CSS, hsl(210, 100%, 56%) in Figma, and CMYK (88, 44, 0, 0) in InDesign for print.

Understanding Colour Models

Different colour models serve different purposes. RGB is an additive model used for screens: combining red, green, and blue light at full intensity produces white. CMYK is a subtractive model used for print: inks absorb (subtract) light, and combining cyan, magenta, yellow, and black produces near-black. HEX is simply a compact notation for RGB values used in HTML and CSS. HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) are human-intuitive models that make it easy to adjust a colour's vibrancy or darkness without changing its hue. LAB (CIE Lab*) is a perceptual colour space designed to be uniform with respect to human vision, widely used in professional colour management and when precise colour matching across devices is critical.

Frequently Asked Questions

Why does a colour look different on screen versus in print? Screens display colour using RGB light (additive), while print uses CMYK ink (subtractive). The gamut (range of reproducible colours) of CMYK is smaller than RGB; many vivid screen colours, especially bright blues and greens, cannot be reproduced in print. When converting RGB to CMYK, a colour management system applies a conversion that may slightly dull vibrant colours. Always review a CMYK proof before printing to check colour accuracy.

What is the difference between HSL and HSB/HSV? Both models use Hue and Saturation as their first two values. The difference is in the third value: HSL uses Lightness (where 50% is a pure colour, 0% is black, and 100% is white), while HSB uses Brightness/Value (where 100% is the pure colour, 0% is black, and there is no "pure white" endpoint). Photoshop uses HSB; CSS and many design tools use HSL. They produce different results for the same numeric inputs.

How many colours can a HEX code represent? A 6-digit HEX code (#RRGGBB) can represent 256 x 256 x 256 = 16,777,216 distinct colours, which equals 2^24 or 24-bit colour. An 8-digit HEX code (#RRGGBBAA) adds an alpha (transparency) channel, also with 256 levels.

Can I convert a Pantone colour to HEX or RGB? Pantone colours are proprietary spot colours used in print and cannot be directly converted to RGB or HEX using a formula, as they are physical inks rather than light-based colours. Pantone provides official RGB, HEX, and CMYK equivalents for each colour in their library for screen reproduction purposes. These are approximations rather than exact matches, as the gamuts of the two systems differ.

Also try these free tools:

• Contrast Ratio Checker
• Colour Palette Generator
• CSS Minifier

Extended Reference Notes

The notes below cover the broader context that informs how to use the Colour Converter well.

Standards, Conventions, and Ambiguity

Standards matter for the Colour Converter because the same concept can be defined differently across regions or industries. The Colour Converter follows the most common modern convention; If your work depends on a specific regional or industry variant, confirm the Colour Converter assumption matches yours before relying on the result. The result is only as accurate as the standard it implements, so check which variant the Colour Converter uses when the choice matters.

Lossy vs Lossless Conversions

Some Colour Converter conversions are exact and reversible; others are lossy, where precision is dropped, metadata is discarded, or the target format simply cannot represent every nuance of the source. Lossy Colour Converter conversions are usually fine for human-readable outputs, but become a problem when the result feeds a downstream system. When in doubt, keep both representations with the Colour Converter and compare.

Encoding and Character Handling

Encoding and character handling matter for the Colour Converter because the same text can be stored in different ways. Modern tools like the Colour Converter default to Unicode (UTF-8) for almost everything, but legacy systems, file formats, and network protocols sometimes still use older encodings. The Colour Converter follows the most common modern convention; if your source or destination is a legacy system, verify that the characters survive the round trip.

Precision and Rounding

Conversion tools like the Colour Converter typically round to a reasonable number of decimal places for human reading, usually two to six significant digits, depending on the magnitude and use case. If you need more precision than the Colour Converter display shows, the underlying calculation is performed at higher precision internally, and the displayed value is the rounded version of that. For audit or legal purposes, always work from the higher-precision value where the Colour Converter exposes one, and document the rounding rule used.

Common Pitfalls

Three pitfalls catch most Colour Converter users: mixing up source and destination conventions, losing precision through multiple chained conversions when a single direct conversion would preserve it, and assuming the tool knows context it cannot infer. For each of these, the cure is to state the assumption explicitly when using the Colour Converter, then check it against the output.

When Precision Matters Most

Precision is rarely an issue for everyday Colour Converter use, but it matters for a smaller set of uses: scientific work, engineering, financial reporting, and audit. Where the Colour Converter exposes a higher precision value, use it for those cases; where it does not, and the precision is critical, perform the conversion independently and compare the two results.

Practical Defaults That Work in Most Cases

The Colour Converter defaults are chosen to match the most common real-world cases, so they work without adjustment for typical use. Deviating from those Colour Converter defaults should be deliberate: state the deviation in any downstream communication so the result is not mistaken for the standard treatment.

Verifying the Result Independently

The cheapest sanity check for a Colour Converter result is a back-of-envelope estimate using rounded inputs: does the order of magnitude match? For critical conversions, verify the Colour Converter result independently with a second method, and keep both results if they are needed for the record.