Color Formats Explained: HEX, RGB, HSL, HSV, and CMYK

Color formats define how colors are represented in digital systems. The five most common formats are HEX, RGB, HSL, HSV (also called HSB), and CMYK. Each serves different purposes: RGB and HEX dominate web development, HSL and HSV help designers adjust colors intuitively, and CMYK is essential for print.

This guide explains how each format works, provides conversion formulas with examples, and helps you choose the right format for your project.

Quick Reference: When to Use Each Format

HEX Color Codes

HEX (hexadecimal) is a six-character code that represents colors using base-16 notation. The format is #RRGGBB, where each pair represents red, green, and blue intensity from 00 to FF (0 to 255 in decimal).

How HEX Works

Each pair of characters encodes one color channel:

• First pair (RR): Red intensity
• Second pair (GG): Green intensity
• Third pair (BB): Blue intensity

The characters 0-9 and A-F represent values 0-15. Two characters together give 16 × 16 = 256 possible values per channel.

HEX Examples

Shorthand HEX

When each pair has identical digits, you can use three-character shorthand:

• #FF0000 → #F00
• #00FF00 → #0F0
• #336699 → #369

Converting HEX to Decimal

To convert a HEX pair to decimal, multiply the first digit by 16 and add the second:

• FF = (15 × 16) + 15 = 255
• 33 = (3 × 16) + 3 = 51
• A0 = (10 × 16) + 0 = 160

RGB Color Model

RGB (Red, Green, Blue) is an additive color model where colors are created by combining light. Each channel ranges from 0 to 255, giving 16.7 million possible colors (256³).

How RGB Works

RGB is called "additive" because adding colors together creates lighter colors:

• Red + Green = Yellow
• Red + Blue = Magenta
• Green + Blue = Cyan
• Red + Green + Blue = White
• No light (0, 0, 0) = Black

This matches how screens work: they emit red, green, and blue light that combines in your eyes.

RGB Syntax in CSS

/* Standard RGB */
color: rgb(255, 87, 51);

/* RGB with alpha (transparency) */
color: rgba(255, 87, 51, 0.5);

/* Modern CSS (alpha as percentage) */
color: rgb(255 87 51 / 50%);

Converting HEX to RGB

To convert HEX to RGB, convert each pair from base-16 to base-10:

Example: #FF5733 to RGB

• FF (hex) = 255 (decimal) → Red
• 57 (hex) = 87 (decimal) → Green
• 33 (hex) = 51 (decimal) → Blue
• Result: rgb(255, 87, 51)

Converting RGB to HEX

To convert RGB to HEX, convert each decimal value to two-digit hexadecimal:

Example: rgb(255, 87, 51) to HEX

• 255 = FF
• 87 = 57
• 51 = 33
• Result: #FF5733

HSL Color Model

HSL (Hue, Saturation, Lightness) represents colors in a way that matches human perception. Instead of mixing primary colors, you specify the color type, its intensity, and brightness.

HSL Components

Hue (0-360°): The color's position on the color wheel

• 0° / 360° = Red
• 60° = Yellow
• 120° = Green
• 180° = Cyan
• 240° = Blue
• 300° = Magenta

Saturation (0-100%): Color intensity

• 0% = Gray (no color)
• 100% = Full color

Lightness (0-100%): Brightness level

• 0% = Black
• 50% = Pure color
• 100% = White

Why Designers Prefer HSL

HSL makes color adjustments intuitive:

• Darken a color: Decrease lightness
• Lighten a color: Increase lightness
• Make it more vivid: Increase saturation
• Make it muted: Decrease saturation
• Find complementary color: Add 180° to hue

In RGB, these adjustments require changing multiple values in non-obvious ways.

HSL Syntax in CSS

/* Standard HSL */
color: hsl(14, 100%, 60%);

/* HSL with alpha */
color: hsla(14, 100%, 60%, 0.5);

/* Modern CSS */
color: hsl(14 100% 60% / 50%);

Converting RGB to HSL

The conversion formula:

1. Normalize RGB values to 0-1 range (divide by 255)
2. Find the maximum and minimum values
3. Calculate lightness: L = (max + min) / 2
4. Calculate saturation:
   • If max = min: S = 0
   • If L ≤ 0.5: S = (max - min) / (max + min)
   • If L > 0.5: S = (max - min) / (2 - max - min)
5. Calculate hue based on which channel is maximum

Example: rgb(255, 87, 51) to HSL

• Normalized: R=1.0, G=0.341, B=0.2
• Max=1.0, Min=0.2
• L = (1.0 + 0.2) / 2 = 0.6 = 60%
• S = (1.0 - 0.2) / (2 - 1.0 - 0.2) = 1.0 = 100%
• H = 14°
• Result: hsl(14, 100%, 60%)

HSV/HSB Color Model

HSV (Hue, Saturation, Value) is similar to HSL but measures brightness differently. HSV is also called HSB (Hue, Saturation, Brightness). It's the default color model in Photoshop, Figma, and most design software.

HSV vs HSL: Key Difference

The main difference is how they handle brightness:

HSL Lightness:

• 0% = Black
• 50% = Pure color
• 100% = White

HSV Value/Brightness:

• 0% = Black
• 100% = Brightest version of that color (not white)

This means:

• HSL hsl(0, 100%, 50%) = Pure red
• HSV hsv(0°, 100%, 100%) = Pure red
• HSL hsl(0, 100%, 100%) = White
• HSV hsv(0°, 0%, 100%) = White

When to Use HSV vs HSL

• Use HSV when working in design software (Photoshop, Figma, Illustrator)
• Use HSL for CSS and web development
• Use HSL when you need to quickly create lighter/darker variants

CMYK Color Model

CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used for printing. Unlike RGB which adds light, CMYK works by subtracting light—inks absorb certain wavelengths and reflect others.

How CMYK Works

On a white page:

• Cyan ink absorbs red light, reflects green and blue
• Magenta ink absorbs green light, reflects red and blue
• Yellow ink absorbs blue light, reflects red and green
• Combining all three creates a muddy brown (not black)
• Black (Key) ink is added for true blacks and to save ink

Why Screens and Printers Show Different Colors

RGB screens emit light; CMYK printers absorb it. This fundamental difference means:

• Some RGB colors can't be printed (especially bright neons)
• Some CMYK colors can't be displayed on screen
• The "color gamut" (range of possible colors) differs

Always convert to CMYK before sending designs to print, and expect some color shift.

Converting RGB to CMYK

The formula (simplified, assumes RGB values are 0-1):

K = 1 - max(R, G, B)
C = (1 - R - K) / (1 - K)
M = (1 - G - K) / (1 - K)
Y = (1 - B - K) / (1 - K)

Example: rgb(255, 87, 51) to CMYK

• Normalized: R=1.0, G=0.341, B=0.2
• K = 1 - 1.0 = 0 = 0%
• C = (1 - 1.0 - 0) / 1 = 0 = 0%
• M = (1 - 0.341 - 0) / 1 = 0.659 = 66%
• Y = (1 - 0.2 - 0) / 1 = 0.8 = 80%
• Result: cmyk(0%, 66%, 80%, 0%)

Common Conversion Examples

Here are some frequently needed color conversions:

Web-Safe Colors

Brand Colors (Examples)

Color Format Comparison

Tools and Practical Applications

Quick Conversions

Use our Color Converter to instantly convert between all formats. Enter any color value and get HEX, RGB, HSL, HSV, and CMYK outputs with one click copy.

Creating Color Palettes

1. Start with a base color in HSL
2. Create variations by adjusting:
   • Lightness for shades and tints
   • Saturation for muted variants
   • Hue ± 30° for analogous colors
   • Hue + 180° for complementary colors

Accessibility Considerations

Color contrast matters for readability. The WCAG 2.1 guidelines require:

• 4.5:1 contrast ratio for normal text
• 3:1 contrast ratio for large text
• 3:1 contrast ratio for UI components

Use luminance (calculated from RGB) to check contrast:

Luminance = 0.299 × R + 0.587 × G + 0.114 × B

FAQ

What is the difference between HEX and RGB?

HEX and RGB represent the same colors differently. HEX uses hexadecimal notation (#FF5733), while RGB uses decimal notation (rgb(255, 87, 51)). They're interchangeable for web development—choose based on preference or code style guidelines.

Why does my printed color look different from my screen?

Screens use RGB (additive light), while printers use CMYK (subtractive ink). The color gamuts don't fully overlap, so some screen colors can't be printed exactly. Always convert to CMYK and do a test print for color-critical work.

What is the best color format for CSS?

HEX and RGB are equally well-supported. Use HSL when you need to programmatically adjust brightness or saturation, as it maps more intuitively to human perception. Modern CSS supports all three.

How do I convert HEX to RGB manually?

Convert each pair of HEX digits to decimal. For example, #FF5733: FF = 255, 57 = 87, 33 = 51, giving rgb(255, 87, 51). Multiply the first digit by 16 and add the second.

What does the alpha channel do?

The alpha channel controls transparency. A value of 1 (or 100% or FF) is fully opaque; 0 is fully transparent. Use rgba(), hsla(), or 8-digit HEX (#RRGGBBAA) to specify alpha.

Why is HSL better for adjusting colors?

HSL separates color (hue) from intensity (saturation) and brightness (lightness). To darken a color, just decrease lightness. In RGB, you'd need to decrease all three channels proportionally—less intuitive.

What's the difference between HSL and HSV?

Both use hue and saturation, but measure brightness differently. HSL's lightness goes from black (0%) through pure color (50%) to white (100%). HSV's value goes from black (0%) to the brightest version of that color (100%), not white.

Can I use CMYK in web development?

No. Browsers don't support CMYK. Convert CMYK values to RGB or HEX for web use. CMYK is only for print design workflows.

What is a color gamut?

A color gamut is the range of colors a device can display or produce. RGB monitors have one gamut, CMYK printers have another. Colors outside a device's gamut can't be accurately reproduced on that device.

How many colors can HEX represent?

HEX can represent 16,777,216 colors (256 × 256 × 256). This is the same as RGB, since HEX is just a different notation for the same values.

What are web-safe colors?

Web-safe colors were a palette of 216 colors that displayed consistently on old 8-bit monitors. They're no longer relevant—modern displays support millions of colors.

How do I find a color's complementary color?

In HSL or HSV, add 180° to the hue. For example, the complement of hsl(60, 100%, 50%) (yellow) is hsl(240, 100%, 50%) (blue).

Why is black called "Key" in CMYK?

"Key" refers to the key plate in printing—the plate that adds detail and contrast. Using "K" also avoids confusion with "B" for blue in RGB.

Can I use HEX colors in Photoshop?

Yes. Photoshop accepts HEX input in its color picker. However, Photoshop's native color model is HSB (same as HSV), so that's what you'll see in the interface.

How do I make a color lighter in CSS?

Use HSL and increase the lightness value. For example, change hsl(200, 80%, 40%) to hsl(200, 80%, 60%) for a lighter shade. Alternatively, use CSS color-mix() or relative color syntax in modern browsers.

Related Tools

• Color Converter — Convert between HEX, RGB, HSL, HSV, and CMYK instantly
• Contrast Checker — Test color combinations for accessibility
• Gradient Generator — Create CSS gradients with color stops
• Color Palette Generator — Generate harmonious color schemes