Color Format Converter

📖 Introduction

Convert a single colour between HEX, RGB, HSL, HSV and CMYK, with a WCAG contrast check and palette generation on the side. Paste a value taken from a design file and you get every notation at once, plus ready-to-paste CSS custom properties. Everything is computed locally in your browser and nothing is sent anywhere.

Interface designers who receive a hex value in a spec and need every other notation to paste into code. Anyone assembling slides or posters can pull a few transition shades from the palette section without opening a design tool. And if you write accessibility reports, quoting a measured contrast ratio is far more convincing than saying a colour looks readable to you.

Interface designers who receive a hex value in a spec and need every other notation to paste into code. Anyone assembling slides or posters can pull a few transition shades from the palette section without opening a design tool. And if you write accessibility reports, quoting a measured contrast ratio is far more convincing than saying a colour looks readable to you.

• Why does the CMYK value not match the print? Screen gamut is wider than print, so the conversion is an approximation. Proof it before a print run.
• What counts as passing? Body text usually needs 4.5 to 1 or better. Large text can go down to 3 to 1.
• Can I convert several colours at once? One value at a time. For a batch, paste them in one after another.
• Are the palettes production ready? They come from rotating hue mathematically, so tweak them against the real artwork.

The conversions follow the standard colour space definitions, so a value you paste here will match what your browser renders. HSL and HSV are often confused: HSL places pure white at one hundred percent lightness, while HSV places it at one hundred percent value with zero saturation. That is why the same colour can look like two very different sets of numbers. If you are handing values to a developer, HEX or RGB is usually the safest choice because every tool understands them. If you are adjusting a colour yourself, HSL is easier to reason about, since raising or lowering lightness keeps the hue where it is. The decimal value is handy when you need to pass a colour through an API or a database field that expects a single integer rather than a string.

✨ Features

• Two-way conversion: enter HEX to get RGB, HSL, HSV and CMYK, or fill in the three RGB channels to derive the HEX value.
• Colour picker: click the swatch and pick visually. The result updates immediately, no typing needed.
• Contrast: the ratio against pure white and pure black is computed and graded against the WCAG AA threshold.
• Text suggestion: whichever direction scores higher is recommended as the text colour, so you do not have to guess by eye.
• Palettes: shades, tints, complementary, analogous and triadic, five schemes in total.
• CSS variables: generates a block you can paste straight into a stylesheet.

🚀 How to Use

1. Paste a HEX value into the field, or choose a colour with the picker.
2. Click Convert. The right panel lists all five notations plus the decimal value.
3. Read the contrast block to decide whether text should be black or white.
4. Switch the palette dropdown and take whichever swatches you need.
5. Click Copy value for the HEX, or copy the CSS variables block.

⚠️ Notes

• Proof before printingCMYK is an approximation of a screen colour. Printed output will differ, so always check a proof for real print jobs.
• Contrast scopeContrast uses the WCAG 2.1 relative luminance formula and covers only pure white and pure black backgrounds.
• Math-derived palettePalettes are produced by rotating hue in HSL. They are mathematically derived, not a judgement about what looks best.
• No colour namesThis tool does not recognise colour names and does not sample colours from images.
• CMYK shiftsScreen gamut is wider than print, so the conversion is an approximation. Proof it before a print run.