Colour Converter Widget

Add a colour converter to your design tutorial or brand page. Paste a colour in any common format - hex, rgb(), hsl(), hsv(), cmyk() or a CSS name - and copy it back out in every other format.

Design Converter Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/color-converter" title="Colour Converter by A2Z Tools" width="100%" height="580" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

CSS colour formats and the 148 CSS named colours are read by A2Z's shared colour engine; hsv() and cmyk() are read by the widget itself. Everything is converted through 8-bit sRGB, so each output is exactly what a browser would paint. HSL and HSV values are shown to one decimal place so round trips stay accurate. CMYK uses the simple device-independent formula, which is useful for a starting point but is not what a print shop's colour profile would produce - the widget says so under the result.

Method

  • R', G', B' = R, G, B / 255; max, min and delta = max - min
  • HSL: L = (max + min) / 2; S = delta / (1 - |2L - 1|); H from the dominant channel x 60 degrees
  • HSV: V = max; S = delta / max; H as for HSL
  • CMYK (naive): K = 1 - max; C = (1 - R' - K) / (1 - K), same for M and Y
  • Outputs rounded: RGB to whole numbers, HSL/HSV to 0.1, CMYK to 0.1%; alpha to 3 decimals

Limitations

  • CMYK is the device-independent textbook formula with no ICC profile, ink limit or dot gain, so it is a starting point only, not a press-ready value.
  • Everything is treated as sRGB. Display P3, Lab, LCH and OKLCH colours are not read or produced.
  • Pantone and other proprietary swatch names are not included; only the 148 CSS named colours are recognised.
  • Because channels are 8-bit, converting HSL or CMYK in and back out can move a value by a rounding step.

Where publishers use it

  • CSS and front-end tutorials that move between hex and hsl()
  • Brand guidelines that list a colour in screen and print notation
  • Designers handing colours between tools that use different models
  • Teaching colour models in a digital-media course

Questions

Is the CMYK value print-ready?

No. It is the naive device-independent conversion. Real print colour depends on the ink, the paper and an ICC profile, so ask your printer to convert with their profile.

What is the difference between HSL and HSV?

Both describe hue and saturation, but HSL's third value is lightness (50% is the pure colour, 100% is white) while HSV's is value or brightness (100% is the pure colour). HSB is another name for HSV.

Does it keep transparency?

Yes for HEX (8 digits), rgba() and hsla(). HSV and CMYK have no alpha channel, so it is dropped there.

Which inputs are accepted?

#rgb, #rrggbb, #rrggbbaa, hex without #, rgb()/rgba() with commas or spaces, hsl()/hsla(), hsv()/hsb(), cmyk() and CSS colour names such as tomato.

Sources

  1. CSS Color Module Level 4 - sRGB, hsl() and named colours - W3C . hex, rgb(), hsl() syntax, HSL-to-RGB conversion and the named-colour table
  2. Color Gamut Transform Pairs (A. R. Smith, SIGGRAPH '78) - ACM . the original RGB-HSV (hexcone) transform

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Colour Converter
https://a2z.tools/color-code-converter

Related widgets

More Design widgets →

Preview

CustomizeGet code