colours

Build Colors from Colors with CSS Relative Color Syntax

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

…

The feature here is that you can take a color you already have and manipulate its components. Which things you can change vary by the color space you choose, so for an RGB color you can change the red, green, blue, and alpha channels, for an HSL color you can change hue, saturation, lightness, and alpha, and for my beloved OKLCH you can change lightness, chroma, hue, and yes, opacity.

The syntax if you wanted to use this and not change anything about the color is:
oklch(from var(--color) l c h / 1)
But of course you can change each component, either swapping them entirely as with this which sets the lightness to 20%:
oklch(from var(--color) 20% c h / 1)
…
Caleb Hearth

This is really something. I was aware that new colour functions were coming to CSS but kinda dropped the ball and didn’t notice that oklch(...) is, for the most part, usable in any modern browser. That’s a huge deal!

The OKLCH colour model makes more sense than RGB, covers a wider spectrum than HSL, and – on screens that support it – describes a (much) larger spectrum, providing access to a wider array of colours (with sensible fallbacks where they’re not supported). But more than that, the oklch(...) function provides good colour adaptation.

If you’ve ever used e.g. Sass’s darken(...) function and been disappointed when it seems to have a bigger impact on some colours than others… that’s because simple mathematical colour models don’t accurately reflect the complexities of human vision: some colours just look brighter, to us, thanks quirks of biochemistry, psychology, and evolution!

This colour vision curve feels to me a little like how pianos aren’t always tuned to equal-temper – i.e. how the maths of harmonics says that should be – but are instead tuned so that the lowest notes are tuned slightly flat and the highest notes slightly sharp to compensate for inharmonicity resulting from the varying stiffness of the strings. This means that their taut length alone doesn’t dictate what note humans think they hear: my understanding is that at these extremes, the difference in the way the wave propagates within the string results in an inharmonic overtone that makes these notes sound out-of-tune with the rest of the instrument unless compensated for with careful off-tuning! Humans experience something other than what the simple maths predicts, and so we compensate for it! (The quirk isn’t unique to the piano, but it’s most-obvious in plucked or struck strings, rather than in bowed strings, and for instruments with a wide range, of which a piano is of course both!)

OKLCH is like that. And with it as a model (and a quick calc(...) function), you can tell your CSS “make this colour 20% lighter” and get something that, for most humans, will actually look “20% lighter”, regardless of the initial hue. That’s cool.

I spent way too long playing with this colour picker while I understood this concept. And now I want to use it everywhere!

A History of Automobiles and Colour before the Age of Chromophobia

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

There is a distinct lack of coloration in today’s automobiles, with the majority seemingly finished in a shade that could be found on a greyscale chart. Things are no better in the interior; nearly always black, beige or grey, colours that architectural and couture designers refer to as neutrals. To make matters worse, these shades are all too often matched to the exterior pigment (i.e. black with black, silver with grey) to create insidious and mind-numbing monochrome vehicles that appear to have simply been dipped whole into a large vat of colourant.

1937 Delahaye 135, ivory and navy blue with dark red leather

Things were not always this gloomy. From the dawn of motoring through the 1920s, cars were painted in a full spectrum of colours, often in vivid combinations. The world’s first motor vehicle, the 1886 Benz Patent-Motorwagen was green, with its fully-exposed engine finished in bright red. At the Villa d’Este or Pebble Beach Concours d’Elegance one sees a veritable riot of colour that would likely be a bit shocking to today’s consumers: black with orange, yellow with orange, dark and light blue, dark and light green, red with blue, maroon with red; the palette was limitless.

…

James Kraus (Auto Universum)

I’m not even remotely “into” cars but I loved this article… and I do think that it’s a bit of a shame that cars don’t exhibit the variety of colour that they used to, any longer. As a kid, I remember that the old chap who lived on the other side of our street kept a remarkably old-fashioned but regal looking car (I’ve no idea what it was: I was only very young) in racing green with maroon trim and leather, and chrome window frames. I used to think how cool it was that he got to have a car that was so distinctive and unusual, because it was already rare to see things that didn’t just fit into the same boxy, bland palettes. Since then, things have only gotten worse: I can’t remember the time that my daily commute took me past a car that wasn’t painted in an all-encompassing single-colour coat of metallic black, white, silver, red, or blue and with interior plastic entirely in one of two shades of dark grey.

