HSL
HSL/HSLA
์์์ ์์ผ๋ก ์ค์ ๋์ด์์ผ๋ฉฐ, ์์ ๋๋ ์ ๋ฐ๋ผ ์์์ด ์ํ๋๋ค.
Hue
, Saturation
, Lightness
3๊ฐ์ง ์์๋ก ์์์ ๋ํ๋ธ๋ค.
์์์ ๋ค๋ฅธ ํํ ๋ฐฉ์์ธ hex color
, rgb
๋ฐฉ์๋ณด๋ค ์์์ ์ธ์ํ๊ณ ๋ค๋ฃจ๊ธฐ์ ๋ ์ง๊ด์ ์ด๊ณ ์ฝ๊ฒ ๋๊ปด์ง๋ค.

Hue(์์) โ 0๋ ~ 360๋ ๊ฐ์ผ๋ก ์์์ ๋ํ๋ธ๋ค. 0๋๋ ๋นจ๊ฐ์, 120์ ๋ น์, 240์ ํ๋์
Saturation(์ฑ๋) โ ์์์ ์งํ ์ ๋๋ฅผ ๋ํ๋ธ๋ค. 0%(๋ฌด์ฑ์) ~ 100%
Lightness(๋ช ๋) โ ์์์ ๋ฐ์ ์ ๋๋ฅผ ๋ํ๋ธ๋ค. 0%(๊ฒ์ ) ~ 50%(๊ธฐ๋ณธ) ~ 100%(ํฐ์)
Alpha(๋ถํฌ๋ช ๋, optional) โ
HSL
๋์HSLA
๋ฅผ ์ฌ์ฉํ๋ฉด ์์ ๋ถํฌ๋ช ๋๋ฅผ ์ ์ดํ ์ ์๋ค.
body {
background-color: hsl(270, 100%, 50%);
/* alpha(ํฌ๋ช
๋)๋ ์กฐ์ ๊ฐ๋ฅ
background-color: hsla(270, 100%, 50%, 100%)
*/
}
Last updated