Better Understanding Colourspaces

Jason Knight
CodeX
Published in
12 min readOct 4, 2023

--

In my recent article “Light/Dark Toggles? Amateur Hour!” I use a mix of HSL, RGB, and YCbCr to accomplish an easy way to colourize a page and maintain high legibility… but if you don’t know colourspaces much of that article might have gone over your head. I’ve had a lot of DM over on muskies dumpster fire asking for clarification on some smaller details, and a few asking if I could write an article about it.

But first, a few notes:

  1. I went to school in Taxachusetts back in the ‘70’s and ‘80’s so I learned the word as colour. It has taken me close to 25 years of using CSS to break myself of typing “colour” and instead using “color”, and I STILL screw it up in the code a lot. It’s just not how I learned the word. As such I may accidentally flip back and forth betwixt the two spellings in this article. You have a problem with that, bite me.
  2. I also learned this stuff in the ‘80’s when working as part of the joint IBM, Apple, Microsoft venture that led to the VGA monochrome standard as well as colour choices in M$ software for all platforms. This means that thanks to a terminology change in the early 2000’s what I say might not match modern textbooks. OH WELL. At least back when I learned it, the terms made sense in a way that created usable and workable results. Unlike today where most so-called “designers” can’t even choose legible colour contrasts and give you a blank stare if you even mention Luma / Y
  3. This is a gross oversimplification for the layman, in the hopes y’all be able…

--

--

Jason Knight
CodeX

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse