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
The widget is free; a visible credit is how you can say thanks. It is one plain line, shown in the code below, linking to the tool with rel="nofollow". Switch it off here or delete the line - the widget works the same either way.
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

Under the widget on your page: Colour Converter by A2Z Tools

Embed code

<div data-a2z-widget="color-converter" data-height="580"></div>
<p class="a2z-attribution" style="margin:6px 0 0;font:12px/1.4 system-ui,sans-serif;opacity:.8">Colour Converter by <a href="https://a2z.tools/color-code-converter" target="_blank" rel="nofollow noopener">A2Z Tools</a></p>
<script async src="https://a2z.tools/embed.js"></script>

Recommended. A small script (what it does) sizes the widget to fit its content, loads it lazily and keeps it isolated in its own frame. Works in WordPress (Custom HTML block), Squarespace, Webflow, Shopify, Blogger, React / Next.js and plain HTML - anywhere a <script> tag is allowed.

Works with

Advertisement

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
A2Z EMBEDS FOR YOUR WEBSITE
Advertisement