What is the Color Converter?
Convert colours instantly between HEX, RGB, HSL, HSV, CMYK, and CSS named colours. Paste any value and get all formats at once.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the Color Converter
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Paste or type any colour value
Enter a HEX code, an RGB value, an HSL value, or a CSS colour name. The converter detects the format automatically.
See all formats at once
All output formats update instantly: HEX, RGB, RGBA, HSL, HSLA, HSV, and CMYK appear side by side.
Copy the format you need
Click the copy icon next to any format to grab that specific string. Use whichever format fits your codebase.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
/* Same colour in every format */
--color-primary-hex: #6C2EF5;
--color-primary-rgb: rgb(108, 46, 245);
--color-primary-hsl: hsl(262, 91%, 57%);
--color-primary-hwb: hwb(262 18% 4%);
/* Use whichever format fits your context */
.button { background: hsl(262, 91%, 57%); }
.overlay { background: rgba(108, 46, 245, 0.4); }HSL is easiest to adjust by eye - change the L value to lighten or darken without touching the hue.
Pro tips for better results
Use HSL for design system colours
HSL makes it easy to create tint/shade scales by changing only the L (lightness) value. Keep H and S fixed for a cohesive palette.
RGBA for opacity in CSS variables
CSS custom properties do not support the slash syntax inside rgb(). Use rgba(r, g, b, a) for opacity-capable variables that work across all browsers.
CMYK is for print, not screens
Browsers render everything as RGB. CMYK values from this tool are a reference for print handoff - do not use CMYK directly in CSS.
Named colours have inconsistent rendering
CSS named colours like "red" or "cornflowerblue" render differently in print and some PDF renderers. Always use HEX or RGB in production CSS.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.