CSS ์์ ๋ณด๊ฐ ๊ธฐ๋ฅ์ ํ์ฉํ์ฌ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ด๊ณ ๋ถ๋๋ฌ์ด ๊ทธ๋ผ๋ฐ์ด์ ์ ํ์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์. ๋ค์ํ ์ ๊ณต๊ฐ์ด ๊ทธ๋ผ๋ฐ์ด์ ๋ชจ์์ ๋ฏธ์น๋ ์ํฅ์ ํ์ตํฉ๋๋ค.
CSS ์์ ๋ณด๊ฐ: ๋ถ๋๋ฌ์ด ๊ทธ๋ผ๋ฐ์ด์ ์ ํ ๋ง์คํฐํ๊ธฐ
๊ทธ๋ผ๋ฐ์ด์ ์ ์น ๋์์ธ์ ์๊ฐ์ ์ธ ํฅ๋ฏธ์ ๊น์ด๋ฅผ ๋ํ๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค. ๊ทธ๋ฌ๋ ์ง์ ์ผ๋ก ๋ถ๋๋ฝ๊ณ ์์ฐ์ค๋ฌ์ด ๊ทธ๋ผ๋ฐ์ด์ ์ ์ป๋ ๊ฒ์ ์ด๋ ค์ธ ์ ์์ต๋๋ค. CSS ์์ ๋ณด๊ฐ์ด ๋ฐ๋ก ์ด ๋ถ๋ถ์์ ์ค์ํ ์ญํ ์ ํฉ๋๋ค. ์ด ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ์์๋ ์์ ๋ณด๊ฐ์ ๋ณต์ก์ฑ์ ์์ธํ ์ดํด๋ณด๊ณ ๋ค์ํ ์ ๊ณต๊ฐ๊ณผ ๊ธฐ์ ์ ํ๊ตฌํ์ฌ ๋ฉ์ง ๊ทธ๋ผ๋ฐ์ด์ ์ ํ์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์์๋ด ๋๋ค.
์์ ๋ณด๊ฐ์ด๋ ๋ฌด์์ ๋๊น?
์์ ๋ณด๊ฐ์ ๋ ์ด์์ ์ง์ ๋ ์์ ์ฌ์ด์ ์ค๊ฐ ์์์ ๊ณ์ฐํ๋ ํ๋ก์ธ์ค์ ๋๋ค. CSS ๊ทธ๋ผ๋ฐ์ด์ ์ ์ปจํ ์คํธ์์ ์ด๋ ๊ทธ๋ผ๋ฐ์ด์ ์ ์์ ์์๊ณผ ๋ ์์ ์ฌ์ด์ ๊ณต๊ฐ์ ์ฑ์ฐ๋ ์์์ ๊ฒฐ์ ํฉ๋๋ค. CSS์์ ๋ณด๊ฐ์ ์ฌ์ฉ๋๋ ๊ธฐ๋ณธ ์ ๊ณต๊ฐ์ sRGB์ด์ง๋ง, ํนํ ๋๋น๊ฐ ๋์ ์์ ๊ฐ์ ์ ํํ ๋ ์ฑ๋๊ฐ ๋ฎ์์ง๊ฑฐ๋ ํ๋ฆฟํด ๋ณด์ด๋ ๊ทธ๋ผ๋ฐ์ด์ ์ด ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค.
sRGB์ ๋ฌธ์ ์
sRGB(standard Red Green Blue) ์ ๊ณต๊ฐ์ ์ผ๋ฐ์ ์ด๊ณ ๋๋ฆฌ ์ง์๋๋ ์ ๊ณต๊ฐ์ด์ง๋ง, ์ง๊ฐ์ ์ผ๋ก ๊ท ์ผํ์ง ์์ต๋๋ค. ์ฆ, sRGB ์์ ๊ฐ์ ๋์ผํ ๋ณํ๊ฐ ๋ฐ๋์ ์ธ์ง๋๋ ์์์ ๋์ผํ ๋ณํ์ ํด๋นํ๋ ๊ฒ์ ์๋๋๋ค. ๊ฒฐ๊ณผ์ ์ผ๋ก sRGB์์ ๋ณด๊ฐ๋ ๊ทธ๋ผ๋ฐ์ด์ ์ ๋ค์๊ณผ ๊ฐ์ ์ฌ๋ฌ ๊ฐ์ง ๋ฐ๋์งํ์ง ์์ ํจ๊ณผ๋ฅผ ๋ํ๋ผ ์ ์์ต๋๋ค.
- ์ฑ๋ ์ ํ: ์ค๊ฐ ์์์ด ์์ ์์ ๋ฐ ๋ ์์๋ณด๋ค ์ฑ๋๊ฐ ๋ฎ์์ ธ ๊ทธ๋ผ๋ฐ์ด์ ์ด ๋ํ๊ฒ ๋ณด์ผ ์ ์์ต๋๋ค.
- ํ์ ๋ : ํนํ ๋ณด์ ๊ฐ์ ์ ํํ ๋ ๊ทธ๋ผ๋ฐ์ด์ ์ ํ์ ๋๋ ๊ฑฐ์ ํ์์ ๊ฐ๊น์ด ์์์ ๋ ๊ฐ ๋ํ๋ ์ ์์ต๋๋ค.
- ๋ถ๊ท ์ผํ ์ง๊ฐ์ ๋ณํ: ์์ ๋ณํ์จ์ด ๊ทธ๋ผ๋ฐ์ด์ ์ ์ฒด์์ ์ผ๊ด๋์ง ์์ ๋ถ์์ฐ์ค๋ฌ์ด ๋ชจ์์ด ๋ ์ ์์ต๋๋ค.
์ด๋ฌํ ๋ฌธ์ ๋ ๊ด์์ญ ๋์คํ๋ ์ด๋ฅผ ์ฌ์ฉํ ๋ ๋์ฑ ๋๋๋ฌ์ง๊ฒ ๋ํ๋๋ฉฐ, sRGB์ ์ ํ ์ฌํญ์ด ๋์ฑ ๋ถ๋ช ํด์ง๋๋ค.
Oklab ๋ฐ Oklch ์๊ฐ
๋คํํ๋ ์ต์ CSS๋ ์์ ๋ณด๊ฐ์ ์ํด sRGB์ ๋ํ ๋์์ ์ ๊ณตํฉ๋๋ค. ํนํ ์ ๋งํ ๋ ๊ฐ์ง ์ ๊ณต๊ฐ์ Oklab๊ณผ Oklch์ ๋๋ค. ์ด๋ฌํ ์ ๊ณต๊ฐ์ ์ง๊ฐ์ ์ผ๋ก ๊ท ์ผํฉ๋๋ค. ์ฆ, ์์ ๊ฐ์ ๋์ผํ ๋ณํ๊ฐ ์ธ์ง๋๋ ์์์ ๋๋ต์ ์ธ ๋์ผํ ๋ณํ์ ํด๋นํฉ๋๋ค.
- Oklab: ์ธ๊ฐ์ ์๊ฐ์ ๊ธฐ๋ฐํ ์ง๊ฐ์ ์ผ๋ก ๊ท ์ผํ ์ ๊ณต๊ฐ์ ๋๋ค. ์ผ๋ฐ์ ์ธ ์ฉ๋์ ์์ ์กฐ์ ๋ฐ ๋ณด๊ฐ์ ์ ํฉํฉ๋๋ค.
- Oklch: Oklab์ ์ํตํ ๋ฒ์ ์ผ๋ก, ๋ฐ๊ธฐ(L), ์ฑ๋(C, ๋๋ต ์ฑ๋) ๋ฐ ์์กฐ(H) ์ธก๋ฉด์์ ์์์ ๋ํ๋ ๋๋ค. ๋ฐ๋ผ์ ์์กฐ์ ์ฑ๋๋ฅผ ๋ ๋ฆฝ์ ์ผ๋ก ์ ์ดํ๋ ค๋ ๊ทธ๋ผ๋ฐ์ด์ ์ ๋ง๋๋ ๋ฐ ํนํ ์ ์ฉํฉ๋๋ค.
์์ ๋ณด๊ฐ์ Oklab ๋๋ Oklch๋ฅผ ์ฌ์ฉํ๋ฉด ํจ์ฌ ๋ ๋ถ๋๋ฝ๊ณ ์์ํ๋ฉฐ ์ง๊ฐ์ ์ผ๋ก ์ ํํ ๊ทธ๋ผ๋ฐ์ด์ ์ด ์์ฑ๋ฉ๋๋ค.
CSS์์ Oklab ๋ฐ Oklch๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ
๊ทธ๋ผ๋ฐ์ด์
๋ณด๊ฐ์ ์ฌ์ฉํ ์ ๊ณต๊ฐ์ ์ง์ ํ๋ ค๋ฉด color-interpolation-mode ์์ฑ์ ์ฌ์ฉํ ์ ์์ต๋๋ค(๋ธ๋ผ์ฐ์ ์ง์์ด ์์ง ๋ณดํธ์ ์ด์ง ์์ผ๋ฉฐ, ์๋ก์ด ์์ ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ์์์ ๋ช
์์ ์ผ๋ก ์ ์ํ๋ ๋ฐฉ๋ฒ์ด ๋ ์ผ๋ฐ์ ์).:
.gradient {
background: linear-gradient(in oklab, red, blue);
/* Or using newer color functions */
background: linear-gradient(oklab(0.6 0.2 0.8), oklab(0.8 0.5 0.3));
}
๋๋ ํ์ฌ ๋ ์ผ๋ฐ์ ์ผ๋ก ๊ทธ๋ผ๋ฐ์ด์
์ ์ ๋ด์์ oklab() ๋ฐ oklch() ์์ ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ์์์ ์ง์ ์ ์ํ ์ ์์ต๋๋ค.
.gradient {
background: linear-gradient(oklab(0.6 0.2 0.8), oklab(0.8 0.5 0.3));
}
.gradient-circular {
background: radial-gradient(circle, oklch(80% 0.6 200), oklch(60% 0.4 300));
}
.gradient-conic {
background: conic-gradient(from 90deg, oklch(80% 0.6 200), oklch(60% 0.4 300), oklch(80% 0.6 200));
}
๊ตฌ๋ฌธ ๋ถ์์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
oklab(L a b): Oklab ์ ๊ณต๊ฐ์์ ์์์ ์ ์ํฉ๋๋ค.L: ๋ฐ๊ธฐ(0~1)a: ๋ น์-๋นจ๊ฐ์ ์ฑ๋(-0.4~0.4)b: ํ๋์-๋ ธ๋์ ์ฑ๋(-0.4~0.4)oklch(L C H): Oklch ์ ๊ณต๊ฐ์์ ์์์ ์ ์ํฉ๋๋ค.L: ๋ฐ๊ธฐ(0~1 ๋๋ 0%~100%)C: ์ฑ๋(0์์ ์ฝ 0.4๊น์ง, ๋ ๋์ ์๋ ์์)H: ์์กฐ(0~360๋)
์์ ๋ฐ ์ฌ์ฉ ์ฌ๋ก
Oklab๊ณผ Oklch๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ์ ํ์ ๊ทธ๋ผ๋ฐ์ด์ ์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ํ ๋ช ๊ฐ์ง ์ค์ ์์ ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์ ํ ๊ทธ๋ผ๋ฐ์ด์
์ ํ ๊ทธ๋ผ๋ฐ์ด์ ์ ์ง์ ์ ๋ฐ๋ผ ์์ ๊ฐ์ ๋ถ๋๋ฌ์ด ์ ํ์ ๋ง๋ญ๋๋ค. Oklab ๋๋ Oklch๋ฅผ ์ฌ์ฉํ๋ฉด ์ธ์ง๋๋ ๋ถ๋๋ฌ์์ด ํฌ๊ฒ ํฅ์๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด ์์ ํ ๋ง ๊ทธ๋ผ๋ฐ์ด์ ์ ๋ง๋๋ ๊ฒฝ์ฐ:
.sunset-gradient {
background: linear-gradient(to bottom, oklch(90% 0.1 40), oklch(60% 0.3 50), oklch(30% 0.4 30));
height: 200px;
width: 300px;
}
๋ฐฉ์ฌํ ๊ทธ๋ผ๋ฐ์ด์
๋ฐฉ์ฌํ ๊ทธ๋ผ๋ฐ์ด์ ์ ์ค์์ ์์ ์์๋ฉ๋๋ค. Oklch๋ ์๊ฐ์ ์ํฅ์ ์ ์ดํ๊ณ ๋์ฑ ์์ ์ ์ธ ํจ๊ณผ๋ฅผ ๋ด๋ ๋ฐ ํนํ ์ ์ฉํฉ๋๋ค.
.spotlight-gradient {
background: radial-gradient(circle at center, oklch(95% 0.05 200), oklch(50% 0.4 220), oklch(10% 0.05 240));
height: 200px;
width: 300px;
}
์๋ฟํ ๊ทธ๋ผ๋ฐ์ด์
์๋ฟํ ๊ทธ๋ผ๋ฐ์ด์ ์ ์์ํ๊ณผ ๊ฐ์ด ์ค์ฌ์ ์ ์ค์ฌ์ผ๋ก ์์ ์ ํ์ ๋ง๋ญ๋๋ค. ํ์ด ์ฐจํธ, ์์ ์ ํ๊ธฐ ๋๋ ๊ธฐํ ์ํ ์๊ฐ์ ์์๋ฅผ ๋ง๋๋ ๋ฐ ์ ํฉํฉ๋๋ค. Oklch์์ ์์กฐ์ ์ฑ๋๋ฅผ ๊ด๋ฆฌํ๋ ๊ฒ์ด ์น์นํ ์์ญ์ ๋ฐฉ์งํ๋ ๋ฐ ์ค์ํด์ง๋๋ค.
.color-wheel-gradient {
background: conic-gradient(
from 90deg,
oklch(80% 0.5 0), /* Red */
oklch(80% 0.5 60), /* Yellow */
oklch(80% 0.5 120), /* Green */
oklch(80% 0.5 180), /* Cyan */
oklch(80% 0.5 240), /* Blue */
oklch(80% 0.5 300), /* Magenta */
oklch(80% 0.5 0) /* Red (again) */
);
height: 200px;
width: 200px;
border-radius: 50%;
}
๋ฏธ๋ฌํ ๋ฐฐ๊ฒฝ ๋ง๋ค๊ธฐ
๊ทธ๋ผ๋ฐ์ด์ ์ ์ฌ์ฉํ์ฌ ์ง๋์น๊ฒ ์ฐ๋งํ์ง ์์ผ๋ฉด์ ๊น์ด์ ์๊ฐ์ ์ธ ํฅ๋ฏธ๋ฅผ ๋ํ๋ ๋ฏธ๋ฌํ ๋ฐฐ๊ฒฝ ํจ๊ณผ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. Oklab๊ณผ Oklch๋ ๋งค์ฐ ๋ถ๋๋ฌ์ด ์์ ๋ณํ๋ฅผ ๋ง๋ค ์ ์๊ธฐ ๋๋ฌธ์ ์ด๋ฌํ ์ฉ๋์ ์ด์์ ์ ๋๋ค.
.subtle-background {
background: linear-gradient(to bottom, oklab(0.98 0.005 0.005), oklab(0.99 0.002 0.002));
height: 400px;
width: 600px;
}
๋ ๊ฐ์ง ์์ ์ด์: ์์ ์ค์ง์ ๋ฐ ์ ํ
๊ทธ๋ผ๋ฐ์ด์ ์ ๋ ๊ฐ์ง ์์์ผ๋ก๋ง ์ ํ๋์ง ์์ต๋๋ค. ์ฌ๋ฌ ์์ ์ค์ง์ ์ ์ถ๊ฐํ์ฌ ๋์ฑ ๋ณต์กํ๊ณ ๋ฏธ๋ฌํ ์ ํ์ ๋ง๋ค ์ ์์ต๋๋ค. Oklab๊ณผ Oklch๋ ํนํ CSS ์ ํ ๋๋ ์ ๋๋ฉ์ด์ ๊ณผ ๊ฒฐํฉํ ๋ ์ฌ๋ฌ ์ค์ง์ ์ ํตํด ๊ณ์ ์ด์ ์ ์ ๊ณตํฉ๋๋ค.
์๋ฅผ ๋ค์ด Oklch๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ์์กฐ๋ฅผ ์ํํ๋ ๋ถ๋๋ฌ์ด ์ ๋๋ฉ์ด์ ๊ทธ๋ผ๋ฐ์ด์ ์ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ธ ๋ก๋ฉ ํ์๊ธฐ ๋๋ ๋ฐฐ๊ฒฝ ํจ๊ณผ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
.animated-gradient {
background: linear-gradient(to right, oklch(70% 0.4 0), oklch(70% 0.4 120), oklch(70% 0.4 240), oklch(70% 0.4 360));
background-size: 400% 100%;
animation: gradientAnimation 10s linear infinite;
height: 200px;
width: 400px;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
100% {
background-position: 400% 50%;
}
}
ํจ๊ณผ์ ์ธ ๊ทธ๋ผ๋ฐ์ด์ ๋์์ธ์ ์ํ ํ
ํจ๊ณผ์ ์ด๊ณ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ธ ๊ทธ๋ผ๋ฐ์ด์ ์ ๋ง๋๋ ๋ฐ ๋์์ด ๋๋ ๋ช ๊ฐ์ง ํ์ด ์์ต๋๋ค.
- Oklab ๋๋ Oklch ์ฌ์ฉ: ๋ ผ์๋ ๋ฐ์ ๊ฐ์ด ์ด๋ฌํ ์ ๊ณต๊ฐ์ sRGB์ ๋นํด ๋ ๋์ ๊ฒฐ๊ณผ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ์กฐํ๋ก์ด ์์ ์ ํ: ์๋ก ๋ณด์ํ๊ณ ๋ณด๊ธฐ ์ข์ ์๊ฐ์ ํจ๊ณผ๋ฅผ ๋ด๋ ์์์ ์ ํํ์ธ์. ์์ ํ๋ ํธ ๋๊ตฌ๊ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. ์น์ฌ์ดํธ์ ์ ๋ฐ์ ์ธ ๋ธ๋๋ฉ๊ณผ ๋ฏธํ์ ๊ณ ๋ คํ์ธ์.
- ๋ฐ๊ธฐ ๋ฐ ๋๋น ๊ณ ๋ ค: ํนํ ๊ทธ๋ผ๋ฐ์ด์ ์ด ํ ์คํธ์ ๋ฐฐ๊ฒฝ์ผ๋ก ์ฌ์ฉ๋๋ ๊ฒฝ์ฐ ๊ฐ๋ ์ฑ์ ์ ์งํ๊ธฐ ์ํด ๊ทธ๋ผ๋ฐ์ด์ ์ ์์ ๊ฐ์ ์ถฉ๋ถํ ๋๋น๊ฐ ์๋์ง ํ์ธํ์ธ์.
- ๋ฏธ๋ฌํ ๊ทธ๋ผ๋ฐ์ด์ ์ฌ์ฉ: ๋ฐฐ๊ฒฝ ๋ฐ ๊ธฐํ ์ฅ์ ์์์ ๊ฒฝ์ฐ ๋ฏธ๋ฌํ ๊ทธ๋ผ๋ฐ์ด์ ์ด ๊ฐ์ฅ ํจ๊ณผ์ ์ธ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ์ง๋์น๊ฒ ๊ฑฐ์น ๊ฑฐ๋ ๋์ ๊ฑฐ์ฌ๋ฆฌ๋ ์์ ์ ํ์ ํผํ์ธ์.
- ์์ ์ค์ง์ ์คํ: ์ฌ๋ฌ ์์ ์ค์ง์ ์ ์ถ๊ฐํ์ฌ ๋์ฑ ๋ณต์กํ๊ณ ํฅ๋ฏธ๋ก์ด ๊ทธ๋ผ๋ฐ์ด์ ์ ๋ง๋๋ ๊ฒ์ ๋๋ ค์ํ์ง ๋ง์ธ์.
- ๋ค๋ฅธ ์ฅ์น์์ ํ ์คํธ: ๊ทธ๋ผ๋ฐ์ด์ ์ ๋์คํ๋ ์ด์ ๋ฐ๋ผ ๋ค๋ฅด๊ฒ ๋ณด์ผ ์ ์์ต๋๋ค. ๋ค์ํ ์ฅ์น์ ๋ธ๋ผ์ฐ์ ์์ ๊ทธ๋ผ๋ฐ์ด์ ์ ํ ์คํธํ์ฌ ์๋ํ ๋๋ก ๋ณด์ด๋์ง ํ์ธํ์ธ์.
- ์ ๊ทผ์ฑ ๊ณ ๋ ค: ๊ทธ๋ผ๋ฐ์ด์ ์ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ผ ์ ์์ง๋ง ํญ์ ์ ๊ทผ์ฑ์ ์ฐ์ ์ํ์ธ์. ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๋ฅผ ์ํด ์ถฉ๋ถํ ๋๋น๋ฅผ ํ๋ณดํ๊ณ , ์์์ ์ธ์ํ๋ ๋ฐ ์ด๋ ค์์ด ์๋ ์ฌ์ฉ์๋ฅผ ์ํด ๋์ฒด ํ ์คํธ ๋๋ ์คํ์ผ ์ง์ ์ ์ ๊ณตํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
- ์ปจํ ์คํธ ์ดํด: ์ต์์ ๊ทธ๋ผ๋ฐ์ด์ ์ ํ์ ์ปจํ ์คํธ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค. ์์ํ๊ณ ๋๊ธธ์ ๋๋ ๊ทธ๋ผ๋ฐ์ด์ ์ ํด๋ฆญ ์ ๋ ๋ฌธ์ ๋ฒํผ์ ์ ํฉํ ์ ์์ง๋ง, ๋ฏธ๋ฌํ๊ณ ์ฐจ๋ถํ ๊ทธ๋ผ๋ฐ์ด์ ์ ๋ฐฐ๊ฒฝ์ ๋ ์ ํฉํ ์ ์์ต๋๋ค.
๋ธ๋ผ์ฐ์ ์ง์ ๋ฐ ๋์ฒด
Oklab ๋ฐ Oklch์ ๋ํ ์ง์์ ์ผ๋ฐ์ ์ผ๋ก ์ต์ ๋ธ๋ผ์ฐ์ ์์ ์ํธํ์ง๋ง ์ด๋ฌํ ์ ๊ณต๊ฐ์ ์ง์ํ์ง ์๋ ์ด์ ๋ธ๋ผ์ฐ์ ์ ๋ํ ๋์ฒด๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค. sRGB ์์์ ์ฌ์ฉํ์ฌ ๋์ฒด ๊ทธ๋ผ๋ฐ์ด์ ์ ์ ๊ณตํ์ฌ ์ด๋ฅผ ์ํํ ์ ์์ต๋๋ค.
.gradient {
background: linear-gradient(red, blue); /* Fallback for older browsers */
background: linear-gradient(oklab(0.6 0.2 0.8), oklab(0.8 0.5 0.3));
}
Oklab ๋ฐ Oklch๋ฅผ ์ง์ํ๋ ๋ธ๋ผ์ฐ์ ๋ ๋ ๋ฒ์งธ background ์ ์ธ์ ์ฌ์ฉํ๊ณ , ์ด์ ๋ธ๋ผ์ฐ์ ๋ ์ฒซ ๋ฒ์งธ ์ ์ธ์ผ๋ก ๋์ฒด๋ฉ๋๋ค.
๊ธฐ๋ฅ ์ฟผ๋ฆฌ(@supports)๋ฅผ ์ฌ์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ์ง์์ ๋ฐ๋ผ ์กฐ๊ฑด๋ถ๋ก ์คํ์ผ์ ์ ์ฉํ ์๋ ์์ต๋๋ค.
.gradient {
background: linear-gradient(red, blue); /* Fallback */
}
@supports (color: oklab(0 0 0)) {
.gradient {
background: linear-gradient(oklab(0.6 0.2 0.8), oklab(0.8 0.5 0.3));
}
}
๊ทธ๋ผ๋ฐ์ด์ ์ด์: ๋ค๋ฅธ CSS ์์ฑ์ ์์ ๋ณด๊ฐ
์ด ๊ฒ์๋ฌผ์์๋ ๊ทธ๋ผ๋ฐ์ด์ ์ ์ค์ ์ ๋์ง๋ง ์์ ๋ณด๊ฐ ์๋ฆฌ๋ ์ ํ ๋ฐ ์ ๋๋ฉ์ด์ ๊ณผ ๊ฐ์ ๋ค๋ฅธ CSS ์์ฑ์๋ ์ ์ฉ๋ฉ๋๋ค. ์์ ์์ฑ์ ์ ๋๋ฉ์ด์ ํ ๋ Oklab ๋๋ Oklch์ ๊ฐ์ ์ง๊ฐ์ ์ผ๋ก ๊ท ์ผํ ์ ๊ณต๊ฐ์ ์ฌ์ฉํ๋ฉด ๋์ฑ ๋ถ๋๋ฝ๊ณ ์์ฐ์ค๋ฌ์ด ์ ๋๋ฉ์ด์ ์ ๋ง๋ค ์ ์์ต๋๋ค.
๊ฒฐ๋ก
CSS ์์ ๋ณด๊ฐ์ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ด๊ณ ๋ถ๋๋ฌ์ด ๊ทธ๋ผ๋ฐ์ด์ ์ ํ์ ๋ง๋๋ ๊ฐ๋ ฅํ ๊ธฐ์ ์ ๋๋ค. sRGB์ ์ ํ ์ฌํญ์ ์ดํดํ๊ณ Oklab ๋ฐ Oklch์ ๊ฐ์ ๋์ฒด ์ ๊ณต๊ฐ์ ํ์ฉํ๋ฉด ๋์ฑ ์์ํ๊ณ ์์ฐ์ค๋ฝ๊ณ ์ง๊ฐ์ ์ผ๋ก ์ ํํ ๊ทธ๋ผ๋ฐ์ด์ ์ ๋ง๋ค ์ ์์ต๋๋ค. ๋ค์ํ ์์ ์กฐํฉ, ์์ ์ค์ง์ ๋ฐ ๊ทธ๋ผ๋ฐ์ด์ ์ ํ์ ์คํํ์ฌ CSS ๊ทธ๋ผ๋ฐ์ด์ ์ ๋ฌดํํ ๊ฐ๋ฅ์ฑ์ ๋ฐ๊ฒฌํ์ญ์์ค. ๋ธ๋ผ์ฐ์ ์ง์์ ๊ณ ๋ คํ๊ณ ์ด์ ๋ธ๋ผ์ฐ์ ์ ๋ํ ๋์ฒด๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค. ์ ์คํ ๊ณํ๊ณผ ์ธ๋ถ ์ฌํญ์ ๋ํ ์ฃผ์๋ฅผ ๊ธฐ์ธ์ด๋ฉด ๊ทธ๋ผ๋ฐ์ด์ ์ ์ฌ์ฉํ์ฌ ์น์ฌ์ดํธ์ ์๊ฐ์ ๋งค๋ ฅ๊ณผ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.