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)

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!

[Bloganuary] Fun Five

This post is part of my attempt at Bloganuary 2024. Today’s prompt is:

List five things you do for fun.

This feels disappointingly like the prompt from day 2, but I’m gonna pivot it by letting my answer from three weeks ago only cover one of the five points:

  1. Code
  2. Magic
  3. Piano
  4. Play
  5. Learn

Let’s take a look at each of those, briefly.

Code

Code is poetry. Code is fun. Code is a many-splendoured thing.

This is not what real coding looks like. This is what real coding looks like.

When I’m not coding for work or coding as a volunteer, I’m often caught coding for fun. Sometimes I write WordPress-ey things. Sometimes I write other random things. I tend to open-source almost everything I write, most of it via my GitHub account.

Magic

Now I don’t work in the city centre nor have easy access to other magicians, I don’t perform as much magic as I used to. But I still try to keep my hand in and occasionally try new things; I enjoy practicing sleights when I’m doing work-related things that don’t require my hands (meetings, code reviews, waiting for the damn unit tests to run…), a tip I learned from fellow magician Andy.

My favourite go-to trick with an untampered deck of cards is my variant of the Ambitious Classic; here’s a bit from the middle of the trick from the last time I performed it in a video meeting.

You’ll usually find a few decks of cards on my desk at any given time, mostly Bikes.1

Piano

I started teaching myself piano during the Covid lockdowns as a distraction from not being able to go anywhere (apparently I’m not the only one), and as an effort to do more of what I’m bad at.2 Since then, I’ve folded about ten minutes of piano-playing3, give or take, into my routine virtually every day.

This is what piano playing looks like. But perhaps only barely.

I fully expect that I’ll never be as accomplished at it as, say, the average 8-year-old on YouTube, but that’s not what it’s about. If I take a break from programming, or meetings, or childcare, or anything, I can feel that playing music exercises a totally different part of my mind. I’d heard musicians talk about such an experience before, but I’d assumed that it was hyperbole… but from my perspective, they’re right: practicing an instrument genuinely does feel like using a part of your brain than you use for anything else, which I love!

Play

I wrote a whole other Bloganuary post on the ways in which I integrate “play” into my life, so I’ll point you at that rather than rehash anything.

A lot of my RPG-gaming takes place online, via virtual tabletops, and is perhaps the most obvious “playtime” play activities I routinely engage in.

At the weekend I dusted off Vox Populi, my favourite mod for Civilization V, my favourite4 entry in the Civilization series, which in turn is one of my favourite video game series5. I don’t get as much time for videogaming as I might like, but that’s probably for the best because a couple of hours disappeared on Sunday evening before I even blinked! It’s addictive stuff.

Learn

As I mentioned back on day 3 of bloganuary, I’m a lifelong learner. But even when I’m not learning in an academic setting, I’m doubtless learning something. I tend to alternate between fiction and non-fiction books on my bedside table. I often get lost on deep-dives through the depths of the Web after a Wikipedia article makes me ask “wait, really?” And just sometimes, I set out to learn some kind of new skill.

It’s not always wacky and off-the-wall things like basic blacksmithing that I learn. Sometimes it’s normal, practical activities like baking bread or… umm… Argentine tango?

In short: with such a variety of fun things lined-up, I rarely get the opportunity to be bored6!

Footnotes

1 I like the feel of Bicycle cards and the way they fan. Plus: the white border – which is actually a security measure on playing cards designed to make bottom-dealing more-obvious and thus make it harder for people to cheat at e.g. poker – can actually be turned to work for the magician when doing certain sleights, including one seen in the mini-video above…

2 I’m not strictly bad at it, it’s just that I had essential no music tuition or instrument experience whatsoever – I didn’t even have a recorder at primary school! – and so I was starting at square zero.

3 Occasionally I’ll learn a bit of a piece of music, but mostly I’m trying to improve my ability to improvise because that scratches an itch in a part of my brain in a way that I find most-interesting!

