최신 CSS 색상 함수: rgba(), hsl(), oklch() 그리고 그 이상

최신 CSS 색상 함수: rgba(), hsl(), oklch() 그리고 그 이상

CSS 색상 함수는 극적으로 발전했습니다. 한때 hex, rgb(), hsl() 중에서 선택하던 것이 이제는 개발자에게 색상 표현, 보간 및 접근성에 대한 전례 없는 제어권을 제공하는 풍부한 색 공간과 조작 함수의 생태계가 되었습니다.

이 가이드는 2026년에 사용 가능한 모든 주요 CSS 색상 함수를 익숙한 것부터 최첨단까지 다룹니다.

RGB와 RGBA: 주력 함수

rgb() 함수는 빨강-초록-파랑 가산 색상 모델을 사용하여 색상을 정의합니다. CSS1부터 CSS의 일부였으며, 지금까지 만들어진 모든 브라우저에서 지원됩니다.

/* 레거시 쉼표 구분 구문 */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* 최신 공백 구분 구문 (CSS Color Level 4) */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);

/* 백분율 값 */
color: rgb(100% 0% 0%);

최신 RGB의 주요 변경 사항

CSS Color Level 4는 두 가지 중요한 개선 사항을 도입했습니다:

1. 쉼표 구분 대신 공백 구분 — rgb() 함수가 이제 공백이나 슬래시로 구분된 값을 허용합니다
2. 통합된 알파 구문 — rgba() 별칭은 더 이상 사용되지 않지만(여전히 지원됨). rgb()가 이제 기본적으로 알파 채널을 허용합니다

이 최신 구문은 2020년 이후 출시된 모든 브라우저에서 지원됩니다. 새 프로젝트에서는 최신 구문을 사용하고 rgba() 별칭을 완전히 건너뛰세요.

RGB 채널

각 RGB 채널은 다음을 허용합니다:

• 0에서 255까지의 정수
• 0%에서 100%까지의 백분율
• 누락된 채널에 대한 none 키워드 (CSS Color Level 4)

none 키워드는 색상을 보간할 때 유용합니다 — 브라우저에게 특정 채널을 보간하지 않도록 지시합니다.

HSL과 HSLA: 직관적인 색상 제어

HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)를 의미합니다. 인간이 색상에 대해 생각하는 방식에 자연스럽게 매핑되는 원통형 좌표계를 사용합니다.

/* H는 색상 각도(0-360), S는 채도(0-100%), L은 명도(0-100%) */
color: hsl(0 100% 50%);        /* 순수 빨강 */
color: hsl(0 100% 50% / 0.5);  /* 50% 불투명도의 빨강 */

/* 단위가 있는 색상 각도 */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

색상 각도 참조

| 색상 | 색상명 | Hex | |------|----------|----------| | 0 | 빨강 | #FF0000 | | 30 | 주황 | #FF8000 | | 60 | 노랑 | #FFFF00 | | 120 | 초록 | #00FF00 | | 180 | 청록 | #00FFFF | | 240 | 파랑 | #0000FF | | 300 | 자홍 | #FF00FF |

HSL은 명도나 채도 채널만 변경해도 일관된 시각적 변형을 생성하므로 프로그래밍 방식으로 색상 팔레트를 생성하는 데 가장 적합한 선택입니다.

HWB: 흰색과 검정색으로 혼합하기

HWB(색상, 백색도, 흑색도)는 HSL의 더 직관적인 대안입니다. 색상을 선택한 다음, 백색도와 흑색도를 추가하여 틴트와 셰이드를 만듭니다.

color: hwb(0 0% 0%);    /* 순수 빨강 */
color: hwb(0 40% 0%);   /* 틴트된 빨강 (흰색 추가) */
color: hwb(0 0% 40%);   /* 셰이드된 빨강 (검정 추가) */
color: hwb(0 20% 20%);  /* 톤 (흰색 + 검정) */

HWB는 한 가지 특정 사용 사례에서 HSL보다 간단합니다: 브랜드 색상의 틴트와 셰이드 변형을 만드는 것입니다. 채도 곡선에 대해 생각할 필요가 전혀 없습니다 — 그저 흰색이나 검정을 추가하기만 하면 됩니다.

브라우저 지원: HWB는 모든 최신 브라우저에서 지원됩니다 (Chrome 101+, Firefox 96+, Safari 15+).

LAB와 LCH: 지각적으로 균일한 공간

LAB(명도, A축, B축)와 LCH(명도, 채도, 색상)는 지각적으로 균일한 색 공간입니다. 이는 두 색상 값 사이의 유클리드 거리가 인지되는 시각적 차이와 일치한다는 것을 의미합니다 — RGB와 HSL은 이를 할 수 없습니다.

color: lab(50% 50 0);        /* 중간 빨강 */
color: lch(50% 50 0);        /* 원통형 형태의 동일 색상 */

지각적 균일성이 중요한 이유:

• 그라데이션 — LAB 또는 LCH에서 보간하면 RGB 그라데이션이 생성하는 칙칙한 "진흙 영역" 없이 부드럽고 자연스러운 전환이 생성됩니다
• 색상 차이 측정 — Delta E(지각적 차이 측정)는 LAB 공간에서 의미가 있습니다
• 접근성 — 지각적 균일성은 색각 결함이 있는 사용자가 색상을 어떻게 인식할지 예측하는 데 도움이 됩니다

제한 사항: LAB와 LCH는 sRGB 영역을 벗어난 색상을 생성할 수 있습니다. 이러한 색상은 sRGB 화면에서 표시될 때 잘리지만, 더 넓은 영역의 디스플레이(DCI-P3, Rec. 2020)에서는 접근 가능합니다.

