"회색 데드 존" 없는 아름다운 CSS 그라데이션 만들기

- 노란색에서 파란색으로 변화하는 선형 그라디언트를 만들면 가운데에 "gray dead zone"이 생김
ㅤ→ CSS linear-gradient 알고리듬은 RGB의 수학적인 평균을 내어 픽셀의 색상 값을 결정하기 때문
ㅤ→ RGB 컬러공간에서는 RGB값이 모두 같으면 항상 그레이스케일 색상이 됨
- HSL (Hue / Saturation / Lightness) 로 평균을 내도록 하면 회색데드존이 생기지 않음
- 하지만 단순히 HSL로 그라디언트를 만들면 "인간의 인식을 고려하지 않기 때문"에, 너무 밝고 Vivid하게 보임
ㅤ→ 같은 밝기의 색이지만 노란색이 더 밝게 느껴짐
- 그래서 인간의 시각을 가지고 모델링한 HCL 같은 모드를 쓰면 더 좋을 수 있음

- 문제는 CSS에선 아직 HSL/HCL같은 색상 모드를 지정하는 기능을 제공하지 않음
ㅤ→ CSS Gradient는 2가지 색상으로 고정되어 있지 않으므로, 10개 이상의 여러 색상을 지정하는 방법으로 해결할 수 있음
- 같이 공개하는 Gradient Generator 로 LRGB/HSL/HSV/HCL 등의 컬러모드를 이용한 CSS 그라디언트를 생성해서 사용 가능

[xguru]

HSL 관련 내용은 예전에 올린 글에 정리해두었습니다.
- HSLuv - 개발자 친화적인 색 공간 https://news.hada.io/topic?id=1691