Skip to content

Interpolate gradients using OKLCH by default#14708

Merged
adamwathan merged 2 commits into
nextfrom
feat/use-oklch-for-gradients
Oct 17, 2024
Merged

Interpolate gradients using OKLCH by default#14708
adamwathan merged 2 commits into
nextfrom
feat/use-oklch-for-gradients

Conversation

@adamwathan

Copy link
Copy Markdown
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
@adamwathan adamwathan deleted the feat/use-oklch-for-gradients branch October 17, 2024 20:16
@trcio

trcio commented Oct 24, 2024

Copy link
Copy Markdown

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.

3 participants