Color Code Converter

Type a colour in any common notation and see it in every other one at once: HEX (with alpha), RGB, HSL, HWB, CMYK and the CSS colour name when there is an exact match. A live swatch and the contrast ratio against white and black text help you judge whether the colour is usable for text or backgrounds.

CSS & Frontend Runs in your browser

Convert a Colour Code

JavaScript is required. This tool runs in your browser, so please enable JavaScript to use it. The instructions below are still available.

How to Use the Color Code Converter

Type or paste a colour into Colour code, or choose one with the colour picker.
Read the converted values in the table; each row has the CSS-ready string.
Select a value in the table and copy it into your code.

About This Tool

Front-end developers moving values between design tools and stylesheets, designers preparing colour specs, and students learning how the colour models relate.

Input: HEX, RGB, HSL, HWB, CMYK or a CSS colour name · Output: All colour formats.

Features and Limitations

Features

Accepts both legacy comma syntax and modern space syntax, including alpha (rgb(30 144 255 / 50%)).
Understands all 148 CSS named colours and reports an exact name match.
Shows contrast ratios against white and black using the WCAG formula.
Any other CSS colour your browser understands (for example oklch()) is converted through the browser's own colour engine.

Limitations

CMYK is a simple mathematical approximation without an ICC colour profile; printed colours will differ, so ask your printer for profile-based values.
Results are rounded: HSL and HWB to one decimal place, CMYK to whole percentages.
Wide-gamut colours (display-p3, oklch outside sRGB) are clipped to the nearest sRGB value.
Results are computed in your browser; nothing you enter is sent to a server.

Example

#1e90ff is rgb(30, 144, 255), hsl(209.6, 100%, 55.9%), hwb(209.6 11.8% 0%) and roughly cmyk(88%, 44%, 0%, 0%). It is also the CSS name dodgerblue.

Frequently Asked Questions

What is the difference between HSL and HWB?

Both use a hue angle. HSL then describes saturation and lightness; HWB says how much white and black to mix into the pure hue, which many people find easier to reason about.

Why is the CMYK value only approximate?

Real CMYK depends on the inks, paper and printing process, described by an ICC profile. Without a profile, the standard formula gives a rough starting point only.

Can I use 8-digit HEX colours in CSS?

Yes. #RRGGBBAA (and the short #RGBA form) is supported by all current browsers. The last two digits are the alpha channel.

What contrast ratio do I need for text?

WCAG AA asks for 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold). Check exact pairs with the WCAG Contrast Checker.