Color Converter
Enter a color in any format — name, HEX, RGB, HSL, HWB, CMYK, or NCol — and instantly see all conversions with a live preview. Copy any format in one click.
How to Use the Color Converter
Enter a color in any format
Type a CSS color name (like "coral"), a hex code (#ff7f50), or any CSS color function: rgb(), hsl(), hwb(), cmyk(), or ncol(). You can also use the color picker on the right.
See all conversions instantly
The tool automatically detects your input format and converts it to all 7 formats: Name, HEX, RGB, HSL, HWB, CMYK, and NCol. A live color swatch shows the result visually.
Copy any format
Click the copy icon next to any row to put that specific color format on your clipboard, ready to paste into CSS, design tools, or code.
What Is the Color Converter?
Modern CSS supports multiple ways to express the same color. HEX is the most compact and widely used in HTML. RGB is useful for JavaScript color manipulation. HSL is the most intuitive for adjusting brightness and saturation without changing the hue. HWB (Hue, Whiteness, Blackness) is a newer CSS Color Level 4 format that is easier to reason about than HSL. CMYK is the format used in print design. NCol is a W3C natural color notation based on HWB with named hue sectors. This tool converts between all of them, and also resolves CSS named colors like "goldenrod" or "steelblue" into their numeric equivalents.
Frequently Asked Questions
The tool supports HEX (#rrggbb), RGB (rgb(r,g,b)), HSL (hsl(h,s%,l%)), HWB (hwb(h,w%,b%)), CMYK (cmyk(c%,m%,y%,k%)), NCol, and over 140 named CSS colors like red, coral, or DeepSkyBlue.
Yes. Type any CSS named color like "coral", "steelblue", or "goldenrod" and the tool will resolve it to all other formats instantly.
HWB stands for Hue, Whiteness, Blackness. It is a more intuitive color model than HSL. You start with a pure hue and mix in white and black. It is supported in CSS Color Level 4.
NCol (Natural Color) is a W3C color notation based on HWB. Hues are named by their starting letter (R=Red, Y=Yellow, G=Green, C=Cyan, B=Blue, M=Magenta) plus a percentage offset.
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in color printing. CSS does not natively support CMYK, but this tool converts between CMYK and RGB for your design workflow.