4 Games in the series I’ve extensively played include: Civilization, CivNet, Civilization II (also Test of Time), Alpha Centauri (a game so good I paid for it three times, despite having previously pirated it), Civilization III, Civilization IV, Civilization V, Beyond Earth (such a disappointment compared to SMAC) and Civilization VI, plus all their expansions except for the very latest one for VI. Also spinoffs/clones FreeCiv, C-Evo, and both Call to Power games. Oh, and at least two of the board games. And that’s just the ones I’ve played enough to talk in detail about: I’m not including things like Revolution which I played an hour of and hated so much I shan’t touch it again, nor either version of Colonization which I’m treating separately…

5 Way back in 2007 I identified Civilization as the top of the top 10 videogames that stole my life, and frankly that’s still true.

6 At least, not since the kids grew out of Paw Patrol so I don’t have to sit with them and watch it any more!

Do What You’re Bad At [Video]

This post is also available as an article. So if you'd rather read a conventional blog post of this content, you can!

This video accompanies a blog post of the same title. The content is basically the same – if you prefer videos, watch this video. If you prefer blog posts, go read the blog post. If you’re a superfan, try both and spot the differences. You weirdo.

Also available on YouTube or on Facebook.

Do What You’re Bad At

This post is also available as a video. If you'd prefer to watch/listen to me talk about this topic, give it a look.

This blog post is also available as a video. Would you prefer to watch/listen to me tell you about how I’ve learned to enjoy doing what I’m bad at?

There are a great number of things that I’m bad at. One thing I’m bad at (but that I’m trying to get better at) is being more-accepting of the fact that there are things that I am bad at.

Against a pale background, Dan, deep in thought and with a finger to his lips, staring into space. A stylised thought bubble above him shows that he is thinking about himself thinking about himself thinking about himself, and so on (implied to infinity).
I’ve also been thinking about how I’m bad at thinking about how I’m bad at thinking about how I’m bad at thinking about…

I’m pretty bad in a pub quiz. I’m bad at operating my pizza oven without destroying cookware. I’m especially bad at learning languages. I’m appallingly bad at surfing. Every time my work periodically leans in that direction I remember how bad I am at React. And I’ve repeatedly shown that I’m bad at keeping on top of blogging, to the extent that I’ve periodically declared bankruptcy on my drafts folder.

So yeah, pretty bad at things.

But hang on: that assessment isn’t entirely true.

Photograph showing a yellow banana on a pink background. The banana has a silver chain wrapped around it three times. Photo courtesy Deon Black.
I’m also particularly bad at choosing suitable stock photos for use in blog posts.

Being Bad

As a young kid, I was a smart cookie. I benefited from being an only child and getting lots of attention from a pair of clever parents, but I was also pretty bright and a quick learner with an interest in just about anything I tried. This made me appear naturally talented at a great many things, and – pushed-on by the praise of teachers, peers, and others – I discovered that I could “coast” pretty easily.

But a flair for things will only carry you so far, and a problem with not having to work hard at your education means that you don’t learn how to learn. I got bitten by this when I was in higher education, when I found that I actually had to work at getting new information to stick in my head (of course, being older makes learning harder too, as became especially obvious to me during my most-recent qualification)!

Dan, aged around 4, dressed in a duffel coat, bobble hat and gloves, kneeling on a red plastic sledge in a snow-filled garden. The garden is bordered by a wire fence, and in the background a man can be seen scraping icee off a car.
Ignore the fact that you’ve now seen me trying to sledge uphill and just accept that I was a clever kid (except at photography), okay?

A side-effect of these formative experiences is that I grew into an adult who strongly differentiated between two distinct classes of activities:

  1. Things I was good at, either because of talent or because I’d thoroughly studied them already. I experienced people’s admiration and respect when I practised these things, and it took little effort to stay “on top” of these fields, and
  2. Things I was bad at, because I didn’t have a natural aptitude and hadn’t yet put the time in to learning them. We don’t often give adults external reinforcement for “trying hard”, and I’d become somewhat addicted to being seen as awesome… so I shied away from things I was “bad at”.

The net result: I missed out on opportunities to learn new things, simply because I didn’t want to be seen as going through the “amateur” phase. In hindsight, that’s really disappointing! And this “I’m bad at (new) things” attitude definitely fed into the imposter syndrome I felt when I first started at Automattic.

Being Better

Leaving the Bodleian after 8½ years might have helped stimulate a change in me. I’d carved out a role for myself defined by the fields I knew best; advancing my career would require that I could learn new things. But beyond that, I benefited from my new employer whose “creed culture” strongly promotes continuous learning (I’ve vlogged about this before), and from my coach who’s been great at encouraging me towards a growth mindset.

A cake with icing printed with a picture of Dan in a library. Beneath are iced the words "Good Luck Dan".
“Good Luck Dan”, my Bodleian buddies said. But perhaps they should’ve said “Keep Learning Dan”.

But perhaps the biggest stimulus to remind me to keep actively learning, even (especially?) when it’s hard, might have been the pandemic. Going slightly crazy with cabin fever during the second lockdown, I decided to try and teach myself how to play the piano. Turns out I wasn’t alone, as I’ve mentioned before: the pandemic did strange things to us all.

I have no real experience of music; I didn’t even get to play recorder in primary school. And I’ve certainly got no talent for it (I can hear well enough to tell how awful my singing is, but that’s more a curse than a blessing). Also, every single beginners’ book and video course I looked at starts from the assumption that you’re going to want to “feel” your way into it, and that just didn’t sit well with the way my brain works.

Animation showing Dan, wearing a black t-shirt and tracksuit bottoms, playing an upright piano.
90% of what I do in front of a piano might be described as “Dan Mucks About (in B Minor)”, but that’s fine by me.

I wanted a theoretical background before I even sat down at a keyboard, so I took a free online course in music theory. Then I started working through a “beginners’ piano” book we got for the kids. Then I graduated to “first 50 Disney songs”, because I know how virtually all of them sound well enough that I’d be able to hear where I was going wrong. Since then, I’ve started gradually making my way through a transcription of Einaudi’s Islands. Feeling like I’d got a good handle on what I was supposed to be doing, I then took inspiration from a book JTA gave me and started trying to improvise.

Most days, I get no more than about 10 minutes on the piano. But little by little, day by day, that’s enough to learn. Nowadays even my inner critic perfectionist can tolerate hearing myself play. And while I know that I’ll probably never be as good as, say, the average 8-year-old on YouTube, I’m content in my limited capacity.

Three books on a blue-and-white tablecloth: John Thompson's Easiest Piano Course (Part One), First 50 Disney Songs, and Essential Einaudi - Islands. Beneath them sits a simplified diagram showing the circle of fifths.
Let’s start at the very beginning. (A very good place to start.)

If I’m trying to cultivate my wonder syndrome, I need to stay alert for “things I’m bad at” that I could conceivably be better at if I were just brave enough to try to learn. I’m now proudly an “embarrassingly amateur” pianist, which I’m at-long-last growing to see as better than a being non-pianist.

Off the back of that experience, I’m going to try to spend more time doing things that I’m bad at. And I’d encourage you to do the same.

× × × × ×

The Unexpected Solace in Learning to Play Piano

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

…while I practice, I have to simultaneously read, listen, think, translate. Every synapse of my brain is so utterly overwhelmed, there is no capacity left to think about the world out there.

When Christoph Niemann published this piece about learning to play the piano during the most-lockdown-y parts of the Coronavirus lockdown, it rang a chord with me (hah!). I, too, have experimented with learning to play the piano this spring/summer, and found a similar kind of Zen-like focussed calm emerge out of the frustration of staring at a piece of sheet music and wondering why I couldn’t for the life of me get me fingers to remember to do when they got to that point.

I started out with – after following some random links off the back of finishing the last bit of work for my recent masters degree – a free course in music theory by the OU, because I figured that coming in from a theoretical perspective would help with the way my brain thinks about this kind of thing. I supplemented that with a book we got for the kids to use to learn to play, and now I’ve now graduated to very gradually hunt-and-pecking my way through Disney’s back catalogue. I can play Go The Distance, Colors of the Wind and most of Can You Feel The Love Tonight barely well enough that I don’t feel the need to tear my own ears off, so I guess I’m making progress, though I still fall over my own hands every time I try to play any bloody thing from Moana. 20 minutes at a time, here and there, and I’m getting there. I don’t expect to ever be good at it, but I’m enjoying it nonetheless.

But anyway: this piece in the NYT Magazine really spoke to me, and to hear that somebody with far more music experience than me can struggle with all the same things I do when getting started with the piano was really reassuring.