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

> Clean Markdown view of GeekNews topic #5738. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=5738](https://news.hada.io/topic?id=5738)
- GeekNews Markdown: [https://news.hada.io/topic/5738.md](https://news.hada.io/topic/5738.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2022-01-13T10:11:29+09:00
- Updated: 2022-01-13T10:11:29+09:00
- Original source: [joshwcomeau.com](https://www.joshwcomeau.com/css/make-beautiful-gradients/)
- Points: 14
- Comments: 1

## Topic Body

- 노란색에서 파란색으로 변화하는 선형 그라디언트를 만들면 가운데에 "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 그라디언트를 생성해서 사용 가능

## Comments



### Comment 8391

- Author: xguru
- Created: 2022-01-13T10:13:31+09:00
- Points: 1

HSL 관련 내용은 예전에 올린 글에 정리해두었습니다.

- HSLuv - 개발자 친화적인 색 공간 https://news.hada.io/topic?id=1691