Appearance
Implementing Color for Digital Screens
Web Color Modes
Colours on digital screens are additive, meaning they are created by mixing variations of red, green, and blue light.
RGB and RGBA
Defines colour through numerical values (0–255) for red, green, and blue; the alpha channel (A) controls opacity.
Hexadecimal
The most common notation on the web, mapping RGB values as #RRGGBB.
HSL and HSLA
Standing for Hue, Saturation, and Lightness, this is often considered the most intuitive mode for developers as it allows for easy adjustments to tints and shades by simply changing percentage values.
CIE Lab and LCH
Newer, device-independent colour spaces that align with the full range of human vision and provide access to a wider gamut of colours than standard RGB. Read more about these new color spaces in Smashing Magazine article "A Guide to Modern CSS Colors".
Accessibility Considerations
Ensuring colour accessibility is a legal requirement in many regions and vital for a good user experience.
Contrast Testing
Background and foreground colour combinations must be tested for contrast to ensure text and UI components remain readable for users with visual impairments. Tools like the WebAIM contrast checker can validate if a design passes WCAG guidelines.
Contextual Cues
Color should never be the only indicator of status or severity. Because users perceive colour differently, critical information (like error messages) should always be accompanied by icons or text labels to provide extra context.
Color Discrepancies on Screens
It is important to remember that colours will not look identical on every device. Variations in screen resolution, bit depth, and display settings can cause colours to look washed out or drastically different between monitors. Developers should test their designs on lower-end monitors or different display profiles to ensure that critical interactive elements remain visible and functional across various hardware.