CSS 색상 함수: rgb(), hsl(), oklch() 비교

CSS에는 대부분의 개발자가 알고 있는 것보다 색상을 작성하는 방법이 더 많습니다. 유비쿼터스 16진수 코드 외에도 최소 8가지의 고유한 색상 기능이 있습니다. 각 색상 기능에는 서로 다른 모델, 서로 다른 강점, 도달할 수 있는 이유가 다릅니다. 올바른 것을 선택하는 것은 단지 구문 선호도가 아닙니다. 색상에 액세스할 수 있는지, 애니메이션에서 색상이 올바르게 보간되는지, 시각적으로 일관되게 보이는 프로그래밍 방식의 색상 스케일을 생성할 수 있는지 여부를 결정할 수 있습니다.

이 가이드에서는 모든 주요 CSS 색상 기능, 각각의 기능, 그리고 2026년 브라우저 지원 상황이 어떤지 다룹니다.

rgb() 및 rgba()

rgb() 기능은 RGB 색상 모델의 직접적인 CSS 표현입니다. 0부터 255까지의 세 숫자(빨간색, 녹색, 파란색에 각각 하나씩)입니다.

color: rgb(59, 130, 246);     /* A vivid blue */
color: rgb(255, 87, 51);      /* A warm coral red */
color: rgb(0, 0, 0);          /* Black */
color: rgb(255, 255, 255);    /* White */

rgba()는 0(투명)에서 1(불투명)까지의 네 번째 인수를 사용하여 불투명도를 추가하는 역사적 형식입니다.

color: rgba(59, 130, 246, 0.5);   /* Same blue at 50% opacity */

최신 rgb() 구문

CSS Color Level 4(2023년 이후 모든 최신 브라우저에서 완전히 지원됨)에서 rgb()는 알파 채널을 직접 허용하도록 업데이트되어 rgba()를 중복되게 만들었습니다.

/* These are now equivalent */
color: rgba(59, 130, 246, 0.5);
color: rgb(59 130 246 / 0.5);

알파 값 앞에 슬래시가 있는 새로운 공백으로 구분된 구문은 rgb(), hsl() 및 기타 함수에서 작동합니다. 두 가지 형식 모두 작동합니다. 기존 코드베이스에서 두 가지 형식을 모두 볼 수 있습니다.

rgb()를 사용해야 하는 경우

rgb()는 다음과 같은 경우에 가장 유용합니다. - 16진수 색상으로 작업 중이며 원시 채널 값을 표시하려고 합니다. - CSS 사용자 정의 속성을 통해 개별 R, G 또는 B 채널에 애니메이션을 적용해야 합니다. - 프로그래밍 방식으로 색상을 생성하고 있으며 소스 데이터가 이미 RGB에 있습니다.

약점은 인간의 직관이 RGB에 잘 매핑되지 않는다는 것입니다. rgb(107, 142, 35)를 보고 올리브 녹색을 얻을 것이라는 것을 아는 것은 어렵습니다. 디자인 작업의 경우 HSL 또는 OKLCH가 더 직관적입니다.

hsl() 및 hsla()

HSL은 색조(Hue), 채도(Saturation), 밝기(Lightness)를 의미합니다. 색상을 큐브가 아닌 원통에 매핑합니다. 이는 디자이너가 실제로 색상에 대해 생각하는 방식에 훨씬 더 가깝습니다.

• 색상: 색상환의 0~360도(0 = 빨간색, 120 = 녹색, 240 = 파란색)
• 채도: 0%(회색, 색상 없음) ~ 100%(완전히 선명함)
• 밝기: 0%(검은색) ~ 100%(흰색), 50%가 "순수한" 색상입니다.

color: hsl(217, 91%, 60%);    /* A vivid blue */
color: hsl(9, 100%, 60%);     /* A warm coral red */
color: hsl(80, 60%, 35%);     /* Olive green */
color: hsl(0, 0%, 50%);       /* Pure medium gray */

