RGB vs HSL vs OKLCH

최근 업데이트된 테일윈드 V4에 OKLCH 방식이 적용되면서 기존에 사용되던 RGB, HSL과 비교하면서 리서치를 해보았다. 웹 개발자든 디자이너든 이 세 가지 색상 모델의 차이점을 이해하면 더 효율적이고 일관된 디자인 시스템을 구축할 수 있을 것이다

RGB: 디지털 세계의 기본 색상 모델

RGB는 Red, Green, Blue의 약자로, 디지털 디스플레이에서 가장 기본적으로 사용되는 색상 모델이며 각 채널은 0부터 255까지의 값을 가지고, 이 세 가지 색상의 조합으로 다양한 색상을 표현한다

• 직관적인 숫자 표현 - rgb(255, 0, 0)은 빨간색, rgb(0, 255, 0)은 초록색을 의미
• 웹 브라우저 호환성 - 모든 브라우저에서 완벽하게 지원
• 헥스 코드(#RRGGBB) - 웹 개발에서 널리 사용되는 간결한 표기법

하지만 RGB에도 명확한 한계가 있는데 특히 색상을 직관적으로 조정하기 어렵다는 점이고 예를 들어, 특정 빨간색을 더 밝게 만들거나 채도를 낮추려면 세 가지 값을 모두 조정해야 한다. 이는 직관적이지도 않고 색상 간의 일관된 관계를 표현하기도 어렵다

HSL: 인간 친화적인 색상 모델

HSL은 Hue(색조), Saturation(채도), Lightness(명도)를 기반으로 하는 색상 모델이며 RGB보다 인간의 색상 인식 방식에 더 가깝게 설계되어있다

• 직관적인 색상 조정 - 색조는 0~360도로 표현되며, 색상환에서의 위치를 의미
• 채도와 명도 분리 - 색상의 선명함과 밝기를 독립적으로 조절
• 색상 변형 용이 - 같은 색조에서 채도나 명도만 조정하여 일관된 색상 팔레트를 만들기 용이

웹플로우와 같은 노코드 툴에서도 HSL은 매우 유용한데 디자이너가 색상을 조정할 때 RGB보다 훨씬 직관적으로 작업할 수 있기 때문이다. 예를 들어, 버튼에 사용된 파란색의 명도만 약간 낮추고 싶다면 L 값만 조정하면 된다

/* RGB로 표현 시 세 값을 모두 조정해야 함 */
.button-primary { background-color: rgb(41, 121, 255); }
.button-hover { background-color: rgb(36, 106, 224); } /* 어떤 값을 얼마나 조정해야 할까요? */

/* HSL에서는 명도(L)만 조정하면 됨 */
.button-primary { background-color: hsl(217, 100%, 58%); }
.button-hover { background-color: hsl(217, 100%, 51%); } /* 명도만 7% 낮춤 */​

 

 

그러나 HSL도 완벽하지는 않은데 특히 인간이 인식하는 실제 밝기와 HSL의 명도값은 정확히 일치하지 않는다. 예를 들어, 순수한 노란색(hsl(60, 100%, 50%))과 순수한 파란색(hsl(240, 100%, 50%))은 같은 명도값(50%)을 가지지만, 인간이 느끼는 밝기는 노란색이 훨씬 밝게 느껴진다

OKLCH: 인간 지각에 맞춘 현대적 색상 모델

OKLCH는 최근 주목받고 있는 색상 모델로, 인간의 시각 인식에 더욱 가깝게 설계되어있다. OK는 Oklab 색상 공간을 기반으로 하며, L(명도), C(채도), H(색조)로 구성된다

• 인간 지각에 일치하는 명도 - 동일한 L 값을 가진 두 색상은 실제로 비슷한 밝기로 인식
• 넓은 색영역(Color Gamut) - P3나 Rec.2020과 같은 넓은 색영역을 지원
• 색상 선형성 - 색상을 혼합할 때 더 자연스러운 결과
• 접근성 향상 - 대비와 가독성을 더 정확하게 계산

/* 동일한 명도의 색상들 */
.color-blue { color: oklch(65% 0.2 240); }
.color-red { color: oklch(65% 0.2 30); }
.color-green { color: oklch(65% 0.2 140); }

/* 이 색상들은 실제로 비슷한 밝기로 인식됩니다 */

 

이는 접근성 관점에서도 매우 중요한데 배경색과 글자색의 대비를 계산할 때 OKLCH를 사용하면 더 정확한 결과를 얻을 수 있다. 또한 디자인 시스템을 구축할 때 일관된 시각적 위계질서를 만들기 더 쉬워진다

실제 적용: 세 가지 색상 모델 비교

실제 웹 개발 과정에서 이 세 가지 색상 모델을 어떻게 활용할 수 있을지 비교해 보겠습니다.

색상 팔레트 구성

색상 팔레트를 구성할 때 각 모델의 접근 방식

• RGB: 주로 개별 색상 값을 직접 선택하거나 디자인 툴에서 추출. 팔레트의 일관성을 유지하기 어려움
• HSL: 기본 색조를 선택한 후, 채도와 명도를 조정하여 변형. 예를 들어, 브랜드 색상을 기준으로 명도를 달리한 5-10개의 색상을 쉽게 생성
• OKLCH: 명도와 채도를 일정하게 유지하면서 색조만 변경하여 시각적으로 일관된 색상 팔레트 생성이 가능. 특히 다크 모드와 라이트 모드 간의 전환에서 색상의 일관성을 유지하기 용이

브라우저 호환성

실제 적용 시 주의해야 할 점은 브라우저 호환성

• RGB: 모든 브라우저에서 완벽하게 지원
• HSL: 대부분의 모던 브라우저에서 지원
• OKLCH: 2023년부터 주요 브라우저에서 지원하기 시작했지만, 완전한 지원을 위해서는 폴백(fallback) 색상을 제공하는 것이 필요

.brand-button {
  /* 폴백 RGB 색상 */
  background-color: rgb(0, 122, 255);
  /* 현대적인 브라우저를 위한 OKLCH */
  background-color: oklch(65% 0.2 240);
}

결론: 어떤 색상 모델을 선택해야 할까?

각 색상 모델은 고유한 장단점을 가지고 있으며, 프로젝트의 요구사항에 따라 적절한 선택이 달라질 수 있다

• RGB: 단순한 프로젝트나 최대한의 브라우저 호환성이 필요한 경우에 적합
• HSL: 디자이너와 개발자 간의 협업이 중요하거나, 색상 팔레트를 직관적으로 구성해야 하는 프로젝트에 적합하며, 대부분의 웹 프로젝트에서 좋은 선택
• OKLCH: 고급 디자인 시스템, 접근성이 중요한 프로젝트, 또는 최신 색상 기술을 활용하고자 하는 프로젝트에 적합하며, 미래 지향적인 선택이지만, 폴백 방안을 고려

웹플로우와 같은 노코드 툴을 사용하든, 직접 코딩을 하든, 색상 모델의 특성을 이해하는 것은 디자인 결정에 큰 도움이 된다. CSS 변수를 활용하면 색상 시스템을 더욱 체계적으로 관리할 수 있으며, 특히 HSL이나 OKLCH를 사용할 때 그 장점이 극대화된다

 

결국, RGB는 "노코드(no-code)"와 같이 기본적이지만 한계가 있고, HSL은 "로우코드(low-code)"처럼 접근성이 좋으면서도 더 많은 기능을 제공하며, OKLCH는 고급 코딩과 같이 전문적이고 정교한 결과를 제공한다. 색상에 대한 이해가 깊어질수록 더 적절한 색상 모델을 선택하고 활용할 수 있을 것이다