CSS 색상 모듈 레벨 4

1. 소개

이 섹션은 규범적이지 않습니다.

이 모듈은 작성자가 요소의 텍스트 콘텐츠의 전경색과 불투명도를 지정할 수 있도록 하는 CSS 속성을 설명합니다. 또한 CSS <color> 값 유형을 자세히 설명합니다.

이 모듈은 CSS1, CSS2, 및 CSS Color 3에 이미 존재하는 색상 관련 속성과 값을 정의할 뿐만 아니라, 새로운 속성과 값도 정의합니다.

특히, sRGB 이외의 색상 공간에서 색상을 지정할 수 있도록 합니다. 이전에는 sRGB 색역 외부의 더 포화된 색상을 CSS에서 사용할 수 없었으며, 디스플레이 장치가 이를 지원하더라도 사용할 수 없었습니다.

초안 구현 보고서를 사용할 수 있습니다.

1.1. 값 정의

이 명세서는 CSS 속성 정의 관례를 [CSS2]에서 따르며, 값 정의 구문을 [CSS-VALUES-3]에서 사용합니다. 이 명세서에 정의되지 않은 값 타입은 CSS 값과 단위 [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 조합으로 이러한 값 타입의 정의가 확장될 수 있습니다.

정의에 나열된 속성별 값 외에도, 이 명세에서 정의된 모든 속성은 CSS-wide 키워드를 속성 값으로 허용합니다. 가독성을 위해 이를 명시적으로 반복하지 않았습니다.

2. 색상 용어

색상은 빛이나 빛으로 조명된 물체에 대한 인간의 시각적 인식에 대한 정의(숫자 또는 텍스트)입니다. 인간 색각에 대한 객관적 연구는 색채학이라고 합니다.

물리적 물체의 색상은 각 가시 파장에서 반사되는 빛의 양과 (동일하게, 각 파장에서의 빛의 양) 조명을 제공하는 빛의 실제 색상에 따라 달라집니다. 분광광도계에 의해 측정됩니다.

빛을 방출하는 물체의 색상 (컴퓨터 화면의 색상을 포함)은 각 가시 파장에서 방출되는 빛의 양에 따라 달라집니다. 분광복사계에 의해 측정됩니다.

두 물체가 스펙트럼이 다르지만, 여전히 동일한 물리적 감각을 만들어내는 경우, 우리는 그것들이 동일한 색상을 가지고 있다고 말합니다. 스펙트럼을 CIE XYZ (세 숫자)로 변환하여 두 색상이 동일한지 계산할 수 있습니다.

색상 공간은 기본 색채학적 모델과 관련하여 색상을 체계적으로 조직하는 것입니다. 이를 통해 해당 색상 공간 내의 모든 색상에 대해 명확하고 객관적으로 측정 가능한 의미를 제공합니다. 이는 동일한 색상이 여러 색상 공간에서 표현되거나, 한 색상 공간에서 다른 색상 공간으로 변환되더라도 여전히 동일하게 보일 수 있음을 의미합니다.

 color(sRGB 0.41587 0.503670 0.36664);
 color(display-p3 0.43313 0.50108 0.37950);
 color(a98-rgb 0.44091 0.49971 0.37408);
 color(prophoto-rgb 0.36589 0.41717 0.31333);
 color(rec2020 0.42210 0.47580 0.35605);

가산 색상 공간은 좌표계가 광 강도에 대해 선형인 공간을 의미합니다. CIE XYZ 색상 공간은 가산 색상 공간입니다. XYZ의 Y 구성 요소는 휘도이며, 단위 면적당 광 강도, 즉 '얼마나 밝은지'를 나타냅니다. 휘도는 cd/m²(칸델라 매 제곱미터)로 측정되며, 흔히 니트(nits)라고도 합니다.

가산 색상 공간에서는 색상 혼합을 정확히 예측할 수 있는 계산이 가능합니다. 대부분의 RGB 공간은 가산적이지 않은데, 이는 구성 요소들이 감마로 인코딩되었기 때문입니다. 이 감마 인코딩을 해제하면 선형 조명 값이 생성됩니다.

색도는 밝기 요소가 제거된 색상 측정입니다. 위에서 언급된 동일한 조명 예에서, 하나의 조명이 가진 u',v' 색도는 (0.2537, 0.5268)이며, 두 조명이 있을 때에도 색도는 동일합니다 (같은 색상이지만, 더 밝아졌을 뿐입니다).

색도는 가산적이므로, 혼합의 색도(그러나 결과 밝기는 제외)를 정확하게 예측할 수 있습니다. 색도는 2차원이기 때문에, 색도 혼합을 예측하기 위해 색도 다이어그램에 쉽게 표현할 수 있습니다. 임의의 두 색상을 혼합할 수 있으며, 결과 색상은 다이어그램에서 두 색상을 연결하는 선 위에 위치하게 됩니다. 세 가지 색상은 평면을 형성하며, 결과 색상은 다이어그램에서 이들이 형성하는 삼각형 내부에 위치하게 됩니다.

따라서 RGB 색상 공간이 선형화되면 가산적이 되며, 빨강, 초록, 파랑 기본 색상의 색도와 백색점 (모든 기본 색상이 최대 강도로 결합될 때 형성되는 색상)의 색도로 색역이 정의됩니다.

대부분의 색상 공간은 몇 가지 주광을 모사한 백색점 중 하나를 사용하며, 이는 해당 블랙바디 라디에이터의 상관 색온도(CCT) [Understanding_CCT]로 명명됩니다. 예를 들어, D65는 상관 색온도가 6500 켈빈 (실제로는 6504, 플랑크 상수 값이 색상이 처음 정의된 이후 변경되었기 때문)인 주광 백색점입니다.

누적 왕복 오류를 방지하기 위해, 동일한 색도 값이 계산의 모든 곳에서 일관되게 사용되는 것이 중요합니다. 따라서, 최대 호환성을 위해, 이 명세에서는 다음 두 가지 표준 주광 모사 백색점이 정의됩니다:

측정된 물리적 특성 (사용된 기본 색상의 색도와, 주어진 입력 세트에 대한 반응으로 생성된 색상 등)이 색상 공간 또는 색상 생성 장치에 대해 알려진 경우, 이를 특성화(characterized)되었다고 합니다.

추가로 장치가 백색점, 회색의 중립성, 톤 응답의 예측 가능성과 일관성 같은 보정 목표를 충족하도록 조정된 경우, 이를 보정(calibrated)되었다고 합니다.

실제 물리적 장치는 아직 인간 눈이 볼 수 있는 모든 색상을 생성할 수 없습니다. 특정 장치가 생성할 수 있는 색상의 범위를 색역(gamut)이라 하며, (감마와 혼동하지 마십시오). 색역이 제한된 장치는 무지개에서 볼 수 있는 것과 같은 매우 포화된 색상을 생성할 수 없습니다.

다른 색상 공간의 색역은 표현할 수 있는 색상의 부피(큐빅 Lab 단위)를 비교하여 확인할 수 있습니다. 다음 표는 CSS에서 사용할 수 있는 미리 정의된 색상 공간을 조사합니다.

CSS의 색상은 유효하지 않은 색상이거나, 각 구문 형식에 대해 아래에 설명된 대로, 유효한 색상입니다.

유효하지 않은 색상이 아닌 모든 색상은 유효한 색상입니다.

유효한 색상은 여전히 출력 장치 (화면, 프로젝터, 프린터 등)가 생성할 수 있는 색상 범위를 벗어날 수 있습니다.

이를 색역 외(out of gamut)라고 합니다.

각 유효한 색상은 특정 출력 장치(화면 또는 프린터)에 대해 색역 내(in-gamut)이거나, 색역 외(out of gamut)입니다.

 color(prophoto-rgb 0.88 0.45 0.10)

 color(display-p3 1.0844 0.43 0.1)

3. CSS에서 색상 적용

3.1. 접근성과 색상으로 정보 전달

색상은 문서에 중요한 정보를 추가하고 가독성을 높일 수 있지만, 색상만으로 중요한 정보를 전달해서는 안 됩니다. 작성자는 문서에서 색상을 사용할 때 W3C 웹 콘텐츠 접근성 가이드라인 [WCAG21]을 고려해야 합니다.

1.4.1 색상 사용: 색상은 정보를 전달하거나, 작업을 나타내거나, 반응을 유도하거나, 시각적 요소를 구별하는 데 유일한 시각적 수단으로 사용되지 않습니다

3.2. 전경색: color 속성

이 속성은 요소의 주요 전경색을 지정합니다. 이는 텍스트 콘텐츠의 채우기 색상으로 사용되며, 추가적으로 사용된 값을 지정하여 currentcolor로 해석됩니다. 이는 이 전경색에 대한 간접 참조를 허용하며, border-color 및 text-emphasis-color와 같은 다양한 다른 색상 속성의 초기값에 영향을 미칩니다.

<color>

지정된 <color>로 주요 전경색을 설정합니다.

em { color:  lime; }   /* color keyword  */
em { color:  rgb(0 255 0); } /* RGB range 0-255   */
em { color:  rgb(0% 100% 0%); } /* RGB range 0%-100% */
em { color:  color(sRGB 0 1 0); } /* sRGB range 0.0-1.0 */

이 속성이 텍스트에 적용될 때, 알파 구성 요소를 포함하여, "색상 글리프"(일부 글꼴의 이모지 등)에는 영향을 미치지 않습니다. 이러한 글리프는 내장 팔레트로 색상이 지정됩니다. 그러나 일부 색상 글꼴은 컨텍스트 "전경색"을 참조할 수 있으며, 예를 들어 OpenType의 COLR 테이블에서 0xFFFF 팔레트 항목 또는 SVG-in-OpenType의 context-fill 값을 통해 가능합니다. 이러한 경우, 전경색은 이 속성에 의해 설정되며, currentcolor 값 설정과 동일합니다.

3.3. 투명도: opacity 속성

Opacity는 후처리 작업으로 볼 수 있습니다. 개념적으로, 요소(자식 요소 포함)가 RGBA 오프스크린 이미지로 렌더링된 후, opacity 설정은 오프스크린 렌더링을 현재 합성 렌더링에 어떻게 혼합할지 지정합니다. 자세한 내용은 단순 알파 합성을 참고하세요.

<opacity-value>

요소에 적용될 투명도입니다. 결과 투명도는 특정 색상이 아니라 전체 요소에 적용됩니다.

[0,1] 범위를 벗어나는 opacity 값도 잘못된 것은 아니며, 지정된 값으로는 보존되지만 계산 값에서는 [0, 1] 범위로 클램핑됩니다.

CSS에서 opacity는 <opacity-value> 문법으로 표시되며, 예를 들어 opacity 속성에서 사용됩니다.

<opacity-value> = <number> | <percentage>

<number>로 표현될 때, 값의 유효 범위는 0(완전 투명)을 나타내며 1(완전 불투명)을 나타냅니다. 또한 <percentage>로도 작성할 수 있으며, 이는 동일한 <number>로 계산됩니다(0%는 0, 100%는 1).

opacity 속성은 지정된 투명도를 요소 전체에 적용하며, 내용도 포함하고, 각 자손 요소에 개별적으로 적용하는 것이 아닙니다. 예를 들어, 불투명한 자식이 요소의 배경 일부를 가리는 경우 opacity가 1보다 작아도 계속 가리지만, 요소와 자식 전체는 아래 페이지를 투명하게 보여줍니다.

또한 요소의 모든 문자에 대응하는 글리프도 전체로 처리되며, 겹치는 부분이 있어도 투명도가 더 높아지지 않습니다.

각 글리프마다 개별 투명도가 필요하다면, opacity 속성 대신 알파값이 포함된 색상 값을 사용하면 됩니다.

박스의 opacity가 1보다 작으면 자식 요소에 대해 스태킹 컨텍스트가 생성됩니다. (이는 자식 내용이 z축에서 박스 외부 내용과 섞이지 않도록 방지합니다.)

또한 z-index 속성이 박스에 적용될 경우 auto 값은 해당 요소에서 0으로 처리되고, 그렇지 않으면 부모 스태킹 컨텍스트 내에서 스택 레벨 0인 포지셔닝된 요소와 동일한 레이어에 그려집니다 (즉, z-index:0인 포지셔닝된 요소처럼).

스태킹 컨텍스트에 대한 자세한 내용은 9.9절과 부록 E, [CSS2] 를 참고하세요.

SVG 요소에는 이러한 z-순서 규칙이 적용되지 않습니다. SVG는 자체 렌더링 모델([SVG11], 3장)을 따르기 때문입니다.

opacity 속성의 값은 히트 테스트에는 영향을 주지 않습니다.

3.4. 태그된 이미지의 색 공간

태그된 이미지란 이미지 포맷에 따라 명시적으로 색상 프로파일이 지정된 이미지를 말합니다. 이는 보통 International Color Consortium (ICC) 프로파일 [ICC]을 포함하여 이루어집니다.

예를 들어 JPEG [JPEG], PNG [PNG], TIFF [TIFF] 모두 ICC 프로파일을 내장하는 방법을 명시합니다.

이미지 포맷은 간결함을 위해 다른 동등한 방식도 사용할 수 있습니다.

예를 들어, PNG는 sRGB 청크를 통해, sRGB 색 공간에 있음을 명시적으로 태그할 수 있으며, sRGB ICC 프로파일을 포함하지 않아도 됩니다.

마찬가지로, PNG는 cICP 청크를 통해 Display P3, BT.2100 HLG 등 다양한 SDR 또는 HDR 색 공간에 속함을 명시적으로 태그하는 간결한 방법을 제공합니다. 이때 ICC 프로파일을 포함하지 않아도 됩니다.

태그된 RGB 이미지와, RGB 변환 방식(예: YCbCr)을 사용하는 태그된 이미지의 경우 색상 프로파일 또는 기타 식별 정보가 유효하다면, 지정된 색 공간에 있는 것으로 간주해야 합니다.

예를 들어, Display P3 모니터가 있는 시스템에서 실행되는 브라우저가 ITU Rec BT.2020 [Rec.2020] 색 공간으로 태그된 JPEG 이미지를 표시할 때, 색상을 ITU Rec BT.2020에서 Display P3로 변환하여 올바르게 표시해야 합니다. ITU Rec BT.2020 값을 Display P3 값으로 간주해서는 안 되며, 그렇게 하면 잘못된 색상이 출력됩니다.

색상 프로파일이나 기타 식별 정보가 잘못된 경우, 이미지는 태그되지 않은 이미지에 대해 설명된 대로 처리됩니다.

3.5. 태그되지 않은 색상의 색 공간

호환성을 위해 HTML에서 지정한 색상과 태그되지 않은 이미지는 별도로 지정하지 않는 한 sRGB 색 공간([SRGB])에 있는 것으로 간주해야 합니다.

태그되지 않은 이미지란 이미지 포맷에 따라 명시적으로 색상 프로파일이 지정되지 않은 이미지를 말합니다.

이 규칙은 태그되지 않은 비디오에는 적용되지 않습니다. 태그되지 않은 비디오는 ITU가 정의한 색 공간에 있는 것으로 추정해야 합니다.

• 720p 미만에서는 Recommendation ITU-R BT.601 [ITU-R-BT.601]

• 720p에서는 SMPTE ST 296(709와 동일한 색도) [SMPTE296]

• 1080p에서는 Recommendation ITU-R BT.709 [ITU-R-BT.709]

• 4k(UHDTV) 이상에서는 SDR 비디오에 대해 ITU-R BT.2020 [Rec.2020]을 사용합니다.

4. 색상 표현: <color> 타입

CSS에서 색상은 색상 공간의 축을 나타내는 색상 컴포넌트(채널) 목록으로 표현됩니다. 각 컴포넌트는 최소값과 최대값을 가지며, 그 사이의 어떤 값도 가질 수 있습니다. 또한 모든 색상에는 얼마나 투명한지, 즉 배경이 얼마나 비치는지를 나타내는 알파 컴포넌트가 동반됩니다.

CSS에서는 색상 값을 지정하기 위한 여러 가지 문법이 있습니다:

• RGB 및 알파 컴포넌트를 16진수로 표현하는 sRGB 16진수 색상 표기법

• 다양한 색상 공간과 좌표계를 사용할 수 있는 색상 함수

• 상수 이름이 지정된 색상 키워드

• 변수 <system-color> 키워드와 currentColor 키워드.

색상 함수는 CSS 함수형 표기법을 사용하여 다양한 색상 공간에서 색상을 컴포넌트 좌표로 표현합니다. 일부는 실린더 극 좌표 색상 모델을 사용하며, 색상을 <hue> 각도, 중심축(밝기, 즉 검정~흰색), 반지름(채도 또는 크로마, 중성 회색에서의 거리)으로 지정합니다. 나머지는 직교 좌표 색상 모델을 사용하며, 색상을 세 개의 직교 축으로 지정합니다.

Level 4에서 제공되는 색상 함수는 다음과 같습니다.

• rgb() 및 rgba() 별칭은 (16진수 색상 표기법과 같이) 빨강/초록/파랑/알파 구성 요소로 sRGB 색상을 직접 지정합니다.

• hsl() 및 hsla() 별칭은 HSL 원통좌표계를 사용하여 색상, 채도, 명도를 통해 sRGB 색상을 지정합니다.

• hwb()는 HWB 원통좌표계를 사용하여 색상, 흰색도, 검정도를 통해 sRGB 색상을 지정합니다.

• lab()는 CIE LAB 직교좌표계를 사용하여 CIE 명도와 a, b축 색상좌표(빨강/초록, 노랑/파랑)를 통해 CIELAB 색상을 지정합니다.

• lch()는 CIE LCH 원통좌표계를 사용하여 CIE 명도, 채도, 색상으로 CIELAB 색상을 지정합니다.

• oklab()는 Oklab 직교좌표계를 사용하여 Oklab 명도와 a, b축 색상좌표(빨강/초록, 노랑/파랑)를 통해 Oklab 색상을 지정합니다.

• oklch()는 OkLCh 원통좌표계를 사용하여 Oklab 명도, 채도, 색상으로 Oklab 색상을 지정합니다.

• color()는 sRGB, 선형광 sRGB, Display P3, 선형광 Display P3, A98 RGB, ProPhoto RGB, ITU-R BT.2020-2, 그리고 CIE XYZ 등 다양한 색 공간의 색상을 지정할 수 있게 합니다.

다른 명세에서 쉽게 참고할 수 있도록, 불투명 검정은 rgb(0 0 0 / 100%) 색상으로 정의되고, 투명 검정은 동일한 색상이지만 완전히 투명—​즉, rgb(0 0 0 / 0%)입니다.

4.1. <color> 문법

CSS의 색상은 <color> 타입으로 표현됩니다:

<color> = <color-base> | currentColor | <system-color>

<color-base> = <hex-color> | <color-function> | <named-color> | transparent
<color-function> = <rgb()> | <rgba()> |
              <hsl()> | <hsla()> | <hwb()> |
              <lab()> | <lch()> | <oklab()> | <oklch()> |
              <color()>

절대 색상은 <color> 중 계산된 값이 절대 색도 해석을 가지는 경우를 의미합니다. 즉, 값이 다음에 해당하지 않습니다:

• currentColor (이는 color 속성 값에 따라 달라짐)

• <system-color> (이는 색상 모드에 따라 달라짐)

sRGB로 해석되는 색상은 다음과 같습니다:

• 16진수 색상

• rgb(), rgba() 값

• hsl(), hsla() 값

• hwb() 값

• 이름이 지정된 색상

레거시 색상 문법을 지원하는 함수는 다음과 같습니다:

• rgb(), rgba()

• hsl(), hsla()

<hsl()>, <hsla()>, <hwb()>, <lch()>, <oklch()> 색상 함수는 실린더 극 좌표 색상 표현방식이며 <hue> 각도를 사용합니다; 그 외의 색상 함수는 직교 좌표 색상 표현방식을 사용합니다.

4.1.1. 모던(공백 구분) 색상 함수 문법

이 명세에서 처음 정의된 모든 절대 색상 함수형 형식은 모던 색상 문법을 사용합니다. 즉:

• 색상 컴포넌트는 공백으로 구분됨

• 선택적 알파 항목은 슬래시("/")로 구분됨

• 직렬화 시 최소 요구 정밀도가 정의되며, 컴포넌트당 8비트보다 높을 수 있음

• none 값이 허용되어 누락된 컴포넌트를 표현할 수 있음

• <percentage>와 <number>를 자유롭게 혼합해서 사용할 수 있음

rgb(100% 0% 0% / 50%)

4.1.2. 레거시(쉼표 구분) 색상 함수 문법

웹 호환성을 위해, rgb(), rgba(), hsl(), hsla()의 문법(이전 명세에서 정의된)은 레거시 색상 문법도 지원하며, 차이점은 다음과 같습니다:

• 색상 컴포넌트가 쉼표로 구분됨(공백이 앞뒤에 올 수 있음)

• 불투명하지 않은 경우 별도 표기법 사용 (예: hsla()는 hsl() 대신 사용) 알파 항목도 쉼표로 구분됨(앞뒤에 공백이 올 수 있음)

• 최소 요구 정밀도가 더 낮으며, 컴포넌트당 8비트

• none 값은 허용되지 않음

• 색상 컴포넌트는 모두 <percentage> 또는 모두 <number>로 지정해야 하며, 혼합할 수 없음.

rgba(100%, 0%, 0%, 0.5)

이 명세 및 이후 레벨에서 도입된 색상 함수에는 웹 호환성 문제가 없는 경우 레거시 색상 문법은 유효하지 않습니다.

4.2. 색상에서 투명도 표현: <alpha-value> 문법

<alpha-value> = <number> | <percentage>

별도로 지정하지 않는 한, 색상의 <alpha-value> 컴포넌트는 생략 시 100%로 기본 설정됩니다. [0,1] 범위를 벗어난 값도 잘못된 것은 아니지만, 파싱된 값 단계에서 해당 범위로 클램핑됩니다.

4.3. 실린더 좌표 색상각 표현: <hue> 문법

색상각(hue)은 색상 원의 각도로 표현됩니다 (무지개를 원으로 휘어놓고, 보라색을 보라~빨강 사이에 추가한 것).

<hue> = <number> | <angle>

이 값은 매우 자주 도 단위(degree)로 주어지므로, 인자(argument)를 숫자로도 지정할 수 있는데, 이 경우 숫자는 도(degree) 단위로 해석되며 정규 단위입니다.

이 숫자는 [0,360) 범위로 정규화(normalize)됩니다.

참고: 특정 색상에 대응하는 각도와 간격은 색상 공간에 따라 달라집니다. 예를 들어, sRGB 색상 공간을 사용하는 HSL 및 HWB에서는 sRGB 녹색이 120도입니다. LCH에서는 sRGB 녹색이 134.39도, display-p3 녹색은 136.01도, a98-rgb 녹색은 145.97도, prophoto-rgb 녹색은 141.04도입니다 (각 색상 공간마다 녹색의 색조가 다르기 때문입니다).

<hue> 컴포넌트는 무효(powerless)가 되는 경우가 가장 많습니다; 색상이 중심 무채색 축에 충분히 가까우면 무효인 hue 컴포넌트가 됩니다.

4.4. “누락된” 색상 컴포넌트와 none 키워드

특정 경우에, 색상은 하나 이상의 누락된 색상 구성 요소를 가질 수 있습니다.

이 명세에서는 일부 색상(hue 기반 보간으로 인한 white 등)에서 자동으로 발생합니다; 다른 명세에서는 추가적인 상황에서 컴포넌트가 자동으로 누락될 수 있음을 정의할 수 있습니다.

명시적으로 지정할 수도 있는데, 색상 함수의 컴포넌트에 none 키워드를 지정하면 됩니다. 모든 색상 함수는 (레거시 색상 문법을 사용하는 함수를 제외하고) 어떤 컴포넌트라도 none으로 지정할 수 있습니다.

이 기능은 신중하게 사용해야 하며, 원하는 효과가 있을 때만 사용하는 것이 좋습니다.

누락된 컴포넌트가 두 색상을 합치는 상황(예: 색상 보간)에서 어떻게 처리되는지는 § 13.2 누락된 컴포넌트와의 보간를 참고하세요.

그 외의 모든 경우에는 누락된 컴포넌트는 해당 컴포넌트의 단위에 맞는 0값으로 동작합니다: 0, 0%, 0deg. 이는 색상을 직접 렌더링하거나, 다른 색상 공간으로 변환하거나, 색상 컴포넌트 값을 연산할 때 등 모두 포함됩니다.

누락된 컴포넌트가 있는 색상을 직렬화하거나 저자(author)에게 직접 보여줄 경우, 레거시 색상 문법에서는 해당 컴포넌트를 0값으로 표현하고, 그렇지 않은 경우에는 none 키워드로 표현합니다.

4.4.1. “무효” 색상 컴포넌트

개별 색상 문법에서는, 특정 상황에서 해당 문법의 컴포넌트가 무효 색상 컴포넌트가 될 수 있다고 규정할 수 있습니다. 이는 해당 컴포넌트의 값이 렌더링된 색상에 영향을 주지 않음을 의미합니다; 어떤 값을 주더라도 화면에 표시되는 색상은 동일합니다.

예를 들어, hsl()에서, 채도(saturation) 컴포넌트가 0%일 때 hue 컴포넌트는 무효가 됩니다; 0% 채도는 회색조를 의미하며, hue가 전혀 없는 색상이므로, 0deg든 180deg든, 또는 어떤 각도든 결과는 완전히 동일합니다.

무효 컴포넌트를 수동으로 지정하면, 평소처럼 동작하며; 무효라는 사실이 동작에 영향을 주지 않습니다.

하지만 색상 공간 변환으로 색상이 자동 생성되는 경우, 변환 결과의 무효 컴포넌트는 변환 과정에서 나온 값 대신 누락됨으로 설정해야 합니다.

색상 공간 변환을 실린더 극 좌표 색상 공간으로 할 때, 사용자 에이전트는 chroma(또는 hsl에서의 채도 등 색상도 측정치)가 해당 색상 공간에서 규정된 epsilon(ε)보다 작으면 hue 컴포넌트를 무효로 처리해야 합니다. 예를 들어, 회색을 oklch()로 변환하면 수치 오차로 인해 chroma가 정확히 0%가 아니라 매우 작게 나올 수 있는데, 이 경우 hue 컴포넌트는 무효가 됩니다.

4.5. <color> 값 파싱하기

참고: 이 알고리즘은 CSS <color> 값을 CSS 스타일시트나 CSSOM 인터페이스에서 파싱하기 위한 것이 아니라, HTML 속성이나 Canvas 인터페이스 등 다른 곳에서 사용하기 위한 것입니다.

5. sRGB 색상

CSS에서 sRGB 색상 공간의 색상은 빨강, 초록, 파랑 값의 삼중값(triplet)으로 표현되며, sRGB 색상 공간의 한 점을 식별합니다 [SRGB]. 이 색상 공간은 국제적으로 인정받는 장치 독립적 색상 공간으로, 컴퓨터 화면에 표시될 색상을 지정할 때 유용하며, 프린터와 같은 다른 종류의 장치에 색상을 지정할 때도 유용합니다.

CSS는 또한 sRGB가 아닌 색상 공간도 사용할 수 있도록 허용합니다. 자세한 내용은 § 10 미리 정의된 색상 공간을 참고하세요.

CSS에서는 sRGB 색상을 직접 지정하는 여러 방법을 제공합니다: 16진수 색상, rgb()/rgba() 색상 함수, hsl()/hsla() 색상 함수, hwb() 색상 함수, 이름이 지정된 색상, 그리고 transparent 키워드입니다.

5.1. RGB 함수: rgb() 및 rgba()

rgb() 및 rgba() 함수는 r, g, b(빨강, 초록, 파랑) 컴포넌트를 직접 지정하여 sRGB 색상을 정의합니다. 문법은 다음과 같습니다:

rgb() = [ <legacy-rgb-syntax> | <modern-rgb-syntax> ]
rgba() = [ <legacy-rgba-syntax> | <modern-rgba-syntax> ]
<legacy-rgb-syntax> = 	rgb( <percentage>#{3} , <alpha-value>? ) |
                  rgb( <number>#{3} , <alpha-value>? )
<legacy-rgba-syntax> = rgba( <percentage>#{3} , <alpha-value>? ) |
                  rgba( <number>#{3} , <alpha-value>? )
<modern-rgb-syntax> = rgb(
  [ <number> | <percentage> | none]{3}
  [ / [<alpha-value> | none] ]?  )
<modern-rgba-syntax> = rgba(
  [ <number> | <percentage> | none]{3}
  [ / [<alpha-value> | none] ]?  )

처음 세 인자는 각각 r, g, b(빨강, 초록, 파랑) 색상 컴포넌트를 지정합니다. 0%는 해당 sRGB 색상 컴포넌트의 최소값을, 100%는 최대값을 나타냅니다.

색상 컴포넌트의 백분율 기준 범위는 많은 그래픽 엔진이 색상 컴포넌트를 내부적으로 한 바이트(0~255 정수)로 저장했던 역사적 사실에서 유래했습니다. 구현체는 저자가 작성하거나 계산한 컴포넌트의 정밀도를 최대한 존중해야 합니다. 만약 불가능하다면, 컴포넌트는 +∞ 방향으로 반올림되어야 합니다.

마지막 인자인 <alpha-value>는 색상의 알파값을 지정합니다. 생략 시 기본값은 100%입니다.

이 범위를 벗어난 값도 잘못된 것은 아니지만, 파싱 시점에 여기 정의된 범위로 클램핑됩니다.

역사적 이유로 rgb() 및 rgba()는 레거시 색상 문법도 지원합니다.

5.2. RGB 16진수 표기법: #RRGGBB

CSS 16진수 색상 표기법은 sRGB 색상을 각 컴포넌트를 16진수 숫자로 지정할 수 있게 해줍니다. 이는 색상을 컴퓨터 코드에서 직접 쓸 때 자주 사용하는 방식과 유사합니다. rgb() 표기법보다 더 짧게 쓸 수 있습니다.

<hex-color>의 문법은 3, 4, 6, 8자리 16진수로 이루어진 <hash-token> 토큰입니다. 즉, 16진수 색상은 해시 문자 "#" 뒤에 0~9 또는 a~f(대소문자 구분 없음, #00ff00과 #00FF00은 동일)를 나열해 작성합니다.

16진수 자릿수에 따라 RGB 색상으로 해석하는 방법이 달라집니다:

6자리

첫 두 자리는 16진수로 해석해 빨강 컴포넌트를 지정합니다. 00은 최소값, ff(10진수 255)는 최대값입니다. 다음 두 자리는 초록, 마지막 두 자리는 파랑 컴포넌트를 지정하며, 알파값은 완전히 불투명입니다.

예를 들어, #00ff00은 rgb(0 255 0)(라임 그린)과 동일한 색상입니다.

8자리

첫 6자리는 6자리 표기법과 동일하게 해석합니다. 마지막 두 자리는 16진수로 해석해 알파값을 지정하며, 00은 완전 투명, ff는 완전 불투명입니다.

예를 들어, #0000ffcc은 rgb(0 0 100% / 80%)(약간 투명한 파랑)과 동일합니다.

3자리

6자리 표기법을 짧게 만든 방식입니다. 첫 자리는 빨강 컴포넌트, 0은 최소, f는 최대값입니다. 다음 두 자리는 초록, 파랑을 같은 방식으로 지정하며, 알파값은 완전히 불투명입니다.

이 문법은 각 자릿수를 "두 번" 반복해 6자리 표기법으로 변환한 것과 동일하다고 설명됩니다. 예를 들어, #123은 #112233과 같은 색상입니다. 이 방식은 6자리 표기법보다 해상도가 낮으며, 3자리 표기법으로 표현 가능한 색상은 4096가지뿐이고, 6자리에서는 약 1700만 가지입니다.

4자리

8자리 표기법을 짧게 만든 것으로, 3자리 표기법과 마찬가지로 "확장"됩니다. 첫 자리는 빨강 컴포넌트, 0은 최소, f는 최대값, 다음 세 자리는 초록, 파랑, 알파 컴포넌트를 각각 지정합니다.

6. 색상 키워드

다양한 숫자 문법 <color> 외에도, CSS는 여러 색상 키워드 집합을 정의하며, 상황에 따라 쓰일 수 있습니다—각각 장점과 용도가 있습니다.

6.1. 이름이 지정된 색상

CSS는 이름이 지정된 색상을 다수 정의하여, 자주 쓰이는 색상을 더 쉽게 작성하고 읽을 수 있도록 합니다. <named-color>는 <ident>로 작성되며, <color>가 허용되는 모든 곳에서 사용할 수 있습니다. CSS에서 정의한 <ident>처럼, 모든 키워드는 ASCII 대소문자 구분 없이 인식됩니다.

이 이름들은 sRGB 색상으로 해석됩니다.

CSS의 이름이 지정된 색상 중 16개는 원래 VGA 팔레트에서 비롯되었고, HTML에도 채택되었습니다: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. 나머지 대부분은 Unix 계열 시스템에서 콘솔 색상을 지정할 때 사용된 X11 색상 시스템의 한 버전에서 유래했고, 이후 SVG로 채택되었습니다.

참고: 이들 색상 이름이 여기에서 표준화된 것은 좋아서가 아니라, 수십 년간 널리 쓰이고 구현되어왔기 때문이며, 표준은 현실을 반영해야 합니다. 실제로 각 이름이 어떤 색상일지 상상하기 어려운 경우가 많으므로(아래 목록 참고), sRGB 색상 볼륨 전체에 이름이 고르게 분포되어 있지 않고, 이름 간에도 일관성이 없습니다 ( darkgray는 gray보다 더 밝고, lightpink는 pink보다 더 어둡습니다), 그리고 일부 이름( indianred 등)은 논란이 있는 경우도 있습니다. 따라서 사용을 권장하지 않습니다.

(transparent, currentcolor는 별도 섹션에서 정의되어 있습니다.)

아래 표는 모든 불투명 이름 색상을, 다른 색상 표기법으로 동등하게 지정한 값을 제시합니다.

참고: 이 색상 목록과 정의는 SVG 1.1에 정의된 이름이 지정된 색상 목록의 상위 집합입니다.

참고: X11 색상 시스템의 역사는 흥미롭고, Alex Sexton의 “Peachpuffs and Lemonchiffons” 강연에서 훌륭하게 요약되었습니다.

6.2. 시스템 색상

일반적으로, <system-color> 키워드는 기본 색상 선택을 반영합니다(사용자, 브라우저 또는 운영체제에서 설정). 이러한 이유로 주로 브라우저 기본 스타일 시트에서 사용됩니다.

가독성을 유지하기 위해, <system-color> 키워드는 사용된 색상 체계에도 반응합니다.

하지만, 강제 색상 모드에서는, 대부분의 페이지 색상이 사용자가 선택한 제한된 팔레트로 강제 적용됩니다. 관련 내용은 CSS Color Adjustment 1 § 5.2 강제 색상 모드 팔레트를 참고하세요. <system-color> 키워드는 이러한 사용자 지정 색상을 노출하여 페이지의 나머지 부분이 제한된 팔레트와 일관성 있게 동작하도록 합니다.

forced-colors 미디어 특성이 active일 때, 작성자는 반드시 <system-color> 키워드를 CSS Color Adjustment 1 § 3.1 강제 색상 모드에 영향을 받는 속성에 나열된 속성이 아닌 다른 속성의 색상 값으로 사용하여, 페이지 전반의 가독성과 일관성을 보장하고 사용자가 강제한 색상과 페이지 지정 색상이 뒤섞이는 현상을 피해야 합니다.

<system-color> 키워드의 값이 브라우저에서 제공되는 경우 (운영체제 기본값 또는 사용자가 선택한 값이 아닌 경우), 브라우저는 매칭되는 전경/배경 조합이 최소 WCAG AA 대비를 만족하도록 해야 합니다. 단, 사용자의 취향(고대비 또는 저대비 여부)이 브라우저 환경설정, 사용자 스타일시트 또는 OS 기본값 변경을 통해 설정된 경우, 이 요구사항보다 우선 적용되어야 합니다.

작성자는 언제든지 이러한 키워드를 사용할 수 있습니다. 단, 반드시 매칭되는 배경-전경 조합으로 색상을 지정하여 적절한 대비를 확보해야 하며, 매칭되지 않는 조합(예: Canvas와 ButtonText) 간의 특정 대비 관계는 보장되지 않습니다.

<system-color> 키워드는 다음과 같이 정의됩니다:

AccentColor

 강조된 사용자 인터페이스 컨트롤의 배경입니다.

AccentColorText

 강조된 사용자 인터페이스 컨트롤의 텍스트입니다.

ActiveText

 활성 링크의 텍스트. 밝은 배경에서는 전통적으로 빨간색입니다.

ButtonBorder

 푸시 버튼의 기본 테두리 색상입니다.

ButtonFace

 푸시 버튼의 표면 배경 색상입니다.

ButtonText

 푸시 버튼의 텍스트입니다.

Canvas

 애플리케이션 콘텐츠나 문서의 배경입니다.

CanvasText

 애플리케이션 콘텐츠나 문서의 텍스트입니다.

Field

 입력 필드의 배경입니다.

FieldText

 입력 필드의 텍스트입니다.

GrayText

 비활성화된 텍스트. (종종, 그러나 반드시, 회색임.)

Highlight

 선택된 텍스트의 배경(예: ::selection에서).

HighlightText

 선택된 텍스트의 텍스트입니다.

LinkText

 비활성, 미방문 링크의 텍스트. 밝은 배경에서는 전통적으로 파란색입니다.

Mark

 특별히 강조(mark)된 텍스트의 배경 (예: HTML mark 요소).

MarkText

 특별히 강조된 텍스트 (예: HTML mark 요소).

SelectedItem

 선택된 항목의 배경(예: 체크박스에서 선택된 항목).

SelectedItemText

 선택된 항목의 텍스트입니다.

VisitedText

 방문한 링크의 텍스트. 밝은 배경에서는 전통적으로 보라색입니다.

참고: 다른 키워드처럼, 이 이름들은 ASCII 대소문자 구분 없이 인식됩니다. 가독성을 위해 혼합 대소문자로 표기합니다.

특정 시스템 UI 개념이 없는 시스템에서는, 지정된 값은 존재하는 가장 비슷한 시스템 색상 값으로 매핑되어야 합니다. 다음 시스템 색상 쌍은 읽기 쉬운 배경-전경 색상 조합을 형성해야 합니다:

• Canvas 배경과 CanvasText, LinkText, VisitedText, ActiveText 전경.

• Canvas 배경과 ButtonBorder 테두리 및 인접 색상 Canvas

• ButtonFace 배경과 ButtonText 전경.

• Field 배경과 FieldText 전경.

• Mark 배경과 MarkText 전경

• ButtonFace 또는 Field 배경과 ButtonBorder 테두리, 인접 색상 Canvas

• Highlight 배경과 HighlightText 전경.

• SelectedItem 배경과 SelectedItemText 전경.

• AccentColor 배경과 AccentColorText 전경.

또한, GrayText는 어떤 배경에서도 읽을 수 있어야 하지만, 명도비 평가는 낮을 수 있습니다.

위젯 강조 색상 스타일과 일관성을 유지하기 위해, AccentColor 값은 accent-color에서 가져옵니다. 단, 강제 색상 모드가 활성화된 경우는 제외합니다. AccentColorText 값은 AccentColor에 대한 대비되는 전경색에서 가져오며, 위젯 강조 색상 스타일에 대해 설명된 방식과 같습니다.

이전 CSS 버전에서는 추가 <system-color>도 정의했으나, 현재는 폐지되었습니다. 자세한 내용은 부록 A: 폐지된 CSS 시스템 색상을 참고하세요.

참고: <system-color>는 § 22 개인정보 보호 고려사항 및 § 20 보안 고려사항에서 설명한 바와 같이 개인정보 및 보안 위험이 있습니다.

사용자 에이전트는, 지문 채취 등 개인정보·보안 위험을 완화하기 위해, 시스템 색상 사용 값에 대해 사용자의 맞춤화나 테마 선택을 반영하지 않는 고정 값을 반환하도록 선택할 수 있습니다.

6.3. transparent 키워드

transparent 키워드는 투명한 검정을 지정합니다. 이는 <named-color>의 일종입니다.

6.4. currentcolor 키워드

currentcolor 키워드는 같은 요소의 color 속성 값을 나타냅니다. <named-color>와 달리, sRGB에만 제한되지 않습니다; 값은 어떤 <color>여도 됩니다. 사용된 값은 색상값 해석에 의해 결정됩니다.

.foo {
  color:  red;
  background-color:  currentcolor;
}

.foo {
  color:  red;
  background-color:  red;
}

<p><em>Some <strong>really</strong> emphasized text.</em>
<style>
p { color: black; }
em { text-emphasis: dot; }
strong { color: red; }
</style>

참고: CSS에서 여러 단어로 된 키워드는 보통 하이픈으로 단어를 구분합니다. currentcolor는 그렇지 않은데, (잠시 숨 고르고) 원래 SVG에서 속성값 "current-color"로, 일반적인 CSS 표기 규칙에 따라 도입됐기 때문입니다. 이후(다른 모든 속성 및 값과 함께) 표시 속성과 속성값, 그리고 속성이 되었는데, 이는 XSLT 생성이 더 쉬워지기 위함이었습니다. 그 다음, 모든 표시 속성이 하이픈에서 camelCase로 변경됐는데, 이는 DOM에서 하이픈이 "마이너스"로 인식되는 문제 때문이었습니다. 그런데 이렇게 바뀌면서 CSS 관례를 따르지 않게 되었고, 이미 CSS의 일부이던 모든 속성 및 값은 다시 하이픈 표기로 환원됐습니다! currentcolor는 그 때 CSS의 일부가 아니어서 camelCase 형태로 남았습니다. 이후 CSS에서 이를 채택하게 되었고, 이 시점에서는 대소문자가 중요하지 않게 되었는데, CSS 키워드는 ASCII 대소문자 구분 없이 처리되기 때문입니다.

7. HSL 색상: hsl() 및 hsla() 함수

색상을 지정하는 RGB 시스템은 기계와 그래픽 라이브러리에는 편리하지만, 사람이 직관적으로 이해하기에는 매우 어렵다고 여겨집니다. 예를 들어, RGB 색상을 어떻게 조정해야 같은 색상의 더 밝은 변형이 나오는지 쉽게 알 수 없습니다.

다른 색상 체계도 여러 가지가 있습니다. 그 중 하나가 HSL [HSL] 색상 체계이며, 더 직관적으로 사용할 수 있지만, 여전히 RGB 색상으로 쉽게 변환됩니다.

HSL 색상은 색상각(hue), 채도(saturation), 명도(lightness) 삼중값으로 지정됩니다. hsl() 및 hsla() 함수의 문법은 다음과 같습니다:

hsl() = [ <legacy-hsl-syntax> | <modern-hsl-syntax> ]
hsla() = [ <legacy-hsla-syntax> | <modern-hsla-syntax> ]
<modern-hsl-syntax> = hsl(
    [<hue> | none]
    [<percentage> | <number> | none]
    [<percentage> | <number> | none]
    [ / [<alpha-value> | none] ]? )
<modern-hsla-syntax> = hsla(
    [<hue> | none]
    [<percentage> | <number> | none]
    [<percentage> | <number> | none]
    [ / [<alpha-value> | none] ]? )
<legacy-hsl-syntax> = hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<legacy-hsla-syntax> = hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

첫 번째 인자는 색상각(hue)을 지정합니다.

HSL(HWB도 동일)에서 0deg는 sRGB 원색 빨강을 나타내며 (360deg, 720deg 등도 마찬가지), 나머지 hue들은 원을 따라 분포합니다. 120deg는 sRGB 원색 초록, 240deg는 sRGB 원색 파랑 등입니다.

다음 두 인자는 각각 채도(saturation)와 명도(lightness)입니다. 채도의 경우 100% 또는 100이 완전히 채도된 밝은 색이고, 0% 또는 0이 완전히 무채색의 회색입니다. 명도의 경우 50% 또는 50이 "일반적인" 색, 100% 또는 100이 흰색, 0% 또는 0이 검정입니다.

역사적 이유로, 채도가 0% 미만이면 파싱 시점에 0%로 클램핑되어, sRGB 색상 변환 전에 적용됩니다.

마지막 인자는 색상의 알파 컴포넌트입니다. rgb() 함수의 네 번째 인자와 동일하게 해석됩니다. 생략 시 기본값은 100%입니다.

HSL 색상은 sRGB로 해석됩니다.

HSL 색상의 채도가 0% 또는 0이면, hue 컴포넌트는 무효(powerless)가 됩니다.

HSL의 장점은 RGB보다 직관적이라는 점입니다: 사람들이 원하는 색상을 대략적으로 예측하여 쉽게 조정할 수 있습니다.

hsl(120deg 100% 50%) lime green
hsl(120deg 100% 25%) dark green
hsl(120deg 100% 75%) light green
hsl(120deg 75% 85%)  pastel green

HSL의 단점은 OKLCh에 비해 hue 조작 시 시각적 명도가 달라지고, hue 간 간격이 고르지 않다는 점입니다.

따라서 HSL에서는 hue를 고정하고 채도와 명도만 바꿔서 색상 세트를 만들기가 sRGB 컴포넌트 값을 직접 조작하는 것보다 쉽지만, 명도(lightness)는 감마 보정된 빨강, 초록, 파랑 컴포넌트의 평균이기 때문에 hue에 따라 시각적으로 느끼는 명도와 일치하지 않습니다.

HSL의 hue 각도는 시각적으로 균일하지 않습니다; 색상들이 어떤 영역에서는 몰려 있고 다른 영역에서는 넓게 퍼져 보입니다.

역사적 이유로 hsl() 및 hsla()는 레거시 색상 문법도 지원합니다.

7.1. HSL 색상을 sRGB로 변환하기

HSL 색상을 sRGB로 변환하는 것은 수학적으로 간단합니다. 아래는 변환 알고리즘의 자바스크립트 샘플 구현입니다. 색상의 빨강, 초록, 파랑 컴포넌트를 나타내는 세 숫자 배열을 반환하며, sRGB 영역 내의 색상일 경우 값은 [0, 1] 범위입니다.

이 코드에서는 음수 채도에 대한 파싱 시점 클램핑이 이미 적용되었다고 가정합니다.

/**
 * @param {number} hue - Hue as degrees 0..360
 * @param {number} sat - Saturation in reference range [0,100]
 * @param {number} light - Lightness in reference range [0,100]
 * @return {number[]} Array of sRGB components; in-gamut colors in range [0..1]
 */
function hslToRgb(hue, sat, light) {

    sat /= 100;
    light /= 100;

    function f(n) {
        let k = (n + hue/30) % 12;
        let a = sat * Math.min(light, 1 - light);
        return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
    }

    return [f(0), f(8), f(4)];
}

7.2. sRGB 색상을 HSL로 변환하기

반대로 변환하는 과정도 비슷하게 진행됩니다.

sRGB 영역을 벗어난 색상에서 중간 단계에서 음수 채도가 나올 수 있는데, 이를 처리하기 위해 특별한 주의를 기울입니다.

/**
 * @param {number} red - Red component 0..1
 * @param {number} green - Green component 0..1
 * @param {number} blue - Blue component 0..1
 * @return {number[]} Array of HSL values: Hue as degrees 0..360, Saturation and Lightness in reference range [0,100]
 */
function rgbToHsl (red, green, blue) {
    let max = Math.max(red, green, blue);
    let min = Math.min(red, green, blue);
    let [hue, sat, light] = [NaN, 0, (min + max)/2];
    let d = max - min;
    let epsilon = 1 / 100000;   // max Sat is 1, in this code

    if (d !== 0) {
        sat = (light === 0 || light === 1)
            ? 0
            : (max - light) / Math.min(light, 1 - light);

        switch (max) {
            case red:   hue = (green - blue) / d + (green < blue ? 6 : 0); break;
            case green: hue = (blue - red) / d + 2; break;
            case blue:  hue = (red - green) / d + 4;
        }

        hue = hue * 60;
    }

    // 아주 sRGB 영역을 벗어난 색상은 음수 채도를 만들 수 있음
    // 이 경우 hue에 180을 더하고 양수 채도를 사용함
    // 참고: https://github.com/w3c/csswg-drafts/issues/9222
    if (sat < 0) {
        hue += 180;
        sat = Math.abs(sat);
    }

    if (hue >= 360) {
        hue -= 360;
    }

    if (sat <= epsilon) {
        hue = NaN;
    }

    return [hue, sat * 100, light * 100];
}

7.3. HSL 색상 예시

이 절은 규범적이지 않습니다.

아래 표는 다양한 HSL 색상을 보여줍니다. 각 표는 한 가지 색상각(hue)을 대표하며, 30° 간격으로 선택된 대표적인 "핵심" 색상: 빨강, 노랑, 초록, 시안, 파랑, 마젠타, 그리고 그 사이의 6가지 중간색을 나타냅니다.

각 표에서 X축은 채도(saturation), Y축은 명도(lightness)를 나타냅니다.

8. HWB 색상: hwb() 함수

HWB(Hue-Whiteness-Blackness의 약자) [HWB]는 sRGB 색상을 지정하는 또 다른 방법으로, HSL과 비슷하지만, 사람에게 더 직관적으로 다가오는 경우가 많습니다. 색상을 기준이 되는 hue로 시작해서, 그에 혼합할 하양(whiteness)과 검정(blackness)의 정도를 지정하여 색을 만듭니다.

많은 컬러 피커가 HWB 색상 시스템을 기반으로 하는데, 그만큼 직관적이기 때문입니다.

HWB 색상은 sRGB로 해석됩니다.

hwb() 함수의 문법은 다음과 같습니다:

hwb() = hwb(
  [<hue> | none]
  [<percentage> | <number> | none]
  [<percentage> | <number> | none]
  [ / [<alpha-value> | none] ]? )

첫 번째 인자는 hue(색상각)를 지정하며, hsl()과 완전히 동일하게 정의됩니다; 즉, 동일한 단점(hue 균일성 등)이 있습니다.

두 번째 인자는 혼합할 백색의 양을, 0%(백색 없음)부터 100%(전부 백색)까지 백분율로 지정합니다. 세 번째 인자는 혼합할 흑색의 양을, 0%(흑색 없음)부터 100%(전부 흑색)까지 백분율로 지정합니다.

이 범위를 벗어나는 값도 잘못된 것은 아닙니다; hue가 [0,360) 범위를 벗어나면 그 범위로 정규화되고, 백색과 흑색의 합이 100% 이상이면 아래 설명처럼 무채색(achromatic) 색상이 생성됩니다.

결과 색상은 개념적으로 선택한 hue의 페인트, 백색 페인트, 흑색 페인트를 각 백분율만큼 혼합한 것이라 생각하면 됩니다.

white+black의 합이 100% 이상이면, 이는 무채색(achromatic) 색상, 즉 회색의 한 종류를 의미합니다; sRGB로 변환될 때 R, G, B 값이 모두 같으며 그 값은 white / (white + black)입니다.

무채색 HWB 색상은 선택한 hue의 흔적이 남아 있지 않습니다. 이 경우 hue 컴포넌트는 무효(powerless)입니다.

네 번째 인자는 색상의 알파 컴포넌트입니다. rgb() 함수의 네 번째 인자와 동일하게 해석됩니다. 생략 시 기본값은 100%입니다.

hwb는 이 명세에서 새로 도입된 것이므로 Web 호환성 문제가 없으며, hwb()는 레거시 색상 문법(모든 인자를 쉼표로 구분하는 방식)을 지원하지 않습니다. hwb() 안에 쉼표를 사용하면 오류입니다.

8.1. HWB 색상을 sRGB로 변환하기

HWB 색상을 sRGB로 변환하는 것은 간단하며, HSL을 RGB로 변환하는 방법과 유사합니다. 아래 Javascript 구현은 먼저 백색과 흑색 컴포넌트를 정규화하여 합이 100%를 넘지 않도록 처리합니다.

/**
 * @param {number} hue -  Hue as degrees 0..360
 * @param {number} white -  Whiteness in reference range [0,100]
 * @param {number} black -  Blackness in reference range [0,100]
 * @return {number[]} Array of RGB components 0..1
 */
function hwbToRgb(hue, white, black) {
    white /= 100;
    black /= 100;
    if (white + black >= 1) {
        let gray = white / (white + black);
        return [gray, gray, gray];
    }
    let rgb = hslToRgb(hue, 100, 50);
    for (let i = 0; i < 3; i++) {
        rgb[i] *= (1 - white - black);
        rgb[i] += white;
    }
    return rgb;
}

8.2. sRGB 색상을 HWB로 변환하기

반대로 변환하는 과정도 비슷하게 진행됩니다.

/**
 * @param {number} red - Red component 0..1
 * @param {number} green - Green component 0..1
 * @param {number} blue - Blue component 0..1
 * @return {number} Hue as degrees 0..360
 */
function rgbToHue(red, green, blue) {
    // rgbToHsl과 유사하지만, 채도와 명도는 계산하지 않고,
    // 음수 채도 가능성은 무시함.
    let max = Math.max(red, green, blue);
    let min = Math.min(red, green, blue);
    let hue = NaN;
    let d = max - min;

    if (d !== 0) {
        switch (max) {
            case red:   hue = (green - blue) / d + (green < blue ? 6 : 0); break;
            case green: hue = (blue - red) / d + 2; break;
            case blue:  hue = (red - green) / d + 4;
        }

        hue *= 60;
    }

    if (hue >= 360) {
        hue -= 360;
    }

    return hue;
}

/**
 * @param {number} red - Red component 0..1
 * @param {number} green - Green component 0..1
 * @param {number} blue - Blue component 0..1
 * @return {number[]} Array of HWB values: Hue as degrees 0..360, Whiteness and Blackness in reference range [0,100]
 */
function rgbToHwb(red, green, blue) {
    let epsilon = 1 / 100000;  // 100 곱셈에 대한 오차 보정
    var hue = rgbToHue(red, green, blue);
    var white = Math.min(red, green, blue);
    var black = 1 - Math.max(red, green, blue);
    if (white + black >= 1 - epsilon) {
        hue = NaN;
    }
    return([hue, white*100, black*100]);
}

8.3. HWB 색상 예시

이 절은 규범적이지 않습니다.

9. 디바이스 독립 색상: CIE Lab 및 LCH, Oklab 및 OKLCh

9.1. CIE Lab 및 LCH

이 절은 규범적이지 않습니다.

물리적 색상 측정값은 일반적으로 CIE L*a*b* [CIELAB] 색상 공간으로 표현합니다. 1976년 CIE에서 만든 것으로, 흔히 Lab이라고 부릅니다. 디바이스 간 색상 변환에서도 중간 단계로 Lab을 사용할 수 있습니다. 인간 시각 실험을 바탕으로 만들어졌으며, Lab은 사람이 볼 수 있는 전체 색 영역을 나타냅니다.

Lab은 중심에 명도(Lightness, L) 축이 있는 직교 좌표계입니다. 이 값은 보통 단위 없는 숫자로 기록되며, CSS와의 호환성을 위해 백분율로도 쓸 수 있습니다. 100%는 L 값 100, 1.0이 아닙니다. L=0% 또는 0은 깊은 검정(빛 없음), L=100% 또는 100은 확산된 흰색입니다.

편리하게도 L=50% 또는 50은 중간 회색이고, L 값의 증가가 시각적으로 고르게 분포됩니다: Lab 색상 공간은 시각적으로 균등하도록 설계되었습니다.

a, b 축은 색상(hue)을 나타냅니다; a 축 양수는 보라빛이 도는 빨강, 음수는 보색인 초록입니다. b 축 양수는 노랑, 음수는 보색인 파랑/보라입니다. 채도가 낮은 색은 a, b 값이 작고 L 축에 가까우며, 채도가 높은 색은 L 축에서 멀리 떨어집니다.

조명(illuminant)은 D50 흰색이며, 표준화된 주광 스펙트럼(색온도 5000K)입니다. 완전 확산 반사체에 반사된 빛을 기준으로 하며, 맑은 날 햇빛 색상과 비슷합니다. D50은 ICC 색상 변환의 프로파일 접속 공간, Lab 편집을 지원하는 이미지 편집기의 기준, 측색기나 분광방사계의 Lab 측정에서도 사용됩니다.

다른 기준점에서 지정된 색상을 변환하는 것은 색상 적응 변환(chromatic adaptation transform)이라고 하며, 새로운 조명 환경에 눈이 적응할 때의 변화를 모델링합니다. 선형 브래드포드 알고리즘 [ICC](원래 브래드포드 알고리즘 [Bradford-CAT]의 단순화 버전)는 업계 표준 색상 적응 변환으로, 행렬 곱셈만으로 쉽게 계산할 수 있습니다.

CIE LCH는 Lab과 동일한 L 축을 가지며, 극좌표계 C(채도, chroma)와 H(색상각, hue)를 사용합니다. 즉, 원통 좌표계입니다. C는 L 축에서의 거리이며, H는 a 축 양수에서 b 축 양수 방향으로의 각도입니다.

참고: Lab 및 LCH의 L 축은 HSL의 L 축과 혼동하면 안 됩니다. 예를 들어, HSL에서는 sRGB 파랑(#00F)과 노랑(#FF0)이 L 값 50%로 같지만, 실제로 파란색이 훨씬 더 어둡습니다. Lab에서는 더 명확하게 구별됩니다: sRGB 파랑은 lab(29.567% 68.298 -112.0294), sRGB 노랑은 lab(97.607% -15.753 93.388)입니다. Lab과 LCH에서 두 색의 L 값이 같으면, 시각적으로도 밝기가 동일합니다. HSL 및 관련 RGB 극좌표 모델은 LCH가 Lab에 준 혜택을 RGB에 적용하려고 만들어졌지만, 정확도는 많이 떨어집니다.

CIE Lab 및 LCH는 널리 사용되지만, 몇 가지 문제가 알려져 있습니다. 특히:

색상선(hue linearity)

파란색 영역(LCH Hue 270°~330°)에서 실제 색상선이 예측과 다릅니다. 같은 hue, 다른 채도의 파란색을 그리면 중성축에서 직선이 아니라 곡선이 됩니다. 즉, 채도가 낮아질수록 보랏빛이 나타납니다.

색상 균등(hue uniformity)

LCH의 hue는 대체로 고르게 분포하지만, (HSL, HWB보다 훨씬 우수) 완벽하지는 않습니다.

높은 채도에서의 과예측(over-prediction of high Chroma differences)

높은 채도 색상에서 채도 변화가 중성색보다 덜 눈에 띕니다.

이러한 문제는 균등한 색상 그라데이션, 색상 공간 간 영역 매핑, 두 색상 간 시각적 차이 계산 등에 영향을 미칩니다.

이를 보완하기 위해, 두 색상 간 시각적 차이를 계산하는 공식(ΔE)이 점점 더 정확해지고(복잡해짐) 있습니다. 현행 업계 표준 공식인 ΔE 2000은 Lab과 LCH의 일부 문제를 잘 완화합니다. 샘플 구현은 § 20.1 ΔE2000에 있습니다.

하지만 색상선 곡률 문제까지 해결되진 않습니다.

9.2. Oklab 및 OKLCh

이 절은 규범적이지 않습니다.

최근 Oklab이라는 개선된 Lab 계열 색상 공간이 개발되었습니다 [Oklab]. 극좌표 버전은 OKLCh라고 부릅니다. 방대한 데이터셋에서 시각적으로 유사한 색상을 수치적으로 최적화하여 만들어졌으며, 기존 CIE LCH보다 색상선, 색상 균등성, 채도 균등성이 개선되었습니다.

CIE Lab과 마찬가지로 중심 명도 L 축이 있으며, 보통 [0,1] 범위의 단위 없는 숫자로 표기합니다; CSS와의 호환성을 위해 백분율로도 쓸 수 있습니다. 100%는 L 값 1.0입니다. L=0% 또는 0.0은 깊은 검정, L=100% 또는 1.0은 확산된 흰색입니다.

참고: CIE Lab이 확산 흰색 적응을 전제로 하는 것과 달리, Oklab은 정의된 색상에 적응한다고 가정하여 스케일 불변성을 지향합니다.

CIE Lab과 같이 a, b 축은 색상(hue)을 나타냅니다; a 축 양수는 보라빛이 도는 빨강, 음수는 보색인 초록, b 축 양수는 노랑, 음수는 보색인 파랑/보라입니다.

조명은 D65로, 대부분의 RGB 색상 공간과 동일한 기준점입니다.

OKLCh는 Oklab과 같은 L 축을 가지며, 극좌표계 C(채도)와 H(색상각)를 사용합니다.

참고: CIE LCH에서 Chroma가 200 이상까지 갈 수 있는 것과 달리, OKLCh의 Chroma 값은 보통 0.5 정도까지입니다. 색상각(hue angle)은 두 모델 간 대체로 비슷하지만, 정확히 일치하진 않습니다.

Oklab이 CIE Lab보다 시각적으로 더 균등하므로, 색상 차이 계산이 3차원 공간 거리(루트의 제곱 합)로 간단합니다. 매우 단순하지만, 샘플 구현은 § 20.2 ΔEOK에 있습니다.

9.3. Lab 및 LCH 지정: lab() 및 lch() 함수 표기법

CSS에서는 색상을 Lab 및 LCH로 직접 표현할 수 있습니다.

lab() = lab( [<percentage> | <number> | none]
      [ <percentage> | <number> | none]
      [ <percentage> | <number> | none]
      [ / [<alpha-value> | none] ]? )

Lab에서는 첫 번째 인자가 CIE 명도(Lightness, L)를 지정합니다. 이 값은 0% 또는 0에서 100% 또는 100까지의 숫자입니다. 0% 또는 0 미만 값은 파싱 시점에 0%로 클램핑되어야 하며, 100% 또는 100 초과 값도 파싱 시점에 100%로 클램핑됩니다.

두 번째와 세 번째 인자는 Lab 색 공간에서 "a" 축과 "b" 축을 따라 측정한 거리입니다. 이는 앞 절에서 설명된 대로입니다. 이 값들은 부호가 있으며 (양수와 음수 모두 허용함) 이론적으로는 범위가 없습니다 (그러나 실제 색상에서는 ±160을 넘지 않습니다).

네 번째 <alpha-value> 구성요소는 선택 사항이며, 슬래시로 구분되고, 알파 채널을 나타냅니다.

Lab 색상(클램핑 후)의 명도가 0% 또는 100%일 경우, 그 색상은 각각 검정 또는 흰색으로 표시됩니다. 이는 디스플레이에 대한 색 공간 매핑 때문입니다.

 lab(29.2345% 39.3825 20.0664);
 lab(52.2345 40.1645 59.9971);
 lab(60.2345 -5.3654 58.956);
 lab(62.2345% -34.9638 47.7721);
 lab(67.5345 -8.6911 -41.6019);
 lab(29.69% 44.888% -29.04%)

lch() = lch( [<percentage> | <number> | none]
      [ <percentage> | <number> | none]
      [ <hue> | none]
      [ / [<alpha-value> | none] ]? )

CIE LCH에서 첫 번째 인자는 CIE 명도 L을 지정하며, lab()의 명도 인자와 동일하게 해석됩니다.

두 번째 인자는 채도 C이며, ("색의 양"을 대략적으로 나타냄). 최소 유효값은 0이고, 최대값은 이론적으로 무제한이지만 실제로는 230을 넘지 않습니다. 음수 값이 제공되면 파싱 시점에 0으로 클램핑됩니다.

세 번째 인자는 색상각 H입니다. <hue> 인자와 유사하게 해석되지만, hsl()처럼 각도와 색상 매핑이 동일하지는 않고, 시각적으로 고르게 분포됩니다. 0deg는 a 축 양(보라빛 빨강)을 가리키며, (360deg, 720deg 등도 같음) 90deg는 b 축 양(겨자 노랑), 180deg는 a 축 음(초록빛 시안), 270deg는 b 축 음(하늘 파랑)입니다.

옵션으로 네 번째 <alpha-value> 컴포넌트가 있으며, 슬래시로 구분되어, 알파 컴포넌트를 나타냅니다.

LCH 색상의 채도(C)가 0%이면 hue 컴포넌트는 무효(powerless)입니다. LCH 색상의 명도(L)가 클램핑 후 0% 또는 100%이면, 색상은 검정 또는 흰색으로 표시됩니다(디스플레이 영역 매핑 결과).

 lch(29.2345% 44.2 27);
 lch(52.2345% 72.2 56.2);
 lch(60.2345 59.2 95.2);
 lch(62.2345% 59.2 126.2);
 lch(67.5345% 42.5 258.2);
 lch(29.69% 45.553% 327.1)

lab 및 lch는 이 명세에서 새로 도입된 것이므로 Web 호환성 문제가 없으며, lab() 및 lch()는 레거시 색상 문법(모든 인자를 쉼표로 구분하는 방식)을 지원하지 않습니다. 이 함수들에서 쉼표를 사용하면 오류입니다.

9.4. Oklab 및 OKLCh 지정: oklab() 및 oklch() 함수 표기법

CSS에서는 색상을 Oklab 및 OKLCh로 직접 표현할 수 있습니다.

oklab() = oklab( [ <percentage> | <number> | none]
    [ <percentage> | <number> | none]
    [ <percentage> | <number> | none]
    [ / [<alpha-value> | none] ]? )

Oklab에서 첫 번째 인자는 Oklab 명도를 지정합니다. 이 값은 0% 또는 0에서 100% 또는 1.0 범위입니다.

0% 또는 0.0 미만 값은 파싱 시점에 0%로 클램핑되어야 하며, 100% 또는 1.0 초과 값은 파싱 시점에 100%로 클램핑됩니다.

두 번째, 세 번째 인자는 Oklab 색상 공간의 "a", "b" 축 방향 거리이며, 앞 절에서 설명한 바와 같습니다. 이 값들은 부호 있는 값(양수, 음수 모두 허용)이고, 이론적으로 제한이 없지만(실제로는 ±0.5를 넘지 않음) 실무에서는 범위 내에서 사용됩니다.

슬래시(/)로 구분되는 선택적 네 번째 <alpha-value> 컴포넌트가 있으며, 이는 알파 컴포넌트를 나타냅니다.

Oklab 색상의 명도가 0% 또는 0, 혹은 100% 또는 1.0인 경우, 색상은 각각 검정 또는 흰색으로 표시됩니다. 이는 디스플레이 색역 매핑(gamut mapping)에 의해 결정됩니다.

 oklab(40.101% 0.1147 0.0453);
 oklab(59.686% 0.1009 0.1192);
 oklab(0.65125 -0.0320 0.1274);
 oklab(66.016% -0.1084 0.1114);
 oklab(72.322% -0.0465 -0.1150);
 oklab(42.1% 41% -25%)

oklch() = oklch( [ <percentage> | <number> | none]
      [ <percentage> | <number> | none]
      [ <hue> | none]
      [ / [<alpha-value> | none] ]? )

OkLCh에서 첫 번째 인자는 OkLCh 명도 L을 지정하며, oklab()의 명도 인자와 동일하게 해석됩니다.

두 번째 인자는 채도 C입니다. 최소 유효값은 0이고, 최대값은 이론적으로 제한이 없으나 실제로는 0.5를 넘지 않습니다. 음수 값이 입력되면, 파싱 시점에 0으로 클램핑됩니다.

세 번째 인자는 색상각 H입니다. <hue> 인자처럼 hsl(), lch()와 유사하게 해석되지만 각도가 같은 방식으로 색상에 매핑되지는 않습니다. 0deg는 양의 "a"축(자주빛 붉은색)을 향하고, (360deg, 720deg 등도 마찬가지) 90deg는 양의 "b"축(겨자 노란색)을 향합니다. 180deg는 음의 "a"축(녹청색)을, 270deg는 음의 "b"축(하늘색)을 가리킵니다.

네 번째 <alpha-value> 구성요소는 선택적이며, 슬래시로 구분되고, 알파 구성요소를 나타냅니다.

OkLCh 색상의 채도가 0% 또는 0이면 색상 구성요소는 비활성입니다. OkLCh 색상의 명도가 0% 또는 0, 혹은 100% 또는 1.0이면, 해당 색상은 각각 검정 또는 흰색으로 표시됩니다. 이는 디스플레이로 색 공간 매핑되기 때문입니다.

 oklch(40.101% 0.12332 21.555);
 oklch(59.686% 0.15619 49.7694);
 oklch(0.65125 0.13138 104.097);
 oklch(0.66016 0.15546 134.231);
 oklch(72.322% 0.12403 247.996);
 oklch(42.1% 48.25% 328.4)

oklab 또는 oklch는 이 명세의 이 레벨에서 새롭게 도입된 것이므로 웹 호환성 문제가 없습니다. oklab()와 oklch()는 모든 인자를 쉼표로 구분하는 레거시 색상 문법을 지원하지 않습니다. 이 함수 내에서 쉼표를 사용하면 오류입니다.

9.5. Lab 또는 Oklab 색상을 LCH 또는 OkLCh 색상으로 변환하기

극좌표 형태로의 변환은 매우 간단합니다:

1. C = sqrt(a^2 + b^2)
2. if (C > epsilon) H = atan2(b, a) 그렇지 않으면 H는 missing
3. L은 그대로

a와 b 값이 매우 작을 때(Chroma가 0에 근접할 경우), 시각적으로 색상이 중성축에 위치해 변하지 않더라도, 값이 조금만 변화해도 색상각이 심하게 흔들리며 사실상 임의로 표시될 수 있습니다. CSS에서는 이런 경우 색상 정보가 비활성으로 간주되며, LCH 또는 OkLCh로 변환할 때 값 없음(missing)으로 처리됩니다. CSS가 아닌 환경에서는 NaN 등으로 해당 값을 표현할 수 있습니다.

9.6. LCH 또는 OkLCh 색상을 Lab 또는 Oklab 색상으로 변환하기

직교좌표 형태로의 변환도 매우 간단합니다:

1. H가 missing이면, a = b = 0
2. 그렇지 않으면,
   1. a = C cos(H)
   2. b = C sin(H)
3. L은 그대로

10. 미리 정의된 색상 공간

CSS는 여러 미리 정의된 색상 공간을 제공합니다. 대표적으로 display-p3 [Display-P3]가 있으며, 이는 최신 광색역 모니터에서 일반적인 넓은 색상 영역입니다. prophoto-rgb는 사진가들이 널리 사용하며, rec2020 [Rec.2020]는 방송 산업 표준으로, 실세계의 거의 모든 색상을 표현할 수 있는 초광색역 공간입니다.

10.1. 미리 정의된 색상 지정: color() 함수

color() 함수는 색상을 특정 명시된 색상 공간에서 지정할 수 있게 해줍니다(대부분의 다른 색상 함수가 암묵적으로 sRGB를 사용하는 것과 달리). 문법은 다음과 같습니다:

color() = color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<colorspace-params> = [ <predefined-rgb-params> | <xyz-params>]
<predefined-rgb-params> = <predefined-rgb> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020
<xyz-params> = <xyz-space> [ <number> | <percentage> | none ]{3}
<xyz-space> = xyz | xyz-d50 | xyz-d65

color 함수는 특정 명시적 색상 공간에서 색상 파라미터를 받습니다.

아래 설명된 대로 잘못된 색상이거나, 유효한 색상일 수 있습니다.

파라미터 형식은 다음과 같습니다:

• <ident>는 미리 정의된 색상 공간 중 하나입니다(예: display-p3). 개별 미리 정의된 색상 공간은 <number> 또는 <percentage> 또는 두 가지 모두 사용 가능 여부를 제한할 수 있습니다.

  <ident>가 존재하지 않는 색상 공간을 지정하면(미리 정의된 색상 공간과 일치하지 않으면) 해당 인자는 잘못된 색상으로 처리됩니다.

• 해당 색상 공간의 3개 파라미터(RGB 또는 XYZ 값).

색상 영역을 벗어난(out of gamut) 색상의 컴포넌트 값은 0 혹은 0% 미만, 1 혹은 100% 초과일 수 있습니다. 이런 값은 잘못된 것이 아니라, 중간 연산에서 유지됩니다; 디스플레이에서는 css gamut mapping(상대적 컬러리메트릭 방식)으로 실제 값이 0/0%~1/100% 범위로 맞춰집니다.

• 옵션으로 슬래시로 구분된 <alpha-value>.

color()는 이번 현행 표준 단계에서 새로 도입된 것이므로 웹 호환성 문제가 없으며, color()는 모든 인자를 쉼표로 구분하는 레거시 색상 문법(legacy color syntax)을 지원하지 않습니다. 이 함수에서 쉼표를 사용하면 오류입니다.

색상이 잘못된 색상이거나 색상 영역을 벗어난(out of gamut) 색상인 경우 표시할 수 없습니다.

지정한 색상이 표시할 수 있습니다라면, (즉 잘못된 색상도 아니고 색상 영역을 벗어난 색상도 아니면) 이것이 color() 함수의 실제 값(actual value)입니다.

지정한 색상이 유효한 색상이지만 표시할 수 없는 색상이면, 실제 값은 지정한 색상을 css gamut mapping을 거쳐 디스플레이에 맞게 변환한 값입니다.

색상이 잘못된 색상이면, 사용 값(used value)은 불투명 검정입니다.

color(rec2020 0.42053 0.979780 0.00579);

lch(85.9017% 166.116 138.207);

color(display-p3 -0.350289 1.00707 -0.144209);

color(profoto-rgb 0.4835 0.9167 0.2188)

10.2. 미리 정의된 sRGB 색상 공간: sRGB 키워드

아래에서 정의하는 sRGB 미리 정의된 색상 공간은 레거시 sRGB 색상(예: rgb())에 사용되는 것과 동일합니다.

srgb

srgb [SRGB] 색상 공간은 숫자 3개 파라미터를 받으며, 각각 빨강, 초록, 파랑 컴포넌트입니다. 영역 내 색상은 세 컴포넌트 모두 [0, 1] 범위에 있습니다. 기준백색점은 D65입니다.

[SRGB] 에서는 인코딩(encoding)과 일반(typical) 두 가지 시청 조건을 규정하는데, [ICC]에서는 색상 변환 및 최적 시청에 인코딩 조건(아래 표)을 사용할 것을 권장합니다.

sRGB는 CSS의 기본 색상 공간이며, 모든 레거시 색상 함수에서 사용됩니다.

주요 특성은 다음과 같습니다:

	x	y
빨강 색도	0.640	0.330
초록 색도	0.300	0.600
파랑 색도	0.150	0.060
백색 색도	D65
전달 함수	아래 참고
백색 휘도	80.0 cd/m2
검정 휘도	0.20 cd/m2
이미지 상태	디스플레이 기준(display-referred)
백분율	R, G, B에 허용됨
백분율 기준 범위	R,G,B: 0% = 0.0, 100% = 1.0

let sign = c < 0? -1 : 1;
let abs = Math.abs(c);

if (abs <= 0.04045) {
  cl = c / 12.92;
}
else {
  cl = sign * (Math.pow((abs + 0.055) / 1.055, 2.4));
}

c는 감마 인코딩된 빨강, 초록, 파랑 컴포넌트입니다. cl은 해당 선형광(linear-light) 컴포넌트입니다.

10.3. 미리 정의된 선형광 sRGB 색상 공간: srgb-linear 키워드

sRGB-linear 미리 정의된 색상 공간은 srgb와 동일하나 전달 함수가 선형광(linear-light, 감마 인코딩 없음)이라는 점만 다릅니다.

srgb-linear

srgb-linear [SRGB] 색상 공간은 숫자 3개 파라미터를 받으며, 각각 빨강, 초록, 파랑 컴포넌트입니다. 영역 내 색상은 세 컴포넌트 모두 [0, 1] 범위에 있습니다. 기준백색점은 D65입니다.

주요 특성은 다음과 같습니다:

	x	y
빨강 색도	0.640	0.330
초록 색도	0.300	0.600
파랑 색도	0.150	0.060
백색 색도	D65
전달 함수	단순히 입력값(cl=c), 아래 참고
백색 휘도	80.0 cd/m2
검정 휘도	0.20 cd/m2
이미지 상태	디스플레이 기준(display-referred)
백분율	R, G, B에 허용됨
백분율 기준 범위	R,G,B: 0% = 0.0, 100% = 1.0

cl = c;

c는 빨강, 초록, 파랑 컴포넌트입니다. cl은 해당 선형광 컴포넌트(동일값)입니다.

밴딩(banding) 현상을 방지하려면 더 높은 정밀도가 srgb-linear에 필요하며, srgb보다 더 높아야 합니다.

예를 들어, 다음 두 색상은 같습니다:

 color(srgb 0.691 0.139 0.259)
 color(srgb-linear 0.435 0.017 0.055)

10.4. 미리 정의된 Display P3 색상 공간: display-p3 키워드

display-p3

display-p3 [Display-P3] 색상 공간은 숫자 3개 파라미터를 받으며, 각각 빨강, 초록, 파랑 컴포넌트입니다. 영역 내 색상은 세 컴포넌트 모두 [0, 1] 범위에 있습니다. [DCI-P3]와 동일한 주요 색도(primary chromaticities)를 사용하지만, D65 기준백색점과 sRGB와 동일한 전달 곡선을 사용합니다.

최신 디스플레이, TV, 노트북과 스마트폰 화면은 display-p3 영역의 모든 색상 또는 거의 모든 색상을 표시할 수 있습니다.

주요 특성은 다음과 같습니다:

	x	y
빨강 색도	0.680	0.320
초록 색도	0.265	0.690
파랑 색도	0.150	0.060
백색 색도	D65
전달 함수	srgb와 동일
백색 휘도	80.0 cd/m2
검정 휘도	0.80 cd/m2
이미지 상태	디스플레이 기준(display-referred)
백분율	R, G, B에 허용됨
백분율 기준 범위	R,G,B: 0% = 0.0, 100% = 1.0

10.5. 미리 정의된 선형광 Display P3 색 공간: display-p3-linear 키워드

display-p3-linear 미리 정의된 색 공간은 display-p3와 동일하지만 전달 함수(transfer function)가 선형광(감마 인코딩 없음)이라는 점이 다릅니다.

다음과 같은 특성을 갖고 있습니다: