The prismatic world of CSS colours

By Chen Hui Jing / @hj_chen

I wrote a thing last year.

16 of CSS’s named colors come from HTML originally: aqua, black, blue, fuschia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Most of the rest come from one version of the X11 color system, used in Unix-derived systems to specify colors for the console.

You should read this thing by a professional instead.

Whiteness and all grey Colours between white and black, may be compounded of Colours, and the whiteness of the Sun’s Light is compounded of all the primary Colours mix’d in a due Proportion.
–Sir Issac Newton, Opticks (Prop. V Theor. IV.)

Colour

Perceived according to the wavelength of the light which strikes the eye

Trichromat spectral sensitivity

General diagram, individual profiles will vary

Colour space

The resultant set of colours when a colour model is associated with a precise description of how components are to be interpreted

Concept seems to have been developed by Hermann Grassmann

Grassmann published his theory of how colours mix in 1853

Colour can be represented as a convex cone in the 3D linear space

Colour Gamut

The portion of the colour space that can be represented or reproduced

Generally specified on the hue-saturation plane

When a colour cannot be expressed within a particular colour model, it is out of gamut

As of now, a device that can reproduce the entire visible colour space remains an unrealised goal within the engineering of colour displays and printing processes

💡 English translation of Theorie der Pigmente von grösster Leuchtkraft by Erwin Schrödinger

Chromaticity

An objective specification of the quality of a colour regardless of its luminance

Consists of two independent parameters, often specified as hue (h) and colourfulness (s)

Allows for representation via polar coordinates with respect to a white point of a display

Light is either

or

📺 Segue 📺

We interrupt this program to bring you this not very important message…

And now back to your regularly scheduled program.

RGB colour model

All light-emitting displays would use an additive colour model like RGB

RGB is device-dependent, thus an RGB value will not define the same colour across devices without some kind of colour management

A colour is expressed by indicating how much of each of the red, green, and blue is included in numerical terms

For computers, component values are stored as integer values ranging from 0 to 255, which is the range an 8-bit byte can offer

Colours in CSS1

color to describe the text colour of an element

background-color to describe the background colour of an element

Colour can either be a keyword or a numerical RGB specification

Hex codes are simply RGB colours in the hexadecimal notation

💡 5.3 Color and background properties

David DeSandro, dotCSS 2018

transparent

Was there from the beginning and is the initial value of background-color

CSS2 allowed its use in border-color

CSS3 allowed its use in all elements that accepted a colour value

Computes to rgba(0, 0, 0, 0)

The sRGB colour space

sRGB (standard Red Green Blue) is an RGB color space created by HP and Microsoft for monitors, printers and the Web

Colours in CSS were first specified in RGB

Even though there were better systems, RGB was “good enough” at the time

💡 Original document: A Standard Default Color Space for the Internet - sRGB

Colour Naming System (CNS)

A systematic notation for named colours for computer applications using English terms created by Berk, Brownston and Kaufman in 1982

Uses ten colour names: red, orange, brown, yellow, green, blue, purple, white, grey and black

Base colour names can be combined or prefixed with modifiers

5 lightness terms, 4 saturation terms and 31 hue terms combine to produce 620 chromatic colour names

Not meant for computation, rather, a mechanism for naming colour literals and constants

CNS expressed in Backus-Naur form

named-color     := gray-color | chromatic-color

gray-color      := 'black' | 'white' | lightness gray
gray            := 'gray' | 'grey'

chromatic-color := [ tint | shade ] hue | [ lightness || saturation ]? hue
tint            := 'whitish' | 'pale' | 'brilliant' | 'vivid'
shade           := 'blackish' | 'dim' | 'deep' | 'vivid'
saturation      := 'grayish' | 'moderate' | 'strong' | 'vivid'
lightness       := 'moderate' | 'very'? [ 'dark' | 'light' ]
hue             := splash-color? base-color | base-color '-' base-color
base-color      := 'red' | 'orange' | 'brown' | 'yellow' | 'green' | 'blue' | 'purple'
splash-color    := 'reddish' | 'orangish' | 'brownish' | 'yellowish' | 'greenish' | 'bluish' | 'purplish'

Named colours

Based on the X11 colours

Supported in Mosaic and Netscape Navigator because both ran in X Windows System

Chris Lilley lost the fight to use names from the Colour Naming System (CNS)

The path of least resistance was chosen ¯\_(ツ)_/¯

Colour wheels

An abstract illustrative organisation of colour hues around a circle to show the relationships between them

When the eye sees a colour it is immediately excited and it is its nature, spontaneously and of necessity, at once to produce another, which with the original colour, comprehends the whole chromatic scale.
Johann Wolfgang von Goethe, Theory of Colours, Part VI, Completeness and Harmony

Munsell colour system

Created by Professor Albert H. Munsell

A colour space that specifies colours based on three properties of colour: hue, chroma and value

The first system which separated hue, value and chroma into perceptually uniform and independent dimensions

Munsell was the first person to illustrate colours systematically in three-dimensional space

CIELAB colour space

Defined by the International Commission on Illumination (CIE) in 1976

Also known as LAB, for lightness, green/red and blue/yellow respectively

CIELAB gamut includes both the gamuts for RGB and CMYK

Meant to approximate human vision and aspires to perceptual uniformity

Needed more data per pixel to obtain the same precision as RGB or CMYK

HSL colours

An alternative representation of the RGB colour model, utilising a cylindrical geometry, hue being the angular dimension, saturation along the radial direction and lightness from top to bottom

Based on the organisation and conceptualisation of colours in human vision

Conversion from RGB was fast enough to run in real time on 1970s hardware

HSL was added to CSS in 2002 from the desire to have some sort of hue wheel system

Fast forward to today, its disadvantages (non-perceptual uniformity being a key one) are flaring their head

Hue is unitless as degrees is implicit, Saturation and Lightness are in percentages

Sass colour functions

Lets you perform arithmetic operations on colour values on each colour component separately

4 groups of colour functions: RGB, HSL, Opacity and Other

Extract or manipulate RGB/HSL values from hex codes or write your own conversion functions

Play around with the alpha component with opacity functions

Additional colour manipulation functions for mixing colours, adjust-color, change-color, scale-color

Moar colour formats

HWB colours (hue, whiteness, blackness)

Lab colours (lightness, green/red (a-axis), blue/yellow (b-axis))

LCH colours (lightness, chroma, hue)

gray() function

💡 CSS Color Module Level 4

Badly-drawn visualisations

You should also read these things by other professionals.

LCH colors in CSS: what, why, and how? by Lea Verou

Calculating Color: Dynamic Color Theming with Pure CSS by Una Kravets

Moar colour functions

mix-color(peru lightgoldenrod 40%)

color-contrast(purple, chartreuse, firebrick, ghostwhite)
      /* ghostwhite wins with a ratio of 8.9 */

color-adjust(darkslategrey lightness(-20%));

💡 CSS Color Module Level 5

Bunch of resources on colour…

• Complete Text of Opticks
• Experiments show hummingbirds see colors you’ve never dreamed of
• Ask an expert: Why is CSS…the way it is?
• “Tomato” versus “#FF6347”—the tragicomic history of CSS color names
• Where did CSS named colours come from?
• What is the color of a blank page?
• Complete Text of Goethe's Theory of Colours
• The CNS Color Naming System
• The Chroma Zone: Engineering Color on the Web
• LCH colors in CSS: what, why, and how?

Thank you

https://chenhuijing.com

@hj_chen

@hj_chen

@huijing

Font is Alice by Ksenia Erulevich.