그라데이션 예쁘게 만들기

* Make Beautiful Gradients 아티클을 기반으로 작성한 글입니다.

CSS 선형 그라데이션과 gray dead zone

CSS linear-gradient() 함수를 이용하여 노란색(R: 255, G: 255, B: 0)부터 파란색(R: 0, G: 0, B: 255)까지의 선형 그라데이션을 나타내 보면 다음과 같다.

 

<div style="background-image:linear-gradient(to right, #FFFF00, #0000FF);"></div>

이때 그라데이션의 중간 부분이 칙칙한 회색으로 나타나는 것을 볼 수 있다.😨

에릭 케네디(Erik Kennedy)는 이 부분을 'gray dead zone'이라고 부르는데, css 그라데이션을 생성할 때 주의하지 않으면 중간 영역이 채도가 낮은 탁한 색으로 칠해질 수 있다.

gray dead zone이 왜 나타나는지, 그리고 색 이론을 통해 칙칙하지 않은, 아름다운 그라데이션을 만드는 방법은 무엇인지 알아보자.

 

CSS 선형 그라데이션은 어떻게 계산되는가

RGB 색상 체계에서 모든 색깔은 0부터 255까지의 범위를 가지는 빨강, 초록, 파랑의 세 가지 채널을 혼합하여 만들어진다.

3개의 채널 값이 255, 255, 255일 때는 흰색, 각 채널 값이 모두 0일 때는 검은색이 되고, 3개 채널이 모두 동일한 값일 경우 결과는 항상 그레이스케일 색상이 된다.

0/0/0	50/50/50	128/128/128	220/220/220

 

CSS 선형 그라데이션 알고리즘은 RGB 색상 체계에서 빨강, 초록, 파랑의 세 가지 색 채널 각각에 대한 산술평균으로 스펙트럼을 따라 모든 픽셀에 대한 특정 색상 값을 계산한다.

노란색(255/255/0)부터 그라데이션을 통해 이동하면 파란색(0/0/255)이 혼합되기 시작하고, 가운데 영역에 도달하면 노란색의 절반과 파란색의 절반이 섞이게 된다.

즉, 가운데 영역에서는 세 채널 모두 중간 값인 127.5로 수렴하게 되고, 결과적으로 회색으로 나타나게 되는 것이다.

고채도 색상인 순수한 노란색과 순수한 파란색의 중간점이 완전한 무채색인 회색이라는 점이 어색하게 느껴질 수 있다.

색상만 섞이고 채도를 일정하게 유지할 수 있다면 어떨까?

 

대체 색상 모드

RGB 체계 외에도 색깔을 표현하는 많은 다른 방법들이 있다. (원문에 의하면 RGB 체계는 약간 형편없다고 한다. 😅)

다른 색상 체계인 HSL을 알아보자.

HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness)를 나타낸다. 컬러피커로 HSL 모드를 사용해본 적이 있을 것이다.

HSL의 각 값은 다음을 나타낸다.

• 색상은 색상 휠의 각도에 따라 나타나는 색이다.
• 채도는 색이 선명한 정도이다.
• 밝기는 색의 밝고 어두운 정도이다.

HSL이 색에 대해 훨씬 더 직관적으로 생각하는 방법으로 보인다.

만약 RGB 각 채널의 값의 산술평균 대신 H, S, L 각각의 값의 산술평균을 취하면 어떨까?

위와 같이 더이상 gray dead zone은 없다. RGB 각 채널을 혼합하지 않고 HSL 각 값을 혼합하기 때문이다.

시작 색상인 노랑과 끝 색상인 파랑은 동일한 채도와 밝기를 가지므로 색상(HUE)값만 변경된다.

결과적으로, 그라데이션은 효과적으로 컬러 휠을 통과해 가게 된다.

 

이번에는 다양한 채도와 밝기를 가진 두 색상을 이용해 HSL 체계에서 그라데이션을 생성해 보자.

같은 두 색을 이용해 RGB 체계에서 그라데이션을 생성하면 다음과 같다.

두 그라데이션이 상당히 다르게 나타난다.

HSL이 언제나 최고의 색상 모드인 것은 아니다. 인간의 인식을 고려하지 않았기 때문에 지나치게 밝고 선명한 그라데이션을 생성하는 경향이 있다.(like 보노보노 ppt...)

 

