Use Oklab for gradient interpolation #14955
Comments
|
Hey @aaronadamsCA! Thanks for the report. Agree that this particular example is really unexpected in Chrome. We did some comparison between
(the one underneath is oklab, ignore the label) What we'll do though is to make it very easy to change the interpolation mode. We'll add modifier support to all gradients so it's very easy to control this because of these inconsistencies. |
|
That makes sense! I still think you'll end up finding Put another way, most people probably won't expect to pick two colours and end up with a third: https://play.tailwindcss.com/ie9lFqoVOq?layout=horizontal https://play.tailwindcss.com/MN1X0EuhWr?layout=horizontal https://play.tailwindcss.com/x3ptQxqsew?layout=horizontal Still, as long as it's easy enough to change, it'll be great to have them all as options! |
This PR adds support for specifying a color interpolation method for all
gradient utilities using a modifier:
```html
<div class="bg-linear-to-r/oklab">
```
Supported bare values are any valid color space keyword, as well as the
special keywords `shorter`, `longer`, `increasing`, and `decreasing`,
which are shortcuts for `in oklch {keyword} hue`.
Arbitrary values are also supported and are used as-is, so the `in`
keyword is not automatically included for you:
```html
<div class="bg-linear-to-r/[in_oklab]">
```
Modifiers are not supported when using arbitrary values for the actual
gradient, as it's expected that your arbitrary gradient value contain
all of the details you want in your gradient:
```html
<!-- Won't work -->
<div class="bg-linear-[to_right]/oklab">
<!-- Do this -->
<div class="bg-linear-[to_right_in_oklab]">
```
Resolves #14955, but
it may still be wise to make `oklab` the default since I do sort of
agree with the poster there that most people probably expect a gradient
between two colors to sort of just "fade" between them rather than
interpolate between them around the color wheel.
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Fixes #15184, #14955 There's a strange bug in Safari < 18 where mixing a color with `transparent` or with a gray tone, the resulting color looks as if it's been interpolated through a red-ish color. Here's the same blue to transparent gradient in Safari 17 using OKLAB and OKLCH for comparison: <img width="747" alt="image" src="https://github.com/user-attachments/assets/1cb09b00-0d84-4284-be34-103726d8af03"> In other browsers, both of these examples look identical. This bug also shows up when using an opacity modifier right now because we use `in oklch` in our `color-mix(…)` calls: <img width="744" alt="image" src="https://github.com/user-attachments/assets/b029c5f1-0c5c-4119-80ba-dfeabe25927e"> This PR updates all of the affected places in Tailwind to use `in oklab` instead of `in oklch` which then renders everything as expected in all browsers. The big unfortunate change here is changing the default behavior of gradient utilities like `bg-linear-to-r` to use `in oklab` instead of `in oklch`. This means you get muddier gradients by default when creating a gradient between two regular colors (no transparent or gray), like how they looked in v3: <img width="740" alt="image" src="https://github.com/user-attachments/assets/d02e7596-4c99-4ba3-b929-d2db4911c8e9"> This feels worth it though to avoid people getting bitten by this Safari bug without realizing it, and people can always opt in to using OKLCH with classes like `bg-linear-to-r/oklch`. The nice thing about making this opt-in is that no one will opt-in to this when using transparent or gray because it won't make things look any different/better, and the only places where it does make things look better _do_ work as expected in Safari anyways. --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Gradient interpolation (and any future
color-mixutilities) should be using the Oklab colour space.https://play.tailwindcss.com/B5DPkOnhjl
You'll generally want the uniform colour space (Oklab) for mixing/interpolating between colours, and the cylindrical colour space (Oklch) for modifying the lightness/chroma/hue of individual colours.
The text was updated successfully, but these errors were encountered: