Color space

pallete

color(): 색 지정

Style background-color : color(colorspace c1 c2 c3[ / A])

c1 c2 c3 A 는 0~1 사이의 값

RGB 계열

--bgc:color(srgb 1 0.5 0.25 )

--bgc:color(srgb-linear 1 0.5 0.25 )

--bgc:color(display-p3 1 0.5 0.25 )

--bgc:color(a98-rgb 1 0.5 0.25 )

--bgc:color(prophoto-rgb 1 0.5 0.25 )

--color-space:(rec2020 1 0.5 0.25 )

HSL 계열

--bgc:color(hsl 20deg 100% 63% )
(not support in chrome)

--bgc:color(hwb 20deg 25% 0% )
(not support in chrome)

CIE 계열

--bgc:color(lab 267.95 46.65 56.43)
(not support in chrome)

--bgc:color(lch 67.95 73.21 50.42)
(not support in chrome)

--bgc:color(xyz 0.5 0.37 0.09)

--bgc:color(xyz-d50 0.53 0.38 0.07)

OK 계열

--bgc:color(oklab 0.73 0.12 0.12)
(not support in chrome)

--bgc:color(oklch 0.73 0.17 44.92)
(not support in chrome)

color-mix(): 색 혼합

Style background-color: color-mix(in var(--color-space), #f00 100%, #0ff 100%)

아래 gradient 의 중간 색이 된다.

RGB 계열

--color-space: srgb(기본값)

--color-space: srgb-linear

--color-space: display-p3

--color-space: a98-rgb

--color-space: prophoto-rgb

--color-space: rec2020

HSL 계열

--color-space: hsl

--color-space: hwb

CIE 계열

--color-space: lab

--color-space: lch

--color-space: xyz

--color-space: xyz-d50

OK 계열

--color-space: oklab

--color-space: oklch

gradient

Style background : linear-gradient(to right in var(--color-space), #f00 0%,#0ff 100%);

RGB 계열

--color-space: srgb(기본값)

--color-space: srgb-linear

--color-space: display-p3

--color-space: a98-rgb

--color-space: prophoto-rgb

--color-space: rec2020

HSL 계열

--color-space: hsl

--color-space: hwb

CIE 계열

--color-space: lab

--color-space: lch

--color-space: xyz

--color-space: xyz-d50

OK 계열

--color-space: oklab

--color-space: oklch

Q. OKLab과 OKLCH가 표현에 차이나는 이유.
OKLab과 OKLCH는 같은 색공간이지만 보간(interpolation) 축이 다르기 때문에 그라디언트 경로 자체가 달라집니다.
OKLab 은 L(밝기) a(녹색-적색) b(청색-황색) vs OKLCH 는 L(밝기) C(채도) H(색상각) 으로 계산 시 보간축에 다르기 때문
색공간이나 보간축이 다르면 다른 그라이언트가 표시될 수 있다.