CODEWITHSUNDEEP
csscolorsrgbcolor-spacehsl
entropyfeverone
entropyfeverone

Reputation: 1572

Which color space does linear-gradient() uses?

Which color space does CSS's linear-gradient() function uses, RGB, HSL or HSV and why ?

Can I change the color space of my own choice ?

Upvotes: 2

Views: 1124

Answers (2)

keithjgrant
keithjgrant

Reputation: 12769

If you don't specify a color space in the gradient function, the default space is sRGB (though Chrome has a bug where this is not quite right in MacOS).

Browsers have begun to ship the newer syntax, which allows you to specify the color space: linear-gradient(in oklch 90deg, red, blue). Valid color spaces are hsl, hwb, lch, oklch (the polar spaces) and srgb, srgb-linear, lab, oklab, xyz, xyz-d50, and xyz-d65 (the rectangular spaces).

As of late 2023, this syntax is supported in Chrome, Safari, and Edge, but not Firefox.

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 274237

In the future you can specify the color space

Compared to [css3-images], this level adds a token to customize color interpolation in gradients as described in CSS Color 4 § 12 Interpolation.

linear-gradient() = linear-gradient(
  [ <angle> | to <side-or-corner> ]? || <color-interpolation-method>,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]

You can keep reading for more detail

Safari has some support for this if you want to test: https://twitter.com/argyleink/status/1490376117064065025

Upvotes: 1

Related Questions