Skip to content

Conversation

@adamwathan
Copy link
Member

This PR updates all of our gradient utilities to interpolate using OKLCH by default instead of sRGB. This results in a smoother transition between colors that preserves saturation throughout the gradient, rather than hitting the dreaded dull gray zone in between your color stops.

Here are a few examples comparing sRGB (top) to OKLCH (bottom):

image

We only apply a default interpolation mode when not using arbitrary values with the gradient utility.

Simplified but clear:

.bg-linear-to-r {
  background-image: linear-gradient(to right in oklch, var(--gradient-color-stops));
}

.bg-linear-[to_right] {
  background-image: linear-gradient(to right, var(--gradient-color-stops));
}

.bg-linear-[to_right_in_hsl] {
  background-image: linear-gradient(to right in hsl, var(--gradient-color-stops));
}

@adamwathan adamwathan requested a review from a team as a code owner October 17, 2024 18:42
@adamwathan adamwathan merged commit edb066e into next Oct 17, 2024
1 check passed
@adamwathan adamwathan deleted the feat/use-oklch-for-gradients branch October 17, 2024 20:16
@trcio
Copy link

trcio commented Oct 24, 2024

very happy I saw your tweet about this PR, would have never known about this sick color space otherwise ‼️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants