Color Converter
Convert colors between HEX, RGB, HSL, HSB, CMYK and CSS names instantly.
Color Converter Features
Instant color conversion between all major formats.
Convert between HEX, RGB, HSL, HSB/HSV, CMYK, and CSS named colors all at once.
Copy any color value to your clipboard instantly with the copy button.
All conversion happens in your browser. No data is sent anywhere.
Key Takeaways
- Enter one source color and the tool instantly shows six formats at once - HEX, RGB, HSL, HSB/HSV, CMYK, and a CSS named color - with no convert button needed, since conversion is live as you type or drag.
- Conversion runs in your browser and only fires for a full 6-digit HEX code, so a 3-digit shorthand like #f80 will not update the fields - type all six digits such as #ff8800.
- Pick the output by use case: HEX or RGB for websites, HSL to lighten or darken a shade while keeping the hue fixed, and HSB/HSV for Figma, Photoshop, and GIMP color pickers.
- CMYK here is a direct mathematical conversion, not a profiled one, so treat it as a starting point and verify against your printer color profile before production.
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.
Why Convert Between Color Formats?
Different tools and workflows use different color formats. Web developers use HEX and RGB for CSS. Print designers use CMYK. Designers in tools like Figma or Sketch work with HSL or HSB. Our color converter instantly shows all formats so you can use your color anywhere.
Frequently Asked Questions
What is a HEX color code?
A HEX color is a 6-digit hexadecimal number prefixed with # (e.g. #3b82f6). Each pair of digits represents the red, green, and blue channels from 00 (0) to FF (255).
HEX codes are the most common color format used in web development and CSS.
They are compact and human-readable once you learn to recognise common values like #ffffff (white) and #000000 (black).
What is RGB?
RGB (Red, Green, Blue) represents colors by specifying the intensity of red, green, and blue channels as integers from 0 to 255.
For example, rgb(59, 130, 246) is the same blue as #3b82f6.
RGB is widely used in CSS and digital design. It is the native color model of computer screens.
What is HSL?
HSL (Hue, Saturation, Lightness) describes colors in terms of hue angle (0-360), saturation percentage (0-100%), and lightness percentage (0-100%).
HSL is intuitive for designers because adjusting saturation or lightness is straightforward.
CSS natively supports HSL colors with hsl() and hsla() functions.
What is CMYK used for?
CMYK (Cyan, Magenta, Yellow, Black) is the color model used in printing. Printers mix these four inks to produce colors on paper.
Web colors (RGB/HEX) cannot be directly used for print without conversion.
Use our converter to get the CMYK equivalent when preparing designs for print.
What is HSB/HSV?
HSB (also called HSV - Hue, Saturation, Value) is similar to HSL but uses brightness/value instead of lightness.
Photoshop, GIMP, and many design tools use HSB as their primary color model.
At maximum saturation and brightness (100%, 100%), HSB produces fully saturated colors, while HSL at 50% lightness produces the same.
What are CSS named colors?
CSS defines 140+ named colors that can be used directly in stylesheets, like 'red', 'navy', 'cornflowerblue', and 'tomato'.
If your selected color exactly matches one of these named colors, our converter will show the name.
Named colors are convenient for common colors and are supported by all browsers.
Is the conversion accurate?
Yes. The conversions use standard color science formulas and produce industry-standard values.
HEX ↔ RGB conversion is lossless (exact). HSL, HSB, and CMYK values are rounded to whole numbers for readability.
For printing, remember that screen colors (RGB) may look slightly different when printed in CMYK due to gamut differences.
How do I use this in CSS?
Copy the HEX value for the most concise form: color: #3b82f6;
Or use RGB with opacity: color: rgba(59, 130, 246, 0.8);
Or use HSL which makes lightness adjustments easy: color: hsl(217, 91%, 60%);
Sources and References
Format and tool details on this page are based on the official specifications and documentation below.
- CSS color values- MDN Web Docs
- CSS Color Module- W3C