hsla()는 rgb() / rgba() 패턴과 동일한 알파 채널을 추가합니다.

color: hsla(217, 91%, 60%, 0.5);  /* Blue at 50% opacity */
color: hsl(217 91% 60% / 0.5);   /* Same, using modern syntax */

hsl()이 웹 개발을 변화시킨 이유

hsl()가 CSS 2.1(2011)에 출시되기 전에는 CSS에서 색상의 밝기나 채도를 변경하려면 16진수 코드나 RGB 값으로 돌아가서 처음부터 다시 계산해야 했습니다. hsl()를 사용하면 색상에 일관된 변형을 간단하게 만들 수 있습니다.

:root {
  --blue-h: 217;
  --blue-s: 91%;
}

.btn {
  background: hsl(var(--blue-h), var(--blue-s), 60%);    /* Base */
}
.btn:hover {
  background: hsl(var(--blue-h), var(--blue-s), 50%);    /* Darker on hover */
}
.btn:active {
  background: hsl(var(--blue-h), var(--blue-s), 40%);    /* Even darker */
}

hsl()의 문제점

직관적인 매력에도 불구하고 HSL에는 지각적으로 균일하지 않습니다라는 근본적인 결함이 있습니다. HSL의 동일한 수치 단계는 사람의 눈에 똑같이 다르게 보이는 색상을 생성하지 않습니다.

가장 뚜렷한 증상은 노란색입니다. 순수한 HSL 노란색(hsl(60, 100%, 50%))은 순수한 HSL 파란색(hsl(240, 100%, 50%))보다 채도와 밝기 값이 동일하더라도 훨씬 더 밝고 강렬하게 나타납니다. 이로 인해 서로 다른 색상이 시각적으로 균형 잡힌 느낌을 주는 색상 스케일을 구축하기가 어렵습니다.

이러한 이유로 현대 CSS 색상 작업은 점점 OKLCH로 이동하고 있습니다.

lab() 및 lch()

CSS 색상 레벨 4에서는 CIE L*a*b* 색상 공간을 기반으로 하는 lab() 및 lch()를 도입했습니다. 이는 색상 과학자가 지각적으로 균일하도록 설계했습니다. 동일한 수치 차이는 동일한 인지된 색상 차이에 해당합니다.

연구실()

lab()는 세 개의 축을 사용합니다. - L: 0(검은색)부터 100(흰색)까지의 밝기 - a: 녹색-빨간색 축의 위치(음수 = 녹색, 양수 = 빨간색) - b: 파란색-노란색 축의 위치(음수 = 파란색, 양수 = 노란색)

color: lab(53 -5 -60);    /* A vivid blue */
color: lab(55 60 40);     /* A warm red-orange */
color: lab(80 -15 20);    /* Soft olive/lime */

a 및 b 축은 색상 정도에 비해 직관적이지 않으므로 lab()를 손으로 작성하기가 다소 어렵습니다. 이는 프로그래밍 방식으로 가장 유용합니다. 예를 들어 지각적으로 균일한 그라데이션이나 명암비를 계산할 때입니다.

lch()

lch()는 밝기, 채도(채도와 유사) 및 색조를 사용하여 Lab을 원통형으로 재구성한 것입니다.

color: lch(53 60 265);    /* Vivid blue (L=53, C=60, H=265°) */
color: lch(60 55 25);     /* Warm orange-red */

lch()의 색상은 hsl()의 색상과 대략적으로(동일하지는 않지만) 매핑됩니다. 주요 차이점은 lch()의 밝기와 채도가 지각적으로 의미가 있다는 것입니다. lch(70 40 X)의 두 색상은 색상에 관계없이 똑같이 밝게 보이지만 hsl()에서는 그렇지 않습니다.

lab()과 lch()를 사용해야 하는 경우

