Color Converter
Convert colors between HEX, RGB, HSL, and CMYK instantly — with a live preview and one-click copy for every format.
Quick presets:
About the Color Converter
Convert colors instantly between HEX, RGB, HSL, and CMYK formats with a live visual preview. All conversions happen in your browser — paste a value in any field and every other format updates automatically.
What color formats are supported?
HEX (3 and 6 digit), RGB, HSL, and CMYK. Type or paste a value into any field and the others update instantly.
Why does the CMYK value differ from my design software?
CMYK conversion depends on the color profile used. This tool uses a standard mathematical conversion, which may differ slightly from print-calibrated software such as Adobe InDesign.
When should I use HSL instead of HEX?
HSL (Hue, Saturation, Lightness) is more intuitive for creating color variations — increase or decrease the lightness value to get lighter or darker shades of the same hue.
About the Color Converter
Our free color converter instantly converts colour values between HEX, RGB, HSL, HSB/HSV, and CMYK colour formats. Enter a colour in any format and all other representations update in real time. A live colour preview shows exactly what the colour looks like. This tool is essential for web designers, graphic designers, developers, and anyone working with digital or print colour workflows.
Different colour systems are used in different contexts. Web and app development primarily uses HEX and RGB. Design software like Adobe Photoshop and Illustrator use HSB. Print design uses CMYK. Understanding and converting between these systems is a daily task for designers working across digital and print media.
Colour Formats Explained
- HEX — A 6-digit hexadecimal code used in HTML and CSS (e.g.
#FF5733). The first two digits represent red, the next two green, the last two blue. Values range from 00 to FF (0–255 in decimal). - RGB — Red, Green, Blue values each from 0 to 255 (e.g.
rgb(255, 87, 51)). Used in CSS and most image editing software. The three channels mix to create the full colour spectrum. - HSL — Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Used in CSS3. More intuitive for designers because adjusting lightness and saturation independently is straightforward.
- HSB / HSV — Hue, Saturation, Brightness (Value). Used in Photoshop and Illustrator colour pickers. Similar to HSL but the "B" represents brightness differently, giving more natural-feeling results for many design tasks.
- CMYK — Cyan, Magenta, Yellow, Black (Key). Used in professional print design. Represents how ink colours mix on paper. Note: screen-to-print colour conversion is an approximation because RGB is additive (light) and CMYK is subtractive (ink).
How to Use the Color Converter
- Enter a colour value — Type or paste a colour in any format: HEX code, RGB values, or pick using the colour picker.
- See all formats — All equivalent colour representations update instantly in every format.
- Preview the colour — A colour swatch shows the exact colour in real time.
- Copy any format — Click the copy button next to any format to copy it to your clipboard.
Frequently Asked Questions
Why does the CMYK conversion look different on screen?
RGB (screen) and CMYK (print) have different colour gamuts — the range of colours they can represent. Some bright RGB colours cannot be accurately reproduced in CMYK. The conversion gives the closest CMYK equivalent, but printed results may differ from the screen preview.
What is the difference between HSL and HSB?
Both use Hue and Saturation, but differ in the third channel. HSL uses Lightness (50% = full colour, 100% = white). HSB uses Brightness (100% = full colour, 0% = black). Photoshop uses HSB; CSS uses HSL.
Can I enter a CSS colour name (like "red" or "cornflowerblue")?
Not directly in the text fields, but you can use the colour picker to select any colour visually and then read the equivalent HEX, RGB, and other values.