How to Convert a Color to Every Format
Set Your Source Color
Click the color picker to choose a color visually, or type a 6-digit HEX code such as 3b82f6 into the HEX field. The tool prepends the # for you and accepts both upper and lower case digits.
Read All Six Outputs at Once
As soon as a valid color is set, the swatch and every field update together: HEX, RGB, HSL, HSB/HSV, CMYK, and the matching CSS named color if one exists. There is no convert button - the conversion is live as you type or drag.
Copy the Format You Need
Click the copy button beside any field to send that exact string to your clipboard. The RGB, HSL, HSB, and CMYK fields are already wrapped in valid function syntax like rgb(59, 130, 246), so you can paste straight into CSS or a design tool.
Color Formats This Tool Produces
One source color is converted into six representations at the same time. Use this table to decide which output to copy for your workflow.
| Format | Example output | Best for | Notes |
|---|---|---|---|
| HEX | #3b82f6 | CSS and web markup | Most compact web format; exact and lossless against RGB. |
| RGB | rgb(59, 130, 246) | Screens and CSS | Channels 0-255; the native model of displays. |
| HSL | hsl(217, 91%, 60%) | CSS tweaks | Adjust lightness or saturation without touching hue. |
| HSB/HSV | hsb(217, 76%, 96%) | Figma, Photoshop | Brightness model used by most image editors. |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Print design | Math conversion only; final print color depends on the profile. |
| CSS name | cornflowerblue | Readable stylesheets | Shown only when the color exactly matches one of 140+ CSS names. |
Which Output Should You Copy?
Building a Website
Copy the HEX value for the shortest, most widely recognized CSS form. Reach for RGB when you need a separate alpha channel via rgba().
Fine-Tuning a Shade
Use HSL. Keeping the hue fixed and nudging the lightness or saturation percentages gives you predictable lighter or darker variants of the same color.
Working in a Design App
Copy HSB/HSV. Figma, Photoshop, and GIMP expose brightness rather than lightness, so HSB maps directly to their color pickers.
Preparing for Print
Copy the CMYK values as a starting point, then confirm against your printer color profile. Screen-to-print conversion shifts because of gamut differences.
Common Problems and Fixes
The fields do not update
The live update only fires for a full 6-digit HEX code. A 3-digit shorthand like #f80 in the input will not trigger conversion, and an invalid HEX shows an error on blur. Type all six digits, for example #ff8800.
The CSS name shows a dash
A dash means your color does not match any of the 140+ CSS named colors exactly. Named output appears only on an exact match, so any custom shade between the standard names will display a dash.
The copy button did nothing
Copy uses the browser clipboard API, which needs a secure context. Make sure you are on the https page and your browser has clipboard permission. Empty fields and dash values are intentionally skipped.
The printed color looks different from the screen
CMYK here is a direct mathematical conversion from RGB, not a profiled one. Vivid screen colors often fall outside the printable CMYK gamut, so verify with your print shop or a color-managed tool before production.