Color is fundamental to design and development, yet color spaces are a persistent source of confusion. Why does the same orange look different in Photoshop and a browser? Why does a CSS gradient look muddy? Understanding the mathematical models behind colors — RGB, HEX, HSL, and HSV — unlocks the ability to work with color predictably and programmatically.

RGB: The Display Standard

RGB (Red, Green, Blue) is the additive color model used by all digital displays. Each channel is an integer from 0–255 (8 bits), giving 256³ = 16.7 million possible colors. rgb(255,0,0) is pure red; rgb(0,0,0) is black; rgb(255,255,255) is white. RGB maps directly to hardware — each value controls the intensity of a physical subpixel. This makes RGB fundamental but not intuitive for human designers.

HEX: RGB in Hexadecimal

HEX colors are simply RGB encoded in base-16. #FF0000 is rgb(255,0,0) — FF in hex equals 255 for red, 00 for green, 00 for blue. HEX is universal in web development because it is compact and widely recognized. The shorthand form #RGB works when each channel's two hex digits are identical — #F00 equals #FF0000. HEX and RGB are mathematically identical; only the notation differs.

HSL: The Designer's Model

HSL (Hue, Saturation, Lightness) organizes colors as humans naturally think about them. Hue is the base color on the color wheel (0–360°: 0=red, 120=green, 240=blue). Saturation runs from gray (0%) to full color (100%). Lightness goes from black (0%) to white (100%), with full color at 50%. HSL is invaluable for programmatic color manipulation — creating darker or lighter brand color variants is as simple as adjusting the L value.

HSV/HSB: Photoshop's Model

HSV (Hue, Saturation, Value) — also called HSB (Hue, Saturation, Brightness) — defines brightness differently from HSL. In HSV, Value 100% with Saturation 0% gives white, while HSL Lightness 100% always gives white regardless of saturation. Photoshop and most professional design tools use HSV. CSS uses HSL. Understanding this difference explains why colors can look different when copied between Photoshop and code.

OKLCH: The Future

CSS Color Level 4 introduces perceptually uniform color spaces like OKLCH. Unlike RGB and HSL where equal numerical differences do not correspond to equal perceived differences, OKLCH interprets colors as human vision perceives them. Two colors with the same OKLCH chroma look equally vivid regardless of hue, making it ideal for generating accessible color palettes with guaranteed perceptual consistency.

Conclusion

Color spaces are not interchangeable labels — they are different mathematical models optimized for different uses. RGB/HEX for hardware and code, HSL for intuitive CSS manipulation, HSV for design tools, OKLCH for perceptual accuracy. CanvasConvert Pro's Color Converter translates instantly between all formats directly in your browser.