Color Converter: Convert HEX, RGB, HSL & CMYK Colors
Why You Need to Understand Color Formats
Every designer and developer encounters multiple color formats daily. A designer picks a color in Figma and gets a hex code. A CSS developer needs RGB or HSL. A print designer requires CMYK. Understanding how to convert between these formats isn't just useful — it's essential. Without accurate conversion, colors shift unexpectedly between screens and print, brand consistency breaks down, and development time increases. This guide covers every major color format, how they work, and how to convert between them.
Understanding the Four Main Color Formats
HEX (Hexadecimal)
HEX is the most common web color format. It represents colors as a 6-character code using hexadecimal numbers (0-9, A-F). Each pair of characters represents the red, green, and blue channels: #RRGGBB. For example, #FF5733 means red=FF (255), green=57 (87), blue=33 (51). HEX also supports a shorthand 3-character format: #F53 expands to #FF5533. HEX with alpha transparency uses 8 characters: #RRGGBBAA.
RGB (Red, Green, Blue)
RGB describes colors as mixtures of red, green, and blue light, each ranging from 0 to 255. It's the native color model for screens. rgb(255, 87, 51) is the RGB equivalent of #FF5733. CSS also supports rgba() for transparency: rgba(255, 87, 51, 0.8) where the last value is opacity (0-1).
HSL (Hue, Saturation, Lightness)
HSL is often more intuitive for designers because it mirrors how humans perceive color. Hue (0-360°) is the color's position on the wheel. Saturation (0-100%) controls intensity. Lightness (0-100%) controls brightness. hsl(11, 100%, 60%) is the HSL equivalent of #FF5733. HSL is ideal for creating color variations — adjust lightness for lighter/darker shades, saturation for more/less vivid colors.
CMYK (Cyan, Magenta, Yellow, Key/Black)
CMYK is the standard for print. Unlike RGB (additive, for screens), CMYK is subtractive — inks absorb light. Each channel ranges from 0% to 100%. #FF5733 converts to approximately cmyk(0%, 66%, 80%, 0%). Colors in CMYK always look different from RGB because the gamut (range of reproducible colors) is smaller.
Color Conversion Formulas
HEX to RGB
G = parseInt(hex[2:4], 16)
B = parseInt(hex[4:6], 16)
Example: #FF5733 → R=255, G=87, B=51
RGB to HSL
Cmax = max(R', G', B'), Cmin = min(R', G', B')
Δ = Cmax - Cmin
L = (Cmax + Cmin) / 2
S = Δ / (1 - |2L - 1|) if Δ ≠ 0, else 0
H = 60° × (based on which channel is Cmax)
Example: rgb(255, 87, 51) → hsl(11, 100%, 60%)
RGB to CMYK
C = (1 - R/255 - K) / (1 - K)
M = (1 - G/255 - K) / (1 - K)
Y = (1 - B/255 - K) / (1 - K)
Example: rgb(255, 87, 51) → cmyk(0%, 66%, 80%, 0%)
Common Color Conversions Reference Table
| Color | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| Red | #FF0000 | 255, 0, 0 | 0°, 100%, 50% | 0%, 100%, 100%, 0% |
| Green | #00FF00 | 0, 255, 0 | 120°, 100%, 50% | 100%, 0%, 100%, 0% |
| Blue | #0000FF | 0, 0, 255 | 240°, 100%, 50% | 100%, 100%, 0%, 0% |
| Orange | #FFA500 | 255, 165, 0 | 39°, 100%, 50% | 0%, 35%, 100%, 0% |
| Purple | #800080 | 128, 0, 128 | 300°, 100%, 25% | 0%, 100%, 0%, 50% |
| Pink | #FFC0CB | 255, 192, 203 | 350°, 100%, 88% | 0%, 25%, 20%, 0% |
| Black | #000000 | 0, 0, 0 | 0°, 0%, 0% | 0%, 0%, 0%, 100% |
| White | #FFFFFF | 255, 255, 255 | 0°, 0%, 100% | 0%, 0%, 0%, 0% |
When to Use Each Format
- HEX: Web development (CSS, HTML), design tools export, brand guidelines — the universal web color format
- RGB: CSS styling when you need fine control, JavaScript canvas operations, image processing, screen-based applications
- HSL: Creating color variations programmatically, design systems with theme support, any situation where you need to adjust brightness or saturation
- CMYK: Print design, packaging, business cards, any physical media — never use RGB/HEX directly for print
How to Convert Colors Instantly
While understanding the math is valuable, you don't need to calculate conversions by hand. Our free online Color Converter handles all conversions instantly — paste any HEX, RGB, HSL, or CMYK value and get all other formats immediately. It also shows live previews, contrast ratios for accessibility checking, and suggested complementary colors.
Frequently Asked Questions
Not exactly. The CMYK color gamut is smaller than RGB. Vibrant neon colors and some deep blues in RGB cannot be reproduced in CMYK. The converter will find the closest match, but colors may appear duller in print.
They represent the same color model (red, green, blue) but in different notations. HEX uses hexadecimal notation (#FF5733), while RGB uses decimal notation (rgb(255, 87, 51)). They're interchangeable for web use.
HSL makes it easy to generate consistent color scales. To create lighter and darker versions of a color, simply adjust the L (lightness) value while keeping H and S constant. This is much harder with HEX or RGB.
Modern CSS supports all formats directly — #FF5733, rgb(255,87,51), hsl(11,100%,60%) all work. Choose whichever is most readable for your use case. Conversion is mainly needed when moving between design tools, development environments, or print.
Figma supports HEX, RGB, and HSL natively. For web projects, export as HEX. For design systems, HSL is often preferred because it makes creating variants easier. Figma plugins can also export CMYK values for print workflows.