From 5ec2d93446ae890e164dd8ad33602a09c0d8814e Mon Sep 17 00:00:00 2001
From: Mica White <botahamec@outlook.com>
Date: Sat, 5 Sep 2026 21:29:35 -0400
Subject: First commit

---
 src/blog/color-spaces.kuht | 130 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 src/blog/color-spaces.kuht

(limited to 'src/blog/color-spaces.kuht')

diff --git a/src/blog/color-spaces.kuht b/src/blog/color-spaces.kuht
new file mode 100644
index 0000000..ee668b5
--- /dev/null
+++ b/src/blog/color-spaces.kuht
@@ -0,0 +1,130 @@
+<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
-- 
cgit v1.3.1