<import "base.kuht" as "base" />
<head>
<title>Color Spaces</title>
<meta name="description" content="Colors are more interesting than you may think" />
</head>
<body>
<article>
<h1>Color Spaces</h1>
<p>
Colors are more interesting than you might think. I want to share a bit of
information on colors so that you can pick better ones.
</p>
<h2>RGB</h2>
<p>
Most programmers should already be familiar with RGB. When you have a hex code
like <code>#e395fa</code>, that's an RGB value. Displays are made of pixels
which can simultaneously display red, green, and blue lights. The hex code
tells us how much of each color to use, using a two-digit hexadecimal number.
This format is common because it maps directly to what is displayed on the
screen, so most other color spaces need to be converted to RGB eventually.
</p>
<h2>HSL</h2>
<p>
RGB, despite its necessity, is pretty hard to intuitively understand. I gave
the example of <code>#e395fa</code> earlier, but it's difficult to imagine what that color
actually looks like (it's lavender-ish). HSL is a 1-1 mapping of RGB, meaning
that each HSL value maps to a different RGB value. And it's in a form that is
pretty intutive. H stands for hue, and is measured in degrees. It points to a
specific color on the color wheel. 0° is red, 180° is turquoise, 270° is
purple, and so on. S stands for saturation, which refers to the strength of the
color. Lower saturations mean that the color will be less colorful, and look
more gray-ish. L stands for lightness. Whiter colors will have higher
lightness, and blacker colors will have lower lightness.
</p>
<h2>LAB</h2>
The problem with HSL is that is is not perceptually uniform. According to HSL, all of these colors are the same lightness.
<img
alt="The HSL color space at 60% lightness. Some parts are clearly lighter than others"
width="360"
height="200"
src="https://www.hsluv.org/images/hsl.png"
/>
<p>
LAB, otherwise known as CIELAB, was designed by the International Commission
of Illumination to be more perceptually uniform. L, once again, stands for
lightness, and is on a scale of zero to one. A and B don't stand for anything,
don't have any bounds, and can in fact be negative. A is the spectrum between
red and green, and B is the spectrum between blue and yellow.
</p>
<p>
LAB still isn't perfect. The most notable problem is known as hue shift. As the
color gets lighter, the color starts somehow shifting towards purple.
</p>
<img
alt="Demonstration of the hue shift described above"
width="349"
height="160"
src="https://bottosson.github.io/img/oklab/cielab_blend.png"
/>
<p>
But all is saved, because one day Björn Ottosson said, "let there be OKLAB".
OKLAB was first described in a blog post he made. It's called OKLAB, because
he thought it was just okay<a id="af-1" href="#footnote-1"><sup>1</sup></a>.
Clearly he was wrong, because it didn't take long for OKLAB to become widely
available in Photoshop, web browsers, and game engines. It's not perfect, and
it's not even always better than CIELAB<a id="af-2" href="#footnote-2"><sup>2</sup></a>,
but it's good enough to beat everything else that's out there.
</p>
<h2>OKLCH</h2>
<p>
I don't think you need me to tell you that LAB is hard to visualize. Just guess
what <code>oklab(0.78 0.12 -0.11)</code> is. So, OKLCH came in. It's very
similar to HSL. H and L still stand for hue and lightness, respectively. C
stands for chroma, which is technically different from saturation, but similar
enough that I just think of them as the same thing.
</p>
<p>
One big difference between OKLCH and HSL is that OKLCH doesn't recognize every
color as being valid. Some colors are simply impossible. Try imagining a green
that's as dark as black, but still clearly green. And there are colors which
exist but cannot be displayed by your monitor, like the brightness of the sun.
OKLCH doesn't attempt to represent them. You can clamp them down to a color
from the sRGB color space if you wish, but there are colors in OKLCH that
cannot be displayed by your monitor, or any monitor for that matter.
</p>
<p>
I think it's better this way. Some designers may decide to clamp the color into
sRGB anyway, but it's good to at least know that the selected color value
doesn't quite match reality. And on the bright side, it might become slightly
easier to support HDR displays.
</p>
<p>
If you want to play around with OKLCH, there's a convenient URL for
<a href="https://oklch.com">oklch.com</a>. I recommend giving it a try,
and thinking about it the next time you need a set of colors for your project.
</p>
</article>
<hr />
<footer>
<ol>
<li>
<a href="https://qoiformat.org/">QOI</a> uses a similar naming scheme.
<a class="return" href="#af-1">return</a>
</li>
<li>
<a href="https://codepen.io/eeeps/pen/oNmERrJ">https://codepen.io/eeeps/pen/oNmERrJ</a>
<a class="return" href="#af-2">return</a>
</ol>
</footer>
</body
|