HSL 색상 체계에서 아래의 노랑과 파랑은 동일한 밝기를 가지고 있다.

HUE: 60, SAT: 100, LIT: 50	HUE: 240, SAT: 100, LIT: 50

모든 사람이 색깔을 같은 방식으로 보는 것은 아니지만, 대부분의 사람들은 노란색이 같은 LIT 값을 가지고 있음에도 불구하고 파란색보다 훨씬 더 밝게 느낄 것이다. 그러나 HSL은 인간이 색을 어떻게 인식하는지는 고려하지 않는다. HSL 체계는 물리학, 에너지, 파장 등을 기반으로 만들어졌다.

다행히도, 인간의 인식을 고려한 다른 색상 모드들이 있다. 예를 들어 HCL은 HSL과 유사하지만 인간의 시각을 본떠 모델링되었다.

어떤 그라데이션의 색상 스펙트럼이 가장 좋게 느껴지는가? 물론 이것은 어떤 효과를 선호하고 추구하는가에 달려있다.

특정 그라데이션에 가장 적합한 색상을 찾기 위해 다양한 색상 모드로 실험해볼 수 있을 것이다.

 

색 이론을 적용하기

안타깝게도 CSS는 그라데이션 계산에 사용되는 색상 모드를 변경할 수 있는 방법을 제공하지 않는다.

적어도 아직까지는 그라데이션 계산에 HSL 색상을 사용하도록 선택할 수 없다.

CSS image 레벨 4는 색상 보간 방삭을 지정하는 방법을 제공하지만, 브라우저에서 널리 지원되고 있지는 않다.

 

하지만 이 한계를 극복할 방법은 있다.

CSS의 그라데이션을 생성할 때 양 끝단의 두 가지 색만 선택할 수 있는 것은 아니다. 원하는 여러 개의 색상을 전달하여 그라데이션을 생성할 수 있다.

먼저 단계적인 색상을 수동으로 계산한다. chroma.js와 같은 라이브러리를 사용하여 원하는 색상 모드를 사용하고 자바스크립트를 이용하여 이 작업을 수행할 수 있다.

그다음 각 단계에 해당하는 색상 값을 CSS 그라데이션 함수로 전달하면 설정한 단계의 색상에 따른 그라데이션이 생성된다.

 

div {
  background-image: linear-gradient(
    to right,
    #ffff00,
    #fbf138,
    #f6e351,
    #f1d663,
    #ebc873,
    #e5ba80,
    #dead8d,
    #d69f99,
    #ce92a4,
    #c584af,
    #bb77ba,
    #af69c4,
    #a35bce,
    #944dd8,
    #823fe2,
    #6c30ec,
    #4e1ef5,
    #0005ff
  )
}

선형 그라데이션뿐만 아니라 방사형 및 원뿔 그라데이션에도 동일한 트릭을 적용할 수 있다.

 

하지만 여전히 CSS 엔진은 RGB 보간법을 사용하여 제공된 각 색상 사이의 공간을 계산한다.

모든 픽셀에 충분한 색을 전달하지 않는 한 여전히 RGB 보간에 의존하게 될 것이다.

이것은 사실이지만, 다행히 큰 문제는 아니다. 두 가지 색이 서로 매우 비슷하면 어떤 색 모드를 사용하든 거의 같은 그라데이션으로 나타나게 되기 때문이다. 평균을 어떻게 정의하든 크게 다른 평균 값이 얻어지지는 않는다.

예를 들어, 다음은 매우 유사한 두 가지 색을 사용하는 그라데이션이다.

양 끝의 색이 매우 비슷해서 RGB 보간법이 그라데이션을 망치지 않는다.

그래서 사용자 지정 색상 모드를 사용하여 중간 단계의 색상 묶음을 생성하고, 이를 모두 CSS 그레디언트 함수로 전달하면 되는 것이다.

CSS 엔진은 RGB 보간법을 사용하지만 최종 결과에 영향을 미치지는 않는다.

그라데이션 생성기

이것은 CSS에서 사용할 수 있는, 화려하고 아름다운 그라데이션을 생성하는 데 도움을 주는 도구이다.

이 툴은 지금까지 이야기한 색 이론과 트릭, 그리고 색상 분포를 제어하기 위한 easing 곡선 등을 사용한다.

결과가 마음에 들 때까지 컨트롤러를 조정한 후 하단의 CSS 스니펫을 복사하여 사용하면 된다.