Color spaces

sRGB

An RGB color model supported in most digital displays. sRGB is the most widely used color space for web browsers.

Examples

sRGB

The sRGB color space is the web default, and supported by most digital displays. HEX format is a base 16 format for RGB.

CSS annotation:

  • rgb(255, 255, 255)
  • rgba(255, 255, 255, 1) with transparency
  • #RRGGBBAA
  • #RRGGBBAA with transparency
rgb(242,99,34)
HSL

HSL is a cylindrical transformation of sRGB color space. Properties are Hue, Saturation, and Lightness.

CSS annotation:

  • hsl(360deg, 100%, 100%)
  • hsla(360deg, 100%, 100%, 1) with transparency
hsl(19deg 89% 55%)
HWB

HWB is a cylindrical transformation of sRGB color space and is closely related to HSV. Properties are Hue, Whiteness, and Blackness.

CSS annotation:

  • hwb(360 100% 100%)
  • hwb(360 100% 100% / 1) with transparency
hwb(19 5% 0%)
HSV

HSV is a cylindrical transformation of sRGB color space. Properties are Hue, Saturation, and Value.

HSV is not available in CSS, but used widely in design tools and color pickers.

hsv(19 95% 95%)

How it affects UI design

RGB color spaces are widely supported in most technologies, and are a safe approach to define colors for UI.

RGB color spaces are not perceptually uniform. Using these to mix tints, shades, or tones can be very difficult and yield unexpected results.

When trying to create perceptually uniform colors, use a color appearance model instead.

Sources:

  1. sRGB. International Color Consortium (ICC). https://www.color.org/chardata/rgb/srgb.xalter
  2. sRGB. Wikipedia. https://en.wikipedia.org/wiki/SRGB