Hopefully it’s just a phase that we, as a society, are going through.

Practical Color Theory for People Who Code

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

Practical Color Theory for People Who Code

Are You Colorblind?

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

Fake Science

Orange

Which came first, orange or orange?

Let me try that again: which came first, the colour or the fruit?

A variety of shades of orange. — Oranges

Still not quite right – one more try: which came first, orange, the English name of the colour, or orange, the English name of the fruit? What I really want to know is: is the fruit named after the colour or the colour after the fruit? (I find it hard to believe that the two share a name and colour simply by coincidence)

It turns out that the fruit came first. Prior to the introduction of oranges to Western Europe in around the 16th or 17th century by Portugese merchants, English-speaking countries referred to the colour by the name ġeolurēad. Say that Old English word out loud and you’ll hear its roots: it’s a combination of the historical versions of the words “yellow” and “red”. Alternatively, people substituted words like “gold” or “amber”: also both words for naturally-occurring substances whose identity is confirmed by their colouration.

There wasn’t much need for a dedicated word in English to describe the colour, before the introduction of the fruit, because there wasn’t much around of that colour. The colour orange isn’t common in nature: a few fruits, copper-rich soils and rocks, a small number of tropical fish, a handful of flowers… and of course autumn leaves during that brief period before they go brown and are washed away by Britain’s encroaching winter weather.

The names for the parts of the visible spectrum are reasonably arbitrary, but primary colours tend to cover a broader “space” than secondary ones; presumably because its easier for humans to distinguish between colours that trigger multiple types of receptors in the eye.

Brent Berlin and Paul Kay theorise that the evolution of a language tends towards the introduction of words for particular colours in a strict order: so words to distinguish between green and blue (famously absent in Japanese, Vietnamese, and Thai) are introduced before brown is added, which in term appears before the distinction of pink, orange, and grey. At a basic level, this seems to fit: looking at a variety of languages and their words for different colours, you’ll note that the ‘orange’ column is filled far less-often than the ‘brown’ column, which in turn is filled less-often than the ‘green’ column.

This is a rather crude analogy, of course, because some languages go further than others in their refinement of a particular area of the spectrum. Greek, for example, breaks down what we would call “blue” into τυρκουάζ (turquoise) and κυανό (azure), and arguably βιολέ (violet), although a Greek-speaker would probably put the latter down as a shade of purple, rather than of blue. It makes sense, I suppose, that languages are expected to develop a name for the colour “red” no later than they do for other colours (other than to differentiate between darkness and lightness) – a lot of important distinctions in biology, food, and safety depend on our ability to communicate about red things! But it seems to me that we’ve still got a way to go, working on our linguistic models of colour.

If we’d evolved on Mars (and were still a sighted, communicative, pack creature, but – for some reason – still had a comparable range and resolution of colour vision), our languages would probably contain an enormous variety of words for colours in the 650-750 nanometre wavelengths (the colours that English speakers universally call “red”). Being able to navigate the red planet based on the different ratios of hematites in the rocks, plains, soils and dusts would doubtless mean that the ability to linguistically distinguish between a dark-red feature and a medium-red feature could be of great value!

The names we have for colours represent a part of our history, and our environment. From an anthropological and linguistic perspective, that’s incredibly interesting.

If it weren’t for the ubiquity of, say, violets and lavender in the Northern hemisphere, perhaps the English language wouldn’t have been for a word for that particular colour, and the rainbow would have six colours instead of seven. And if I’d say, “Richard Of York Gave Battle In…”, nobody would know how to finish the sentence.

In other news, I recently switched phone network, and I’m now on Orange (after many years on Vodafone). There is no connection between this fact and this blog post; I just thought I’d share.

Cool Thing Of The Day

Cool And Interesting Thing Of The Day To Do At The University Of Wales, Aberystwyth, #14:

Go to a “Traffic Lights Party” organized by the students union, where you’re supposed to dress in a colour that dictates your availability status. Red is “Taken”. Yellow is “Maybe available”. Green is “Desperate”. Wear yellow. Fail to ‘pull’.

The ‘cool and interesting things’ were originally published to a location at which my “friends back home” could read them, during the first few months of my time at the University of Wales, Aberystwyth, which I started in September 1999. It proved to be particularly popular, and so now it is immortalised through the medium of my weblog.