이 기능은 다음과 같은 경우에 탁월합니다. - 인지된 대비를 예측할 수 있는 접근 가능한 색상 쌍 생성 - 색상의 가중치가 동일하게 느껴지는 데이터 시각화 팔레트 구축 - 부드럽고 자연스러운 그라데이션 만들기

대부분의 새로운 작업에서 더 정확하고 더 나은 툴링 지원을 제공하는 oklch()로 대체되었습니다.

oklch()

OKLCH는 CSS 색상 사양에 대한 최신 기술입니다. 이는 Björn Ottosson이 2020년에 개발한 Oklab 색상 공간을 기반으로 하며, 특히 CIE Lab이 제대로 처리하지 못하는 파란색과 보라색 색상의 경우 더 나은 지각 균일성으로 CIE Lab을 개선합니다.

이 함수는 세 개의 값과 선택적 알파를 사용합니다.

• L: 0(검은색)부터 1(흰색)까지의 밝기
• C: 채도(색상 강도), 일반적으로 0~0.4
• H: 색조 각도(도), 0~360

color: oklch(0.62 0.19 250);    /* Vivid blue */
color: oklch(0.65 0.22 25);     /* Warm red-orange */
color: oklch(0.85 0.08 130);    /* Soft green */
color: oklch(0.62 0.19 250 / 0.5); /* Blue at 50% opacity */

oklch()가 중요한 이유

예측 가능한 밝기. OKLCH 밝기는 인지적으로 균일하기 때문에 L 값이 동일한 두 색상은 색상에 관계없이 동일하게 밝게 보입니다. 이렇게 하면 모든 색조가 균형 잡힌 느낌을 주는 색상 팔레트를 구축하는 것이 간단해집니다.

/* All of these look equally "medium weight" in OKLCH */
--red:    oklch(0.65 0.25 15);
--green:  oklch(0.65 0.18 145);
--blue:   oklch(0.65 0.19 250);
--yellow: oklch(0.65 0.15 90);

hsl()로 이를 달성해 보십시오. 노란색이 파란색보다 눈에 띄게 밝게 보입니다.

넓은 색역 액세스. OKLCH는 sRGB 색역 밖의 색상을 표현할 수 있어 디스플레이 P3 이상을 지원하는 최신 디스플레이(iPhone, MacBook Pro, 대부분의 2023+ 노트북)에서 사용할 수 있는 생생한 색상에 액세스할 수 있습니다. 16진수 코드 및 rgb()는 sRGB로 제한됩니다.

/* This vivid green is only possible with oklch — outside sRGB */
color: oklch(0.72 0.30 145);

브라우저는 색상 영역을 벗어난 OKLCH 색상을 표시할 수 없는 디스플레이에 대해 사용 가능한 가장 가까운 색상으로 자동으로 매핑하므로 이제 넓은 영역 색상을 사용하는 것이 안전합니다.

향상된 그라데이션 보간. OKLCH에서 보간된(애니메이션 또는 그라데이션) 색상은 인지적으로 중간 색상을 통과합니다. 보색 간의 RGB 그라데이션에 나타나는 악명 높은 "회색 진흙 중간"은 OKLCH에서는 발생하지 않습니다.

디자인 시스템의 oklch()

점점 더 많은 디자인 시스템과 CSS 프레임워크가 색상 스케일에 OKLCH를 채택하고 있습니다. 2025년 이후 처음부터 디자인 시스템을 구축한다면 OKLCH가 추천하는 출발점이다. 색상 변환기를 사용하여 기존 16진수 코드를 해당 OKLCH 코드로 변환합니다.

색상 혼합()

color-mix()는 지정된 색상 공간과 비율로 두 가지 색상을 혼합하는 최신 CSS 기능입니다.

