diff options
Diffstat (limited to 'src/blog/color-spaces.kuht')
| -rw-r--r-- | src/blog/color-spaces.kuht | 130 |
1 files changed, 130 insertions, 0 deletions
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 |