브라우저 지원: Chrome 111+, Firefox 113+, Safari 15+에서 지원됩니다. IE 또는 레거시 Edge 지원은 없습니다.

OKLAB와 OKLCH: 최신 지각적 표준

OKLCH는 Bjorn Ottosson이 개발한 LCH의 개선된 버전입니다. LCH의 지각적 비균일성, 특히 파란색 색조에 대한 문제를 수정합니다. OKLCH는 2025-2026년에 새로운 CSS 프로젝트의 권장 기본 색 공간이 되었습니다.

color: oklch(60% 0.2 30);
/* 명도: 0-100%, 채도: 0-~0.4, 색상: 0-360 */

OKLCH가 CSS에 가장 적합한 색 공간인 이유

1. 최고의 지각적 균일성 — 동일한 수치 변화가 모든 색조에서 동일한 시각적 변화를 생성합니다
2. 예측 가능한 명도 — 동일한 명도 값의 색상이 실제로 동등하게 밝게 보입니다
3. 칙칙한 그라데이션 없음 — 전체 색조 범위에서 보간이 깨끗하게 유지됩니다
4. 기본적으로 sRGB-safe — 대부분의 OKLCH 값이 영역 내 sRGB 색상을 생성합니다
5. 직관적인 채널 — HSL과 비슷하지만 실제 지각적 정확성을 갖춤

OKLCH 실제 사용

/* OKLCH로 균형 잡힌 색상 스케일 만들기 */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

각 단계가 대략 동일한 명도 값(20 퍼센트 포인트)만큼 변경되는 것에 주목하세요. OKLCH는 지각적으로 균일하기 때문에 이러한 단계는 인간의 눈에 균등한 간격으로 보입니다 — HSL로는 달성하기 어려운 것입니다.

브라우저 지원: OKLCH는 Chrome 111+, Firefox 113+, Safari 15.4+에서 지원됩니다. 가장 권장되는 최신 색 공간으로 빠르게 자리 잡았습니다.

Color-Mix: CSS에서 색상 혼합하기

color-mix() 함수는 지정된 색 공간에서 두 색상을 혼합합니다:

/* sRGB에서 빨강과 파랑을 동일하게 혼합 */
color: color-mix(in srgb, red, blue);

/* 30% 기본 색상, 70% 흰색 — 틴트 */
color: color-mix(in oklch, var(--primary) 30%, white);

/* 부드러운 결과를 위해 지각적 색 공간으로 혼합 */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

in <color-space> 매개변수를 사용하면 보간 공간을 제어할 수 있습니다. 대부분의 경우 in oklch가 최상의 시각적 결과를 생성합니다.

사용 사례:

• 전처리기 함수 없이 틴트와 셰이드 만들기
• 단일 색상 토큰에서 구성 요소 변형 구축
• 호버 및 활성 상태를 동적으로 생성
• 단일 함수로 그라데이션과 유사한 효과 만들기

상대 색상 구문: 기존 색상 수정하기

CSS Color Level 4는 개별 채널을 수정하여 기존 색상에서 새로운 색상을 파생할 수 있게 합니다:

--primary: #3366cc;

/* OKLCH 채널 사용 */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* HSL 채널 사용 */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

from <color> 키워드는 원본 색상의 채널을 대상 함수의 채널로 언팩하며, 그 후 산술 연산으로 조정할 수 있습니다.

색 공간별 채널 키워드

각 색 공간은 특정 채널 키워드를 노출합니다:

| 색 공간 | 키워드 | |----------|---------------------------------| | rgb() | r, g, b, alpha | | hsl() | h, s, l, alpha | | hwb() | h, w, b, alpha | | lch() | l, c, h, alpha | | oklch()| l, c, h, alpha | | lab() | l, a, b, alpha | | oklab()| l, a, b, alpha |

브라우저 지원 개요 (2026)

| 함수 | Chrome | Firefox | Safari | Edge | |------|--------|---------|--------|------| | rgb() / hsl() | 모두 | 모두 | 모두 | 모두 | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | 상대 색상 구문 | 111+ | 113+ | 16.2+ | 111+ |

모든 최신 색상 함수는 Internet Explorer 지원이 필요하지 않은 프로젝트에 대해 2026년에 안전하게 사용할 수 있습니다. 더 넓은 호환성을 위해서는 최신 구문을 hex 또는 레거시 rgb()로 변환하는 빌드 단계를 사용하세요.

실용적 권장 사항

• 기존 프로젝트용 — HSL은 여전히 가독성과 기능성의 최상의 균형을 유지합니다
• 새 프로젝트용 — 지각적 정확성을 위해 OKLCH를 기본 색 공간으로 사용하세요
• 그라데이션용 — 칙칙한 전환을 피하기 위해 항상 OKLCH에서 보간하세요
• 디자인 시스템용 — 기본 색상을 OKLCH에 저장하고, color-mix() 또는 상대 구문으로 변형을 생성하세요
• canvas/WebGL용 — 렌더링 파이프라인에 네이티브인 RGB를 사용하세요

결론

최신 CSS 색상 함수는 웹에서 색상으로 할 수 있는 일을 변화시켰습니다. OKLCH는 색상 시스템 디자인을 예측 가능하게 만드는 지각적 균일성을 제공합니다. color-mix()와 상대 색상 구문은 전처리기 색상 함수의 필요성을 없앱니다. 이러한 도구들은 함께 웹 개발자에게 디자인 도구가 수년간 제공해 온 것과 동일한 색상 기능을 — 이제 브라우저에서 직접 제공합니다.

OKLCH, LAB, HWB 및 클래식 HEX/RGB/HSL을 포함한 모든 최신 CSS 색상 형식 간에 변환하려면 무료 온라인 색상 변환기를 사용하세요.