/* Mix blue and red equally in oklch */
color: color-mix(in oklch, #3B82F6 50%, #EF4444 50%);

/* Create a lighter tint: mix with white */
color: color-mix(in oklch, oklch(0.62 0.19 250) 60%, white);

/* Create a darker shade: mix with black */
color: color-mix(in oklch, oklch(0.62 0.19 250) 70%, black);

in oklch(또는 in srgb, in hsl 등)는 혼합 계산에 사용되는 색 공간을 지정하며 이는 결과에 큰 영향을 미칩니다.

혼합에 색상 공간이 중요한 이유

sRGB를 혼합하면 보색 사이의 중간점이 흐릿하고 채도가 떨어지는 경우가 많습니다. OKLCH의 혼합은 지각적으로 생생한 중간 색상을 생성합니다. 왜냐하면 OKLCH 보간은 인간의 색상 인식과 동일한 경로를 따르기 때문입니다.

/* Blending blue and yellow in sRGB often produces a dull olive/gray */
color: color-mix(in srgb, blue, yellow);

/* Blending in oklch produces a vivid green intermediate */
color: color-mix(in oklch, blue, yellow);

color-mix()의 실제 사용 사례

테마 변형 생성. 브랜드 색상의 5가지 색상 변형을 하드코딩하는 대신 동적으로 생성합니다.

:root {
  --brand: oklch(0.55 0.22 250);
  --brand-light: color-mix(in oklch, var(--brand) 50%, white);
  --brand-lighter: color-mix(in oklch, var(--brand) 25%, white);
  --brand-dark: color-mix(in oklch, var(--brand) 80%, black);
}

다크 모드 적응. 어두운 베이스와 혼합하여 다크 모드 표면 색상을 자동으로 파생합니다.

@media (prefers-color-scheme: dark) {
  --surface: color-mix(in oklch, var(--brand) 15%, #121212);
}

실제 투명도가 없는 불투명도. 색상을 흰색 또는 특정 배경색과 혼합하면 레이어를 합성하지 않고도 불투명도를 시뮬레이션할 수 있습니다.

/* Simulates rgba(59, 130, 246, 0.2) on white background */
color: color-mix(in srgb, #3B82F6 20%, white);

2026년 브라우저 지원

2026년 초부터 oklch() 및 color-mix()는 현재의 모든 주요 브라우저에서 지원됩니다. 가장 큰 우려 사항은 오래된 브라우저 정책을 사용하는 오래된 모바일 브라우저나 기업 환경을 사용하는 사용자입니다. 최대 호환성이 중요한 프로덕션 작업의 경우 최신 구문 앞에 16진수 또는 rgb() 대체를 제공하세요.

.element {
  /* Fallback for older browsers */
  color: #3B82F6;
  /* Progressive enhancement */
  color: oklch(0.62 0.19 250);
}

올바른 CSS 색상 기능 선택

주요 내용

• rgb() 및 hsl()는 범용 브라우저를 지원하는 확립된 표준입니다. 최신 공백으로 구분된 구문(rgb(R G B / alpha))은 rgba()와 hsla()를 중복되게 만듭니다.
• hsl()는 디자인 작업에 있어 rgb()보다 직관적이지만 지각적으로 균일하지 않습니다. 동일한 수치 단계는 특히 색상에 따라 불평등한 지각 변화를 생성합니다.
• lab() 및 lch()는 CSS에 지각적 통일성을 도입했지만 더 정확한 oklch()로 대체되었습니다.
• oklch()는 현대 표준입니다. 지각적으로 균일하고 넓은 범위를 지원하며 그라데이션, 애니메이션 및 디자인 시스템 색상 스케일에 탁월합니다.
• color-mix()는 CSS에서 직접 동적 색상 생성을 가능하게 하며 테마, 색조, 음영 및 어두운 모드 적응에 유용합니다.
• 색상 변환기를 사용하여 기존 16진수 코드를 oklch() 또는 기타 형식으로 변환합니다.
• 최대 브라우저 호환성을 위해 oklch() 또는 color-mix() 앞에 대체 16진수 또는 rgb() 값을 제공하세요.