What is Color Converter?
Color Converter translates any color between the five most-used color formats — HEX, RGB, HSL, HSB/HSV, and CMYK — instantly. Enter a color in any format and see all five representations at once.
Different workflows use different formats: design tools export HEX, CSS uses RGB or HSL, and print requires CMYK. Color Converter bridges all of them in one step.
The Five Color Formats
HEX
#RRGGBB — two hex digits per channel. Universal in web design, Figma tokens, and design handoff.
RGB
Red, Green, Blue from 0–255. The CSS rgb() function. Intuitive for screen color mixing.
HSL
Hue (0–360°), Saturation (%), Lightness (%). Best for generating color variations programmatically.
HSB
Hue, Saturation, Brightness. Used in Photoshop's color picker — similar to HSL but with different brightness model.
How to Use Color Converter
Enter your color
Type or paste a color value in any of the five format fields — HEX, RGB, HSL, HSB, or CMYK.
See all formats
All other fields update instantly with the equivalent color representation.
Check the swatch
A color swatch shows the actual color so you can confirm the conversion looks correct.
Copy what you need
Click the copy icon next to the format you want to use in your project.
When to Use Each Format
| Format | Best For |
|---|---|
| HEX | Figma design tokens, HTML attributes, CSS variables |
| RGB | CSS color values, canvas drawing APIs |
| HSL | CSS theming, dynamically lightening/darkening colors |
| HSB | Photoshop color picker, creative tools |
| CMYK | Print design, PDF export, physical print production |
Tips & Common Mistakes
HSL is the most powerful format for theming. You can create a full tint/shade scale by keeping the same Hue and Saturation and varying only Lightness.
CMYK conversions are approximations. RGB and CMYK have different color gamuts — some RGB colors (especially very saturated ones) cannot be perfectly reproduced in CMYK print. The conversion gives the closest printable equivalent.
Related Tools
- Color Picker — visually select any color
- Color Palette Generator — generate harmonious palettes
- Contrast Checker — verify WCAG accessibility ratios