Color Experiments

3-minute read

This is a snapshot of some ongoing colour R&D, mostly for the chart-svg library. The development repo can be found at GitHub - tonyday567/color-adjust. The readme.org there is runnable and contains the code used to create the examples below.

oklch

A new color space model, oklab, has been introduced to the CSS standards.

The basic idea is that this color space is ok with respect to human perception of graduated changes in colour. The LCH version of oklab consists of three element:

  • lightness, from 0 (black) to 1 (white)
  • chromacity, from 0 (grey) to a point at which the colour goes out of RGB gamut (it varies but typically 0.25 to 0.33)
  • hue, from 0 to 360, representing colour as a rainbow circle in degrees.

LCHA

Adding in an alpha channel, which is a graduated model of colour opacity, we create a 4 element type, LCHA:

Channel Range Description
l [0, 1] Lightness
c [0, 0.322]≈ Chroma
h [0, 360) Hue
a [0, 1] Alpha

We take some colours from the chart-svg palette and convert them to LCHA:


[Colour 0.02 0.73 0.80 1.00,Colour 0.02 0.29 0.48 1.00,Colour 0.66 0.07 0.55 1.00,Colour 0.96 0.60 0.92 1.00]

> > > LCHA 0.720 0.123 207 1.000
LCHA 0.400 0.100 246 1.000
LCHA 0.500 0.210 338 1.000
LCHA 0.800 0.150 331 1.000

Decomposition

The swatches below decompose these colours into LCH components, by setting each component to constant values:

original
zero chroma
constant lightness
constant lightness & chroma
constant lightness and hue

Mapping LCHA

The chart below plots these 4 colours versus a 2-D slice of the oklab space (a 3-D one) with constant lightness.

Note that the light blue color (LCHA 0.720 0.123 207 1.000) is well outside the gamut for the wheel lightness chosen. This is a common occurence and the shape of the chroma range varies considerably with both hue and lightness.

view lcha2colour' (LCHA 0.6 0.123 207 1.000)

Colour -0.50 0.58 0.65 1.00

Clipping this result to 0 results in significant hue shift.

Compare the shape of gamuts for lightnesses of 0.3 and 0.7

lightness=0.3

lightness=0.7

Gradient Charts

Mixing of colours resulting in the interpolated colour being out of gamut is the major drawwback of the oklch space. Otherwise, the mixing of colours is quite pleasing from this human’s perspective:

c = Colour 0.72 0.34 0.04 1
ok = view (re lcha2colour') c
print c
prettyLCHA ok


> Colour 0.72 0.34 0.04 1.00
LCHA 0.566 0.146 50 1.000

fade to white (LCH 0 0 50 1)

fade to grey (LCH 0.566 0 50 1)

fade to hue=0 (LCH 0.566 0.146 0 1)

lightness 0 to 1

The red drift is due to being out of gamut.

chroma 0 to 0.25

hue 0 to 360

Whatever the relative success of oklab in providing pleasing human perceptions of consistent colour change, inclusion in the CSS standards are likely to provide a leg up to its usage going forward.

palette1 Testing

Full palette1 mapping for chart-svg.

x1 =[LCHA 0.72 0.123 207 1, LCHA 0.40 0.10 246 1, LCHA 0.50 0.21 338 1, LCHA 0.8 0.15 331 1, LCHA 0.83 0.14 69 1, LCHA 0.57 0.15 50 1, LCHA 0.38 0.085 128 1, LCHA 0.60 0.08 104 1] :: [LCHA]
cs = trimColour <$> view lcha2colour' <$> x1
csu = view lcha2colour' <$> x1
print csu
original
greyed
lightness 0.5
l=0.5, chroma=0.15
l=0.75, hue=20

Line chart

paletteR Testing

paletteR provides random colours, without being too dark or light to use in a chart.

cs = (\x -> paletteR !! x) <$> ([0..7] :: [Int])
print cs

References