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