From aa051eb7c82f4f4d5bbe9fbff746b876f6aa419a Mon Sep 17 00:00:00 2001 From: Yann Date: Thu, 20 Aug 2026 18:32:49 -0700 Subject: [PATCH 1/4] typo --- src/content/blog/postcss-setup-for-mcss.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/blog/postcss-setup-for-mcss.mdx b/src/content/blog/postcss-setup-for-mcss.mdx index 7b4f79a2..54c2f857 100644 --- a/src/content/blog/postcss-setup-for-mcss.mdx +++ b/src/content/blog/postcss-setup-for-mcss.mdx @@ -11,7 +11,7 @@ import Notice from "../../components/Notice.astro"; None of the following applies if you link to the pre-compiled files in your code. The [Getting Started][install] page compares the two so you can pick the - best option for your use case.. + best option for your use case. ## From d2a26970f95e1c619f84d82caeed2eb463d51ca0 Mon Sep 17 00:00:00 2001 From: Yann Date: Thu, 20 Aug 2026 18:46:45 -0700 Subject: [PATCH 2/4] tightening up the color article --- src/content/blog/colors-in-css.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/blog/colors-in-css.mdx b/src/content/blog/colors-in-css.mdx index 6e9b08d2..b15fabc9 100644 --- a/src/content/blog/colors-in-css.mdx +++ b/src/content/blog/colors-in-css.mdx @@ -15,7 +15,7 @@ import ColorPickerOklch from "../../components/_ColorPickerOklch.jsx"; ### A little bit of history -First, there was the [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) ("Lab") perceptually uniform color space. Then in 2020, [Björn Ottosson created Oklab](https://bottosson.github.io/posts/oklab/) ("an OK Lab color space") to address Lab's problems when used with modern displays. But Oklab uses Cartesian coordinates which is great if you're a computer, but pretty cryptic otherwise… So OKLCH was added to the mix soon after, using polar coordinates, which makes it much easier to use (similar to HSL) for non-robots. +First, there was the [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) ("Lab") perceptually uniform color space. Then in 2020, [Björn Ottosson created Oklab](https://bottosson.github.io/posts/oklab/) ("an OK Lab color space") to address Lab's problems when used with modern displays. But Oklab uses Cartesian coordinates which is great if you're a computer, but pretty cryptic otherwise… So OKLCH was added to the mix, using polar coordinates, which makes it much easier to use (similar to HSL) for non-robots. ### OKLCH syntax @@ -26,8 +26,8 @@ First, there was the [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) ``` - **L**ightness controls how light or dark the color is. From `0` – `1` (or `0%` – `100%`). -- **C**hroma is similar to saturation, but [different](https://en.wikipedia.org/wiki/Munsell_color_system#Chroma): it's how a color _looks_ compared to a neutral gray of the same brightness. A "safe" range is `0` – `0.35`, Values above ~`0.37` will be clipped on most monitors. -- **H**ue controls what part of the color wheel to sample. From `0deg` – `360deg` +- **C**hroma is similar to saturation, but [different](https://en.wikipedia.org/wiki/Munsell_color_system#Chroma): it's how a color _looks_ compared to a neutral gray of the same brightness. A "safe" range is roughly `0` – `0.32` for sRGB and `0.36` for P3, and often less on most monitors. +- **H**ue controls what part of the color wheel to sample. From `0deg` – `360deg`. ### Why use OKLCH @@ -151,7 +151,7 @@ For a cleaner syntax, you can drop the commas and units, and add the alpha chann /* red at 0.5 opacity */ .elem { - oklch(0.628 0.2577 29.23 / 0.5) + color: oklch(0.628 0.2577 29.23 / 0.5); } .elem { @@ -170,7 +170,7 @@ For a cleaner syntax, you can drop the commas and units, and add the alpha chann ```css .elem { /* you can pass alpha channel at the end of hex too*/ - /* (hex 80 = decimal 50) */ + /* hex 80 = decimal 128 ≈ 50% alpha (128/255 = 50.2%) */ background: #ff000080; } ``` From 3015e5553e6b2c27c5ba28fc8265a2eb0635eb1a Mon Sep 17 00:00:00 2001 From: Yann Date: Thu, 20 Aug 2026 18:56:46 -0700 Subject: [PATCH 3/4] more fixes --- src/content/blog/colors-in-css.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/blog/colors-in-css.mdx b/src/content/blog/colors-in-css.mdx index b15fabc9..e2e6a000 100644 --- a/src/content/blog/colors-in-css.mdx +++ b/src/content/blog/colors-in-css.mdx @@ -15,7 +15,7 @@ import ColorPickerOklch from "../../components/_ColorPickerOklch.jsx"; ### A little bit of history -First, there was the [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) ("Lab") perceptually uniform color space. Then in 2020, [Björn Ottosson created Oklab](https://bottosson.github.io/posts/oklab/) ("an OK Lab color space") to address Lab's problems when used with modern displays. But Oklab uses Cartesian coordinates which is great if you're a computer, but pretty cryptic otherwise… So OKLCH was added to the mix, using polar coordinates, which makes it much easier to use (similar to HSL) for non-robots. +First, there was the [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) ("Lab") perceptually uniform color space. Then in 2020, [Björn Ottosson created Oklab](https://bottosson.github.io/posts/oklab/) ("an OK Lab color space") to address Lab's problems. But Oklab uses Cartesian coordinates which is great if you're a computer, but pretty cryptic otherwise… So OKLCH was added to the mix, using polar coordinates, which makes it much easier to use (similar to HSL) for non-robots. ### OKLCH syntax @@ -26,7 +26,7 @@ First, there was the [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) ``` - **L**ightness controls how light or dark the color is. From `0` – `1` (or `0%` – `100%`). -- **C**hroma is similar to saturation, but [different](https://en.wikipedia.org/wiki/Munsell_color_system#Chroma): it's how a color _looks_ compared to a neutral gray of the same brightness. A "safe" range is roughly `0` – `0.32` for sRGB and `0.36` for P3, and often less on most monitors. +- **C**hroma is similar to saturation, but [different](https://en.wikipedia.org/wiki/Munsell_color_system#Chroma): it's how a color _looks_ compared to a neutral gray of the same lightness. A "safe" range is roughly `0` – `0.32` for sRGB and `0.36` for P3, and often less on most monitors. - **H**ue controls what part of the color wheel to sample. From `0deg` – `360deg`. ### Why use OKLCH @@ -116,7 +116,7 @@ OKLCH mental model is similar to LCH (but with perceptually uniform results): pi -RGB is notorious for interpolating colors with the artistic flair of a vacuum cleaner. OKLCH is great, but it can lead to some unexpected results with gradients because of its polar coordinates underpinnings. Most of the time, Oklab will get you the best results. +sRGB is notorious for interpolating colors with the artistic flair of a vacuum cleaner. OKLCH is great, but it can lead to some unexpected results with gradients because of its polar coordinates underpinnings. Most of the time, Oklab will get you the best results. {/* prettier-ignore */}
Date: Thu, 20 Aug 2026 19:16:20 -0700 Subject: [PATCH 4/4] more typo and fact fixes --- src/content/blog/colors-in-css.mdx | 22 ++++++++++------------ src/styles/site/page.blog.css | 2 +- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/content/blog/colors-in-css.mdx b/src/content/blog/colors-in-css.mdx index e2e6a000..d27b9f40 100644 --- a/src/content/blog/colors-in-css.mdx +++ b/src/content/blog/colors-in-css.mdx @@ -15,13 +15,13 @@ import ColorPickerOklch from "../../components/_ColorPickerOklch.jsx"; ### A little bit of history -First, there was the [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) ("Lab") perceptually uniform color space. Then in 2020, [Björn Ottosson created Oklab](https://bottosson.github.io/posts/oklab/) ("an OK Lab color space") to address Lab's problems. But Oklab uses Cartesian coordinates which is great if you're a computer, but pretty cryptic otherwise… So OKLCH was added to the mix, using polar coordinates, which makes it much easier to use (similar to HSL) for non-robots. +First, there was the [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) ("Lab") perceptually uniform color space. Then in 2020, [Björn Ottosson created Oklab](https://bottosson.github.io/posts/oklab/) ("an OK Lab color space") to address Lab's problems. But Oklab uses Cartesian coordinates, which are great if you're a computer, but pretty cryptic otherwise… So OKLCH was added to the mix, using polar coordinates, which makes it much easier to use (similar to HSL) for non-robots. ### OKLCH syntax ```css .elem { - background-color: oklch(0.59 0.13 242); /* blue */ + background-color: oklch(0.59 0.13 242); /* blue */ } ``` @@ -64,7 +64,7 @@ You can create design system palettes using the same hue while tweaking lightnes ### Accessibility -This "perceptually uniform" business makes it the best option for a11y friendly palettes. Here's a comparison between HSL and OKLCH that makes it clear why. We're only changing the **Hue** angle by the same amount in both. (Switch to dark mode to make it even more evident.) +This "perceptually uniform" business makes it the best option for a11y-friendly palettes. Here's a comparison between HSL and OKLCH that makes it clear why. We're changing the **Hue** angle by the same amount in both and keeping the **Lightness** the same. (Switch to dark mode to make it even more evident.) {/* prettier-ignore */}
@@ -94,10 +94,10 @@ This "perceptually uniform" business makes it the best option for a11y friendly ### Wide gamut P3 colors -OKLCH works with [wide-gamut][gamut] colors, and your browser will render the closest approximation if your screen can't display it. (Make sure you look at the swatches below on a monitors with P3 color support.) +OKLCH works with [wide-gamut][gamut] colors, and your browser will render the closest approximation if your screen can't display it. (Make sure you look at the swatches below on a monitor with P3 color support.) {/* prettier-ignore */} -
+
sRGB
Display-P3
sRGB
@@ -108,7 +108,7 @@ OKLCH works with [wide-gamut][gamut] colors, and your browser will render the cl ### Intuitive to use -OKLCH mental model is similar to LCH (but with perceptually uniform results): pick a **Hue**, then adjust the **Lightness**/**Chroma** (or vice versa). Below is an OKLCH color picker so you can get a feel for how it works. (The "Gamut correction" warning tells you when the color is out of range for your display.) +The OKLCH mental model is similar to LCH (but with perceptually uniform results): pick a **Hue**, then adjust the **Lightness**/**Chroma** (or vice versa). Below is an OKLCH color picker so you can get a feel for how it works. (The "Gamut correction" warning tells you when the color is out of range for your display.) @@ -121,13 +121,13 @@ sRGB is notorious for interpolating colors with the artistic flair of a vacuum c {/* prettier-ignore */}
sRGB
+ style="background: linear-gradient(90deg, #ff00ff,#00ff00);">sRGB
Oklab
+ style="background: linear-gradient(in oklab 90deg, #ff00ff,#00ff00);">Oklab
OKLCH
+ style="background: linear-gradient(in oklch 90deg, #ff00ff,#00ff00);">OKLCH
```css .srgb { @@ -161,15 +161,13 @@ For a cleaner syntax, you can drop the commas and units, and add the alpha chann .elem { color: rgb(255 0 0 / 0.5); } - - ``` **Bonus:** you can add the alpha channel to Hex colors too: ```css .elem { - /* you can pass alpha channel at the end of hex too*/ + /* you can pass alpha channel at the end of hex too */ /* hex 80 = decimal 128 ≈ 50% alpha (128/255 = 50.2%) */ background: #ff000080; } diff --git a/src/styles/site/page.blog.css b/src/styles/site/page.blog.css index 3ab9ab49..712f0c8f 100644 --- a/src/styles/site/page.blog.css +++ b/src/styles/site/page.blog.css @@ -42,7 +42,7 @@ &:nth-child(5) { order: 2; } &:nth-child(6) { order: 4; } &:nth-child(7) { order: 6; } - &:nth-child(8) { order: 7; } + &:nth-child(8) { order: 8; } @media (--md) { &:nth-child(1), &:nth-child(2),