Color is everywhere in web development and design -but dealing with multiple color formats is a constant source of confusion. A designer sends you a color in HEX, your CSS framework uses HSL, your print vendor needs CMYK, and your image editor shows HSV. Understanding what each format means, how they relate to each other, and when to use which one is essential knowledge for any developer or designer. This guide explains every major color format clearly with practical examples.
HEX -The Web Standard
HEX (hexadecimal) color codes are the most common format in web development. A HEX code like `#3B82F6` consists of three pairs of hexadecimal digits representing the Red, Green, and Blue channels of the color. Each pair ranges from `00` (0 in decimal, minimum intensity) to `FF` (255 in decimal, maximum intensity). So `#3B82F6` means Red = 59, Green = 130, Blue = 246. A shorthand three-character form exists for colors where both digits in each pair are the same -`#FFF` is equivalent to `#FFFFFF`. HEX is compact, universally supported in CSS and HTML, and the default format in design tools like Figma and Sketch.
RGB -The Screen Native Format
RGB (Red, Green, Blue) is the native color model for digital screens. Every pixel on your monitor is made up of tiny red, green, and blue light sources. CSS supports RGB with the syntax `rgb(59, 130, 246)` where each value ranges from 0 to 255. The modern CSS `rgba()` function adds a fourth alpha channel for transparency: `rgba(59, 130, 246, 0.5)` is the same color at 50% opacity. CSS Color Level 4 also introduced the `rgb()` function with slash notation for alpha: `rgb(59 130 246 / 50%)`. RGB and HEX represent the same color model -HEX is simply RGB written in hexadecimal.
HEX and RGB represent exactly the same color model. Use HEX for static colors in CSS. Use RGB or RGBA when you need to add transparency or manipulate color values with JavaScript.
HSL -The Developer-Friendly Format
HSL (Hue, Saturation, Lightness) was designed to be more intuitive for humans to work with than RGB or HEX. Hue is the color angle on a color wheel from 0 to 360 degrees -0 and 360 are red, 120 is green, 240 is blue. Saturation is the intensity or purity of the color from 0% (gray) to 100% (full color). Lightness is the brightness from 0% (black) to 100% (white). CSS syntax: `hsl(217, 91%, 60%)`. HSL shines in programmatic color manipulation. To make a color lighter just increase the Lightness value. To create a color scale just adjust Lightness in steps. This is why utility CSS frameworks like Tailwind CSS define their color palettes using HSL.
HSV / HSB -The Designer Format
HSV (Hue, Saturation, Value) is also called HSB (Hue, Saturation, Brightness). It is similar to HSL but uses Value/Brightness instead of Lightness. The key difference is in how fully saturated colors are represented. In HSL a fully saturated color at 50% Lightness is the pure hue. In HSV a fully saturated color at 100% Value is the pure hue. HSV tends to produce more visually predictable results when adjusting brightness, which is why it is the default model in color picker interfaces in Photoshop, Illustrator, Figma, and most design tools. CSS does not support HSV natively.
CMYK -The Print Format
CMYK (Cyan, Magenta, Yellow, Key/Black) is the standard color model for printing. Unlike RGB which is additive (mixing lights), CMYK is subtractive (mixing inks on white paper). Each value represents how much of that ink is applied from 0% to 100%. The K channel (black) exists separately because mixing Cyan, Magenta, and Yellow at 100% produces a muddy dark brown rather than true black. CSS does not support CMYK -it is exclusively a print format. When preparing designs for professional printing always convert your colors to CMYK and expect some color shift from what you see on screen because monitors and printers handle color very differently.
Colors look different in print than on screen. Always do a physical print proof before finalizing colors for printed materials -CMYK conversion alone does not guarantee accurate printed results.
Which Format Should You Use?
- Web development -use HEX for static colors in CSS. It is compact and universally understood.
- CSS color manipulation -use HSL. Adjusting lightness, creating hover states, and building color scales are all much easier in HSL than RGB or HEX.
- CSS transparency -use RGB with rgba() or HSL with hsla() when you need alpha channel control.
- Design tools -most tools use HSV/HSB internally but export in HEX or RGB.
- Print design -always convert to CMYK and verify with your print vendor.
- JavaScript color math -use HSL for manipulation, convert to RGB/HEX for output.