CSS 컬러 모듈 레벨 5

W3C 워킹 드래프트,

이 문서에 대한 자세한 정보
이 버전:
https://www.w3.org/TR/2026/WD-css-color-5-20260507/
최신 공식 버전:
https://www.w3.org/TR/css-color-5/
에디터스 드래프트:
https://drafts.csswg.org/css-color-5/
이전 버전:
히스토리:
https://www.w3.org/standards/history/css-color-5/
피드백:
CSSWG 이슈 저장소
편집자:
Chris Lilley (W3C)
Una Kravets (Google)
Lea Verou (초청 전문가)
이전 편집자:
Adam Argyle (Google)
사양에 대한 수정 제안:
GitHub 에디터
델타 사양:
예
테스트 스위트:
https://wpt.fyi/results/css/css-color/

Copyright © 2026 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.

요약

이 모듈은 CSS Color [css-color-4]를 확장하여 색상 조정 함수, 커스텀 색상 공간(ICC 프로필), contrast-color(), light-dark(), device-cmyk() 등을 추가합니다.

CSS는 구조화된 문서(예: HTML, XML 등)의 렌더링을 화면, 인쇄물 등에서 설명하는 언어입니다.

이 문서의 상태

이 섹션은 이 문서가 출판된 시점의 상태를 설명합니다. 현재 W3C 발행물 목록과 이 기술 보고서의 최신판은 W3C 표준 및 초안 인덱스에서 확인할 수 있습니다.

이 문서는 CSS 워킹 그룹 에서 워킹 드래프트로 권고 단계를 사용하여 발행하였습니다. 워킹 드래프트로 발행했다는 것은 W3C 및 그 회원의 공식적인 지지를 의미하지는 않습니다.

이 문서는 초안이며 언제든 업데이트, 교체 또는 다른 문서로 대체될 수 있습니다. 이 문서를 진행 중인 작업 외의 목적으로 인용하는 것은 적절하지 않습니다.

피드백은 GitHub 이슈로 작성해 주세요(권장). 제목에 사양 코드 “css-color”를 포함해서 예시처럼 남겨주세요: “[css-color] …의견 요약…”. 모든 이슈와 코멘트는 아카이브되어 있습니다. 또는 (아카이브됨) 공개 메일링 리스트 www-style@w3.org로 전달할 수도 있습니다.

이 문서는 2025년 8월 18일 W3C 프로세스 문서의 적용을 받습니다.

이 문서는 W3C 특허 정책 하에서 운영되는 그룹에서 제작되었습니다. W3C는 그룹 산출물과 관련된 공개 특허 공개 목록을 유지합니다. 해당 페이지에는 특허 공개 방법에 대한 안내도 포함되어 있습니다. 개별적으로 특허에 대해 실질적으로 인지하고, 그 특허가 필수 클레임을 포함한다고 믿는 자는 W3C 특허 정책 6항에 따라 정보를 공개해야 합니다.

다음 기능들은 위험에 처해 있으며, CR(Candidate Recommendation) 단계 동안 삭제될 수 있습니다:

“위험(at-risk)”은 W3C 프로세스 전문 용어로, 해당 기능이 반드시 삭제되거나 지연될 위험이 있다는 의미는 아닙니다. 이는 WG가 기능의 상호 운용성 구현이 시기적절하게 어려울 수 있다고 판단했음을 의미하며, 이를 표시함으로써 Proposed Rec 단계로 전환할 때 필요시 기능을 삭제할 수 있도록 하며, 기능 없이 새로운 Candidate Rec을 먼저 발행하지 않아도 됩니다.

1. 소개

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

이 모듈은 새로운 함수 contrast-color(), color-mix() 및 light-dark()를 추가하고, 기존 함수에는 상대 색상 구문을 확장합니다.

또한 color() 함수도 확장하여 미리 정의된 색상 공간뿐만 아니라, ICC 프로필로 정의된 커스텀 색상 공간(계측된 CMYK 포함)도 CSS에서 사용할 수 있게 합니다.

그리고 device-cmyk를 추가하여, 교정되지 않은 cmyk 색상의 표현도 지원합니다.

2. <color> 문법

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

<color> = <color-base> | currentColor | <system-color> | 
      <contrast-color()> | <device-cmyk()>  | <light-dark-color>

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

절대 색상은 계산 결과가 절대적이고 색상 계측이 가능한 의미를 갖는 <color> 값입니다. 즉, 값이 다음과 같지 않음을 의미합니다:

위 값들은 <color-mix()> 나 상대 색상 구문 내에서도 사용할 수 없습니다.

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

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

<hsl()>, <hsla()>, <hwb()>, <lch()>, <oklch()> 색상 함수는 원통 극(극좌표형) 색상 표현을 <hue> 각도로 사용합니다. 나머지 색상 함수는 직교 직사각형 색상 표현을 사용합니다.

3. 색상 혼합: color-mix() 함수

웹 개발자, 디자인 도구 및 디자인 시스템 개발자는 컴포넌트 컬러 관계의 스케일링에 색상 함수를 자주 사용합니다. 여러 플랫폼과 다양한 사용자 취향을 지원하는 디자인 시스템, 그리고 UI의 다크 모드 등 기능이 늘어나면서, 색상을 일일이 수동으로 지정하지 않고 계산 가능한 단일 소스를 활용해 스킴을 생성하는 것이 더욱 유용해졌습니다.

LC color picker
chloropleth map of the US

위: CIE LCH 공간에서 동작하는 컬러 피커. 여기서는 두 색상을 사용해 크로마-명도 평면(고정된 Hue)상에 색상 스케일을 정의합니다. 아래: 컬러 스케일을 이용한 코로플레스(choropleth) 맵.

현재는 Sass, HSL 값의 calc(), 혹은 PostCSS 등을 활용합니다. 하지만 전처리기는 동적으로 조정된 색상에는 작동하지 못하며, 현존하는 모든 솔루션은 sRGB 색영역과 HSL의 지각적 한계(컬러 휠에서 색상이 뭉쳐지고, 노랑과 파랑처럼 시각적으로 매우 다른 명도도 HSL에서는 같은 lightness를 가질 수 있음)에 제한됩니다.

이 요구를 충족하기 위해 color-mix() 함수는 하나 이상의 <color> 명세 리스트를 받아, 지정한 <color-space> 및 지정한 비율로 혼합한 결과를 반환합니다.

color-mix() = color-mix( <color-interpolation-method>? , [ <color> && <percentage [0,100]>? ]#)
테스트

3.1. 혼합 색상 공간

색상 보간법을 지정하지 않으면 Oklab을 사용합니다. 그렇지 않으면, 지정된 색상 공간으로 혼합하십시오.

예를 들어, 이 두 가지는 완전히 동일합니다: 
color-mix(in oklab, firebrick, goldenrod)
color-mix(firebrick, goldenrod)

3.2. 백분율 정규화

백분율(percent)은 0%에서 100% 사이여야 합니다. 음수 백분율은 명시적으로 허용되지 않습니다. 백분율은 혼합 비율 정규화에 따라 정규화됩니다.

테스트
다음 구문 형식은 모두 동일합니다: 
color-mix(in lch, purple 50%, plum 50%)
color-mix(in lch, purple 50%, plum)
color-mix(in lch, purple, plum 50%)
color-mix(in lch, purple, plum)
color-mix(in lch, plum, purple)
color-mix(in lch, purple 80%, plum 80%)

모두 purple과 plum을 lch에서 50-50으로 혼합한 결과를 만듭니다: lch(51.51% 52.21 325.8) 또는 rgb(68.51% 36.01% 68.29%).

하지만 알파가 1보다 작아서, 다음 경우는 동일하지 않습니다:

color-mix(in lch, purple 30%, plum 30%)

이 경우 lch(51.51% 52.21 325.8 / 0.6) 또는 rgb(68.51% 36.01% 68.29% / 0.6)입니다.

3.3. color-mix 결과 계산

color-mix()를 계산하려면 :

  1. 함수에 전달된 혼합 항(mix item) 리스트로부터, 혼합 비율을 정규화(normalize)합니다. "강제 정규화" 플래그는 true로 하며, 이때 items와 leftover가 그 결과입니다.

  2. leftover가 100%이면, 지정한 보간 <color-space>로 변환한 투명 검정(transparent black)을 반환합니다.

  3. alpha mult를 1 - leftover(leftover는 0~1의 수 해석)로 설정.

  4. items의 길이가 1일 경우 그 유일한 항의 색상을 지정된 보간 <color-space>로 변환해 color에 설정합니다.

    그렇지 않은 경우:

    1. item stack을 스택으로 두고, items를 역순으로 쌓습니다. (첫 번째 항이 스택 맨 위)

    2. item stack의 길이가 2 이상일 동안:

      1. stack pop을 두 번 하여 a와 b에 저장. combined percentage는 a와 b의 백분율의 합.

      2. CSS Color 4 § 13. 색상 보간에 따라, a와 b의 색상을 보간합니다. 진행 퍼센트는 (b의 백분율) / combined percentage. 색상 공간이 원통 극 색상(cylindrical polar color)인 경우 <hue-interpolation-method> 로 hue 보간 방식을 지정함 (CSS Color 4 § 13.4 hue 보간 참조). <hue-interpolation-method>가 없으면 shorter를 사용합니다.

      3. 결과 색상과 combined percentage의 백분율을 가진 mix item을 새로 만들고, push로 item stack에 쌓습니다.

    3. 마지막 1개 항의 색상을 color에 설정합니다.

  5. color의 알파 컴포넌트에 alpha mult를 곱합니다.

  6. color를 반환합니다.

참고: 원통 극 색상(cylindrical polar color) 공간에서는 혼합 순서에 따라 결과가 다릅니다. hue 원(circle)을 "짧게(shorter)" 혹은 "길게(longer)" 도는 방향이 그 전에 어떤 혼합이 이루어졌느냐에 따라 달라질 수 있기 때문입니다. 이 알고리즘은 지정된 순서대로 각각의 색상을 혼합하며, 그 결과를 리스트의 다음 값과 섞습니다. 직교 직사각형 색상 공간에서는 순서와 관계없이 계산할 수 있습니다.

테스트
이 예시는 peru 40%와 palegoldenrod 60%를 혼합합니다. 
color-mix(in lch, peru 40%, palegoldenrod)

혼합은 lch 색 공간에서 이루어집니다. 아래는 L(명도) 축을 따라 위에서 내려 본 ab 평면 그림입니다:

두 색상의 혼합과 결과 혼합 색상. 우리는 CIE L축을 따라 ab 평면을 내려다보고 있습니다. 두 축 a와 b가 원점에서 교차하며, 원점이 도표의 중앙에 위치합니다.
CIE LCH에서 peru와 palegoldenrod의 혼합. peru의 색상각(positive a축 기준)은 63.677도이고, palegoldenrod는 98.834도입니다. peru의 chroma(중앙 축까지의 거리)는 54.011, palegoldenrod는 31.406입니다. 모든 가능한 혼합 결과는 곡선을 따라 존재하며, 40%/60% 혼합이 표시됨.

계산은 다음과 같습니다:

이 예시는 lch 색 공간에서 teal과 olive를 혼합합니다. 각 lch 성분은 teal의 65%, olive의 35% 값입니다.

참고: hue와 chroma를 보간하면 중간 색상들도 엔드포인트 색상만큼 채도가 보존됩니다.

color-mix(in lch, teal 65%, olive);

두 색상의 혼합과 그 결과. CIE L축을 따라 ab 평면을 내려다보는 시점입니다. 두 축 a, b가 원점에서 교차하며, 원점이 도표의 중심에 있습니다.

teal과 olive 혼합. teal의 hue 각(positive a축 기준)은 196.4524도이고, olive는 99.5746도입니다. teal의 chroma(중앙 축까지 거리)는 31.6903, olive는 56.8124입니다. 혼합 결과는 곡선을 따라 나타나며, 65%/35% 혼합이 표시됨.

계산은 다음과 같습니다:

이 예시에서는 두 백분율 모두 0이어서 합도 0입니다: 
color-mix(in oklch, teal 0%, olive 0%);

따라서 결과는 oklch 색상 공간의 투명 검정입니다:
oklch(0% 0 none / 0)

이 예는 세 가지 색을 혼합합니다. 백분율이 지정되지 않았으므로 각 색상은 최종 결과의 1/3씩 기여합니다. 
color-mix(in oklab, teal, olive, blue);

계산은 다음과 같습니다:

3.4. 혼합 색상 공간이 color-mix에 미치는 영향

혼합에 사용하는 색상 공간의 선택은 최종 결과에 큰 영향을 줄 수 있습니다.

이 예시는 흰색과 검은색을 세 가지 서로 다른 색상 공간에서 50%로 혼합한 결과입니다. 
color-mix(in lch, white, black);
color-mix(in xyz, white, black);
color-mix(in srgb, white, black);

계산 과정은 다음과 같습니다:

LCH에서 혼합하면 L값이 50%로, 완벽하게 중간 회색(middle gray)이 되어 예상과 딱 맞게 결과가 나옵니다. (Lab에서 혼합해도 동일하며, LCH와 Lab의 Lightness 축은 동일)

XYZ에서 혼합한 결과는 너무 밝게 나옵니다. XYZ는 선형-광도(linear-light)이지만 지각적으로 균등하지 않습니다. sRGB에서 혼합한 결과도 다소 밝으며, sRGB는 지각적으로 균등하지도 않고 선형-광도도 아닙니다.

이 예시는 빨간색과 스카이블루를 xyz 색상 공간에서 혼합합니다. 혼합 비율은 빨간색 75.23% (따라서 파란색은 24.77%)입니다. 
color-mix(in xyz, rgb(82.02% 30.21% 35.02%) 75.23%, rgb(5.64% 55.94% 85.31%));

계산 과정은 다음과 같습니다:

이 예시는 흰색과 파란색을 세 가지 색상 공간에서 50%로 혼합한 결과입니다.

color-mix(in lch, white, blue);
color-mix(in oklch, white, blue);
color-mix(in srgb, white, blue);

계산 과정은 다음과 같습니다:

이 예시는 두 색상을 hsl 색 공간에서 혼합합니다. 이 때 혼합 대상 색상 중 하나는 sRGB 색역을 벗어납니다. 
color-mix(in hsl, color(display-p3 0 1 0) 80%, yellow);

계산 과정은 다음과 같습니다:

device-cmyk()는 color-mix()에서도 사용할 수 있습니다. 단, 구현체가 어떻게 계산 값을 얻는지에 따라 결과가 달라질 수 있습니다. 
color-mix(in lab, device-cmyk(0.091777 0.043303 0.312816 0.000000) 100%, yellow);

첫 번째 색상이 100%이므로, 두 번째 색상은 0%로 혼합 결과에 영향을 주지 않습니다. 따라서 결과는 첫 번째 색상을 CIE Lab에서 계산한 값입니다.

결과 시각화를 위해 device CMYK 값이 실제로 SWOP 2006 coated로 인쇄되는 상황을 상정합니다.

만약 구현이 ICC 프로필을 사용해서 lab() 색상을 얻는다면, 이 예시는 FOGRA39 Coated 프로파일을 사용합니다:

다른 구현체가 단순 색 변환 알고리즘(naive conversion)으로 sRGB 결과만 반환하는 경우도 상상할 수 있습니다.

3.5. 1이 아닌 알파(alpha)가 color-mix에 미치는 영향

지금까지 color-mix() 예시는 모두 완전히 불투명한 색상만 사용했습니다. 예시를 단순화하기 위해, 사전 곱(premultilication) 및 역사전 곱(unpremultiplied) 과정은 생략되었습니다. 이유는 이 경우 알파가 1이어서 단순히 1 곱하고 1로 나누는 셈이 되기 때문입니다.

일반적으로는 색상이 1이 아닌 알파(alpha) 값을 가질 수 있으므로 사전 곱(premultiply), 보간, 역사전 곱 언패킹 과정이 반드시 생략되어서는 안 됩니다.

이 예시는 25% 반투명 빨간색, 75% 반투명 초록색을 sRGB에서 혼합한 것입니다. 올바른(사전 곱 적용) 계산과 잘못된(사전 곱 미적용) 계산 모두를 보여줍니다. 
color-mix(in srgb, rgb(100% 0% 0% / 0.7) 25%, rgb(0% 100% 0% / 0.2));

계산 과정은 다음과 같습니다:

잘못된 계산 방식은 다음과 같습니다:

이는 아주 큰 차이입니다. 올바른 결과와 잘못된 결과의 ΔE2000은 30.7!

백분율 정규화에서 알파 승수(alpha multiplier)가 생성되면, 계산은 아래 추가 마지막 단계만 빼고 모두 동일합니다.

이 예시는 이전과 유사합니다. 25% 반투명 빨간색, 75% 반투명 초록색을 sRGB에서 혼합한 것입니다.

여기서는 첫 색상이 20%, 두 번째는 60%로 지정되었습니다. 합이 80%이므로 알파 승수는 0.8입니다.

혼합 비율은 100/80을 곱해 정규화됩니다:
20% * 100/80 = 25%
60% * 100/80 = 75%
최종 혼합 비율은 앞 사례와 동일해집니다.

color-mix(in srgb, rgb(100% 0% 0% / 0.7) 20%, rgb(0% 100% 0% / 0.2) 60%);

계산 과정은 다음과 같습니다:

참고: 보간된 알파에 알파 승수를 곱한 뒤, 그 값으로 역사전 곱을 하면 안 됩니다. 혼합 비율을 100%로 정규화하지 않는다면 그 방법이 맞지만, 여기서는 정규화하므로 이렇게 하면 혼합 색상이 이중으로 조정돼 버립니다.

4. 상대 색상

4.1. 상대 색상에 대한 처리 모델

이 명세의 이전 레벨에서는 색상 함수를 통해 각 색상 성분을 직접 지정하는 절대적인 방식만 허용되었습니다.

새로운 상대 색상(relative color) 구문은 현대 색상 구문을 확장합니다. 즉, 기존 색상을 색상 함수에서 변경할 수 있게 해줍니다. 원본 색상(origin color)이 지정되면, 각 색상 성분(및 알파 값까지) 직접 지정하거나 원본 색상에서 가져오거나 (그리고 수학 함수로 조정)할 수 있습니다.

원본 색상과 상대 색상은 동일한 색상 함수를 사용하지 않아도 됩니다.

필수 변환(Required conversion): 모든 연산은 상대 색상 함수의 색상 공간에서 수행됩니다. 만일 원래 지정된 색상 공간(originally specified color space) 을 가진 원본 색상이 다른 색상 함수였다면, 반드시 선택한 색상 함수로 변환해야 합니다. 그래야 그 구성 요소 값이 의미를 가지며, 구성 요소 키워드도 원본 색상이 아니라 상대 색상 함수를 기준으로 적용됩니다.

상대 색상의 알파 값이 명시되지 않으면, 원본 색상의 알파가 기본값입니다 (절대 구문과 달리 100%가 아닙니다).

상대 색상 구문을 사용할 때는, 색상 성분 값은 직접 지정하든 색 공간 변환에서 나오든 기준 레인지로 클램프(clamp)하지 않고 그대로 남아 있게 됩니다. 그래서 대상 색상 공간이 표현할 수 있으면, 색역 밖(out of gamut) 값도 보존됩니다.

그러나 상대 색상 구문을 사용할 때, 알파(투명도) 성분 값은 직접 지정됐든 변환됐든 반드시 기준 레인지로 클램프됩니다.

컴포넌트가 빠진 경우는 CSS Color 4 § 13.2 Interpolating with Missing Components와 동일하게 처리합니다: 원본 색상 공간과 상대 함수 색상 공간 모두 유사 성분(analogous components)을 확인해 forward로 넘깁니다.

대부분의 상대 색상 구문 활용은 구성 요소 키워드를 해당 인자(argument) 위치에 쓰지만, 어느 위치에서도 사용할 수 있습니다.

구성 요소를 기본 위치가 아닌 곳에 쓰면 주의해야 합니다. 만일 %값이 숫자로 변환되어 다른 위치에서 쓰일 때에는 "매직 스케일(magic scaling)"이 없어 의도와 달라질 수 있습니다.

device-cmyk()는 상대 구문이 없습니다.

4.2. 상대 색상 구문(Relative Color Syntax)

각 함수가 상대 색상 을 수용하도록 구문이 어떻게 확장되는지의 구체적인 내용은 아래와 같지만, 모두 공통 구조를 따릅니다:

구성요소 키워드는 <number> 또는 none을 반환한다; 원래 <percentage> 또는 <angle>로 지정된 경우, 그 <percentage>는 <number>로 해석되고 <angle>는 범위 [0, 360] 안의 도 단위 <number>로 해석된다 (이는 표준 단위이다).

테스트
예를 들어, 색상이 <percentage>로 지정되어 있다면, 같은 색상 공간(RCS)에서는 변환된 <number> 값을 사용합니다: 
html { --bluegreen:  oklab(54.3% -22.5% -5%); }
.overlay {
  background:  oklab(from var(--bluegreen) calc(1.0 - l) calc(a * 0.8) b);
}

이 예시에서 지정된 %값은 숫자로 변환되어, oklab(0.543 -0.09 -0.02)이 됩니다. RCS 결과색은 l = 1 - 0.543 = 0.457, a = -0.09 * 0.8 = -0.072, b는 -0.02로 그대로: oklab(0.457 -0.072 -0.02)이 됩니다.

예를 들어, 원본 색상이 도(degree) 단위 <angle> 색상각(hue)으로 지정됐다면, 같은 색상 공간의 RCS에서도 변환된 <number> 형태를 사용합니다: 
html { --base:  oklch(52.6% 0.115 44.6deg) }
.summary {
  background:  oklch(from var(--base) l c  calc(h + 90));
}

이 예시의 RCS 결과는 oklch(0.526 0.115 134.6)입니다.

만약 원본 색상각 <angle>가 라디안(radian) 또는 turn 등 다른 단위였다 해도, 변환된 <number> 는 각도(degree) 값이 됩니다.

구성 요소 키워드를 수학 함수로 활용하면, 원본 색상을 더 복잡하게 변형할 수 있습니다. 
html { --color: green; }
.foo {
  --darker-accent: lch(from var(--color) calc(l / 2) c h);
}

이 예시에서는 원본 색상의 명도(lightness)만 절반으로 낮춰 색상을 어둡게 했습니다. 나머지 성분은 그대로 유지됩니다.

참고로 원본 색상은 색상 키워드(sRGB)이지만, lch() 함수에서 사용되므로 자동으로 LCH 색상으로 해석됩니다.

예를 들어, 테마 색상이 불투명하게 지정되어 있지만 실제로는 부분적으로 투명하게 사용하고 싶을 때: 
html { --bg-color:  blue; }
.overlay {
  background:  rgb(from var(--bg-color) r g b / 80%);
}

이 예시에서 원본 색상의 r, g, b 성분은 그대로 유지되고, 알파만 80%로 설정되어 약간 투명해집니다. (원본 색상의 알파가 무엇이었든 상관없음)

예를 들어, sRGB 색역을 벗어나는 Display P3 색상도 잘려나가지 않고 표현 가능합니다. 
--vivid-yellow:  color(display-p3 1 1 0); 
--paler-yellow:  color(from var(--vivid-yellow) srgb r g calc(b + 0.5));

여기서 --vivid-yellow를 sRGB로 변환하면 rgb(100% 100% -34.63%) 이고, blue 성분이 음수여도 클램프되지 않습니다. RCS 계산 결과는 rgb(100% 100% 15.37%)

예를 들어 원본 색상 알파가 0.7인데, 이를 두 배로 하면 결과의 알파는 1(최대값)이지 1.4가 아닙니다. 
--tan:  oklch(78% 0.06 75 / 0.7);
--deeper-tan:  oklch(from var(--tan) l c h / calc(alpha * 2));
예를 들어 색상 그레이스케일(grayscale) 근사화: 
--blue-into-gray: rgb(from var(--color)
                    calc(r * .3 + g * .59 + b * .11)
                    calc(r * .3 + g * .59 + b * .11)
                    calc(r * .3 + g * .59 + b * .11));

이 방법으로 red는 rgb(76.5 76.5 76.5)가 됨, lime은 rgb(150.45 150.45 150.45)가 되고, blue도 rgb(150.45 150.45 150.45)가 됩니다. darkolivegreen (rgb(85 107 47))의 경우는 rgb(93.8 93.8 93.8)이 됩니다.

(비교적 러프한 예: 일단 이것이 명도 계산과 비슷해 보이지만, 실제론 빨강/초록/파랑 성분을 선형광(linear-light)이 아닌 감마 인코딩된 공간(gamma-encoded space)에서 다루기 때문. 또한, 가중치는 구시대 NTSC 색공간용이지 sRGB용이 아님.)

(이것은 문법 설명을 위한 예시일 뿐; 색상 그레이스케일 처리의 더 쉽고 정확한 방법은 oklch() 함수 사용입니다. 이 공간은 인간 시각에 더 가깝기 때문입니다: oklch(from var(--color) l 0 h)는 명도는 그대로 두고, 채도만 0으로 만들어 컬러풀함을 없앰.)

예를 들어,

color: color(from color(srgb 0 0 0 / 60%) srgb alpha 0.6 0.6 / 0.9);

여기서 alpha 컴포넌트는 <number> 값을 반환하므로 0.6이며, 결과 색상은 color(srgb 0.6 0.6 0.6 / 0.9)이 됨.

아래 예시는 역시 alpha가 0.6으로 해석되지만, rgb() 구문에서 컴포넌트 범위가 0~255이므로 전혀 다른 색상이 나옵니다: 

color: rgb(from rgb(0 0 0 / 60%) alpha 153 153 / 0.9);

결과: rgb(0.6 153 153 / 0.9) (153 153 153 / 0.9 은 아님)

이 예시에서는 무채색 원본 색상에 hue가 없고, 상대 색상 역시 hue가 없어, 그 색상을 이용하는 그라데이션에도 영향을 줍니다. 
html { --bg:  hsl(none 3% 50%); }
.foo {
  --darker-bg:  oklch(from var(--bg) calc(l * 0.8) c h);
}
.bar {
  background: linear-gradient(in Oklab to right,   var(--darker-bg),   #4C3);
}

--bg 값을 OkLCh로 변환하면 oklch(0.592 0.009 17.42)이고, 유사한 hue 컴포넌트는 유지되어 oklch(0.592 0.009 none)이 됩니다. 이 값이 상대 함수에 그대로 쓰여 더 어두운 색상 oklch(0.474 0.009 none)이 나옵니다.

그라데이션 속 연한 초록색 oklch(0.743 0.222 141.6) 과 보간할 때, 다른 색상의 hue도 그 값을 받아 oklch(0.474 0.009 141.6)이 됩니다.

즉, 그라데이션은 일정한 녹색 기운(hue)를 띕니다.

만약 구현이 hue forward 흐름 처리를 하지 않는다면, 회색 --darker-bg는 hue 0이 되고, 그라데이션 앞에는 원치 않는 붉은 색조가 남게 됩니다.

올바른(위) 및 잘못된(아래, 붉은) 그라데이션 예.

그러나 누락된 값에 대해 계산이 수행되는 경우, none은 0으로 취급된다.

4.3. 상대 sRGB 색상(Relative sRGB Colors)

sRGB 색상의 의미는 CSS Color 4 § 5 sRGB Colors에서 정의됩니다.

현대 색상 구문의 rgb() 및 rgba() 함수 문법은 다음과 같이 확장됩니다:

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

상대 색상 구문의 rgb()/rgba() 함수에서는 허용되는 구성 요소 키워드가 다음과 같습니다:

테스트
sRGB 색상 공간에서 구성 요소 조작 예시: 
rgb(from  indianred 255 g b)

이 예시는 indianred의 sRGB 값(205 92 92)에서 빨강 컴포넌트만 255로, 나머지는 그대로 두어 rgb(255 92 92)가 됩니다.

상대 sRGB 색상 구문은 반드시 현재(모던) RGB 구문에만 적용할 수 있습니다.

예를 들어, rgba에서 레거시 색상 구문의 콤마(,) 사용은 다음처럼 올바르지 않습니다. 
rgba(from  darkblue 16, 32, b, 0.5 )
대신 아래처럼 사용해야 함: 
rgb(from  darkblue 16 32 b / 0.5 )

이 예시는 darkblue의 sRGB 값(0 0 139)에서 빨강, 초록, 알파 컴포넌트만 대체하여 rgb(16 32 139 / 0.5)가 됩니다.

4.4. 상대 HSL 색상

HSL 색상의 의미는 CSS Color 4 § 7 HSL 색상: hsl() 및 hsla() 함수에 정의되어 있습니다.

현대 색상 구문(modern color syntax)의 hsl() 및 hsla() 함수의 문법은 다음과 같이 확장됩니다:

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

상대 색상 구문 안의 hsl() 또는 hsla() 함수에서 허용되는 구성 요소 키워드는 다음과 같습니다:

테스트
색상각에 180도를 더해 보색(complementary) 색을 만듭니다. 
--accent:  lightseagreen;
--complement:   hsl(from var(--accent) calc(h + 180) s l);
lightseagreen은 hsl(177deg 70% 41%)이므로 --complement는 hsl(357deg 70% 41%)입니다

상대 HSL 색상 구문은 레거시가 아닌(non-legacy) HSL 문법 형태에만 적용됩니다.

4.5. 상대 HWB 색상

HWB 색상의 의미는 CSS Color 4 § 8 HWB 색상: hwb() 함수에 정의되어 있습니다.

hwb() 함수의 문법은 다음과 같이 확장됩니다:

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

상대 색상 구문 안의 hwb() 함수에서 허용되는 구성 요소 키워드는 다음과 같습니다:

테스트

4.6. 상대 Lab 색상

Lab 색상의 의미는 CSS Color 4 § 9.1 CIE Lab 및 LCH에 정의되어 있습니다.

lab() 함수의 문법은 다음과 같이 확장됩니다:

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

상대 색상 구문 안의 lab() 함수에서 허용되는 구성 요소 키워드는 다음과 같습니다:

기본 색상의 투명도를 조정하는 여러 방법:

모든 조정은 래스팅(lossless) 방식으로, gamut 클리핑이 발생하지 않습니다. 이는 lab()이 가시 스펙트럼 전체를 포함하기 때문입니다. 반면 sRGB 기반 함수들('rgb()', 'hsl()', 'hwb()' 등)에서의 알파 조정은 HSL 또는 HWB 계산을 위해 sRGB로의 변환을 필요로 하므로 동일하지 않습니다.

정확히 동일한 명도를 유지하면서 색상을 완전히 무채색으로 만드는 예: 
--mycolor:  orchid;
// orchid is lab(62.753 52.460 -34.103)
--mygray:  lab(from var(--mycolor) l 0 0)
// mygray is lab(62.753 0 0) which is rgb(59.515% 59.515% 59.515%)

4.7. 상대 Oklab 색상

Oklab 색상의 의미는 CSS Color 4 § 9.2 Oklab 및 OkLCh에 정의되어 있습니다.

oklab() 함수의 문법은 다음과 같이 확장됩니다:

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

상대 색상 구문 안의 oklab() 함수에서 허용되는 구성 요소 키워드는 다음과 같습니다:

4.8. 상대 LCH 색상

LCH 색상의 의미는 CSS Color 4 § 9.1 CIE Lab 및 LCH에 정의되어 있습니다.

lch() 함수의 문법은 다음과 같이 확장됩니다:

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

상대 색상 구문 안의 lch() 함수에서 허용되는 구성 요소 키워드는 다음과 같습니다:

테스트
lch(from peru calc(l * 0.8) c h) 은 peru()보다 20% 어두운 색을 만들며, 채도와 색상각은 변경하지 않습니다. 결과는 lch(49.80256 54.0114 63.6769) 입니다
색상각에 180도를 더해 보색을 만듭니다. 
--accent:  lightseagreen;
--complement:   lch(from var(--accent) l c calc(h + 180));
lightseagreen은 lch(65.4937 39.4484 190.1013)이므로 --complement는 lch(65.4937 39.4484 370.1013)입니다
정확히 동일한 명도를 유지하면서 색상을 완전히 무채색으로 만드는 예: 
--mycolor:  orchid;
// orchid is lch(62.753 62.571 326.973)
--mygray:  lch(from var(--mycolor) l 0 h)
// mygray is lch(62.753 0 326.973) which is rgb(59.515% 59.515% 59.515%)

하지만 HSL과 달리, 이러한 조작들이 항상 색역 내(in-gamut) 결과를 보장하지는 않습니다.

이 예에서는 동일한 명도와 채도를 유지하면서 색상각만 120도씩 차이나는 삼색(triad)을 만들려 합니다. 원본 색상은 RGB 색역 내에 있으나, LCH에서 색상각을 회전하면 색역 밖(out of gamut) 색상이 생성됩니다. 
--mycolor:  lch(60% 90 320);
lch(from var(--mycolor) l c calc(h - 120));

이 경우 매우 높은 채도의 청록색이 만들어지며, lch(60% 90 200) 는 color(srgb -0.6 0.698 0.772)로 변환되어 sRGB에서 음수의 빨강값을 가지므로 색역 밖입니다. 실제로 display-p3에서도 색역 밖이며: color(display-p3 -0.46 0.68 0.758) 이고 rec2020에서도: color(rec2020 -0.14 0.623 0.729)입니다.

sRGB 색역 내에서 가장 가까운 색상은 lch(60.71% 37.56 201.1)이며, 이는 rgb(0% 64.2% 66.3%)입니다. 채도의 차이(37.5 vs 90)는 매우 큽니다.

CIE CH 평면에서의 상대 색상 조작을 보여주는 다이어그램입니다. a 및 b 축이 표시되어 있으며 중앙에서 교차합니다. 우리는 중앙 명도 축을 따라 내려다보고 있습니다. sRGB 색공간의 최대 색역은 불규칙한 볼록 다각형으로 표시되어 있습니다.

이 그림은 CIE ab 평면에서의 sRGB 색역을 보여줍니다. 작은 원들은 기본 및 보조 색상을 나타냅니다. 원본 색상(큰 원)은 sRGB 색역 내에 있지만; LCH 색상각을 -120° 회전하면 회색 채우기와 빨간 테두리로 표시된 바와 같이 색역 밖()이 됩니다. 색역 매핑된 결과()는 훨씬 낮은 채도를 갖습니다.

동일한 연산을 HSL에서 수행하면 색역 내 결과를 얻을 수 있습니다. 그러나 다른 면에서 만족스럽지 않습니다:

--mycolor:  lch(60% 90 320);
hsl(from var(--mycolor) calc(h - 120) s l);

HSL에서 --mycolor는 hsl(289.18 93.136% 65.531%) 이므로 120도를 빼면 hsl(169.18 93.136% 65.531%) 가 됩니다. 이를 다시 LCH로 변환하면 lch(89.0345% 49.3503 178.714) 이 되어, HSL에서의 hue 회전으로 인해 명도는 60%에서 89%로 급증하고, 채도는 90에서 49로 떨어지며, 색상각은 실제로 120도가 아닌 141도 정도 변경됩니다.

4.9. 상대 OkLCh 색상

OkLCh 색상의 의미는 CSS Color 4 § 9.2 Oklab 및 OkLCh에 정의되어 있습니다.

The grammar of the oklch() function is extended as follows:

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

상대 색상(relative color) 구문 안에서 oklch() 함수에서는, 허용되는 구성 요소 키워드들이 다음과 같습니다:

Tests

OkLCh는 지각적으로 균일(perceptually uniform)하고 채도(chroma)를 보존하며, 축(axes)이 색상의 직관적인 속성과 대응하기 때문에, 색상 조작에 적합한 선택입니다.

이 예시에서 목표는 다시 한 번 같은 명도(Lightness)와 채도(Chroma)를 가진 새로운 색을 만들어 내되, 삼색(triad: 색상각이 120도씩 다른 것)을 만드는 것입니다. 이 예에서는 OkLCh에서 조작을 수행합니다. 원본 색상은 RGB 색역(gamut) 내에 있지만, OkLCh에서 색상각을 회전하면 다시 색역 밖(out of gamut) 색상이 생성됩니다. 
--mycolor:  lch(60% 90 320);
oklch(from var(--mycolor) l c calc(h - 120));

--mycolor는 oklch(0.69012 0.25077 319.893)입니다. Hue에서 120을 빼면 매우 높은 채도의 청록색이 되어, oklch(0.69012 0.25077 199.893) 이 되며 sRGB 색역 밖에 있습니다. color(srgb -0.6018 0.7621 0.8448)로 변환되며, 음수인 빨강(red) 성분이 그 점을 보여줍니다. OkLCh 채도를 낮춰 이 색을 색역 내로 가져오면 oklch(0.69012 0.1173 199.893) 이 됩니다. OkLCh 채도는 0.251에서 0.117로 감소했습니다.

4.10. 상대 알파 색상

상대 알파 색상(Relative alpha colors)은 원본 색상을 참조하며 알파 채널만 변경합니다. 알파 채널의 의미는 CSS Color 4 § 4.2 색상에서의 투명도 표현: <alpha-value> 구문에 정의되어 있습니다.

The grammar of the alpha() function, new in this level, is as follows:

alpha() = alpha([from <color>]
          [ / [<alpha-value> | none] ]? )

상대 색상(relative color) 구문 안의 alpha() 함수에서, 허용되는 구성 요소 키워드는:

원본 색상(origin color)의 색상 성분들은 변경되지 않으며, 알파 성분만 수정되거나 대체됩니다. 이 함수의 결과는 원본 색상의 색상 공간으로 표현됩니다.

Tests
예를 들어, 여기서는 결과가 원본 색상과 동일하지만, 알파가 80%로 변경됩니다. 
--mycolor:  oklch(60% 0.25 315 / 0.3);
 alpha(from var(--mycolor) / 80%);
예를 들어, 여기서는 결과가 원본 색상과 동일하지만, 알파가 원본의 절반으로 조정됩니다. 
--mycolor:  oklch(60% 0.25 315 / 0.8);
 alpha(from var(--mycolor) / calc(alpha * 0.5));

5. 미리 정의된 및 사용자 정의 색 공간 지정: color() 함수

color() 함수는 색상을 특정 색 공간에서 지정할 수 있도록 해줍니다 (다른 대부분의 색상 함수들이 작동하는 암묵적 sRGB 색 공간이 아닌, 명시적으로 지정된 색 공간).

이 단계에서는 color() 함수가 확장되어 CSS Color 4 §  10. Predefined Color Spaces에 정의된 미리 정의된 색 공간뿐만 아니라, 사용자 정의 색 공간도 허용합니다.

또한, 절대 색상 뿐만 아니라 상대 색상(relative color)도 허용하도록 확장되었습니다.

이 함수의 문법은 이제 다음과 같습니다:

color() = color( [from <color>]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<colorspace-params> = [<custom-params> | <predefined-rgb-params> | <xyz-params>]
<custom-params> = <dashed-ident> [ <number> | <percentage> | none ]+
<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}

color() 함수는 명시된 색상 공간에서 색상을 지정하는 인자들을 받습니다.

이 함수는 아래에 설명된 대로 유효하지 않은 색(invalid color)을 나타내거나, 유효한 색(valid color)을 나타냅니다.

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

또한 한 색은 유효한 색일 수 있지만, 출력 장치(화면, 프로젝터, 프린터 등)가 생성할 수 있는 색 범위를 벗어나 있을 수 있습니다. 그럴 경우 해당 색상은 그 색상 공간에 대해 색역 밖(out of gamut)이라고 합니다.

색역 밖 색상은 컴포넌트 값이 0보다 작거나 0% 미만, 또는 1보다 크거나 100% 초과인 값을 가집니다. 이러한 값들은 유효하지 않은 것으로 간주되지 않으며; 표시 시에는 상대 색도법(relative colorimetric intent)을 사용해 계산된 값 시점에 0/0%~1/100% 범위로 가뭇 매핑(gamut-mapped)됩니다.

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

5.1. 상대 색상-함수 색상(Relative Color-Function Colors)

상대 색상(relative color) 구문 안에서 color() 함수를 <custom-params>와 함께 사용할 경우, 허용되는 구성 요소 키워드의 이름과 개수는 다음에 의해 정의됩니다:

상대 색상 구문에서 color() 함수를 <predefined-rgb-params>와 함께 사용할 경우, 허용되는 구성 요소 키워드는:

상대 색상 구문에서 color() 함수를 <xyz-params>와 함께 사용할 경우, 허용되는 구성 요소 키워드는:

상대 색상 구문에서 color() 함수를 <predefined-rgb-params> 또는 <xyz-params>와 함께 사용할 경우, 추가로 허용되는 구성 요소 키워드는:

파라미터는 다음 형태를 가집니다:

Tests
예를 들어, CIE XYZ D65 색공간에서의 상대 색상 문법은 기준 색상과 동일한 색도(chromaticity)를 유지하면서 정확히 절반의 휘도(luminance)를 가지는 색을 생성하는 데 사용됩니다: 
--base:  color(display-p3 0.7 0.5 0.1);
--dark:  color(from var(--base) xyz-d65 calc(x/2) calc(y/2) calc(z/2));

원본 색상은 color(xyz-d65 0.281 0.253 0.044) 이므로, 상대 색상은 color(xyz-d65 0.14 0.126 0.022)입니다.

5.2. 사용자 정의 색상 공간(Custom Color Spaces)

CSS는 색상을 색상 프로파일에 대한 참조로 지정할 수 있게 합니다. 예를 들어 보정된 CMYK 프린터나 RGB 색상 공간, 또는 특성화된 다른 색상/단색 출력 장치 등이 그 예입니다.

이 예시는 네 개의 보정된 색을 지정합니다: 두 개는 사용자 정의 공간(예: SWOP 코팅 CMYK 인쇄용, 넓은 색역의 7색 잉크 프린터용)이고, 나머지 두 개는 사전 정의된 공간(예: ProPhoto RGB 및 display-p3 RGB)입니다. 각 경우의 수치 파라미터는 0.0에서 1.0 범위에 있습니다 (예: 0~255가 아님). 
color: color(--swopc 0.0134 0.8078 0.7451 0.3019);
color: color(--indigo 0.0941 0.6274 0.3372 0.1647 0 0.0706 0.1216);
color: color(prophoto-rgb 0.9137 0.5882 0.4784);
color: color(display-p3 0.3804 0.9921 0.1412);

사전 정의된 색상 공간을 사용하지 않는 색상은 CSS Color 4 §  10. Predefined Color Spaces와 구별되며, <dashed-ident>을 사용하고, 스타일시트 어딘가에 해당 이름을 프로파일 데이터와 연결하는 @color-profile at-rule이 필요합니다.

Tests 
@color-profile --swopc {
  src: url('http://example.org/swop-coated.icc');}
@color-profile --indigo {
  src: url('http://example.org/indigo-seven.icc');}

5.3. 색상 프로파일 지정: the @color-profile at-rule

The @color-profile rule 색상 프로파일을 정의하고 이름을 부여합니다(color profile). 이 프로파일은 이후 color() 함수에서 색상을 지정하는 데 사용할 수 있습니다.

정의는 다음과 같습니다:

@color-profile = @color-profile [<dashed-ident> | device-cmyk] { <declaration-list> }
테스트

The <dashed-ident> gives the color profile’s name, 이 이름으로 CSS 스타일시트에서 사용됩니다. 또는, device-cmyk 키워드는 해당 색상 프로파일이 유효한 경우 device-cmyk로 지정된 색상을 해석하는 데 사용된다는 뜻입니다.

The @color-profile rule 은 이 명세에서 정의한 디스크립터들을 허용합니다.

이름: src
대상: @color-profile
값: <url>
초기값: 해당 없음

The src 디스크립터는 색상 프로파일 정보를 가져올 URL을 지정합니다.

If multiple @color-profile 규칙이 동일한 이름으로 여러 개 정의되어 있다면, 문서 상에서 마지막에 있는 규칙이 최종적으로 적용되며, 앞서 정의된 것들은 모두 무시됩니다.

가져온 ICC 프로파일은 다음일 때 유효합니다

If the profile is not valid, all CSS colors which reference this profile are 유효하지 않은 색입니다.

외부 색상 프로파일을 가져오면(fetch an external color profile), 주어진 @color-profile 규칙 rule에 대해, fetch a style resource를 사용하여 rule의 URL을 가져오되, ruleOrDeclaration을 rule로 설정하고, destination은 "color-profile", CORS 모드는 "cors"로 하며, processResponse는 주어진 response |/res| 및 null, 실패 또는 바이트 스트림 byteStream에 대해 다음 단계들을 수행합니다: 만약 byteStream가 바이트 스트림이라면, |byteStream|에서 파싱한 색상 프로파일을 적용합니다.

참고: ICC 프로파일의 인터넷 미디어 타입("MIME type")은 application/vnd.iccprofile입니다.

이름: rendering-intent
대상: @color-profile
값: relative-colorimetric | absolute-colorimetric | perceptual | saturation
초기값: relative-colorimetric

색상 프로파일에는 “rendering intents”(렌더링 인텐트)가 포함되며, 이는 그 프로파일의 색을 정의된 색역보다 작은 색역으로 어떻게 가뭇 매핑(gamut-map)할지를 정의합니다. 종종 프로파일은 단일 인텐트만 포함하지만, 여러 인텐트가 있을 경우, rendering-intent 디스크립터가 그들 중 하나를 선택해 사용합니다.

The four possible rendering intents are [ICC]:

relative-colorimetric
매체 관련 상대 색도법(media-relative colorimetric)은, 대상 매체의 색역 내에 있는 소스 색상은 대상의 백색점에 대해 변경하지 않고 그대로 두어야 합니다. 대상 매체 색역 밖에 있는 소스 색상은 다양한 방법을 사용해 색역 경계상의 색으로 매핑됩니다.

미디어-상대(relative) 색도법 렌더링 인텐트는 종종 black point compensation(흑점 보정)과 함께 사용되며, 이 경우 소스 매체의 흑점은 대상 매체의 흑점으로도 매핑됩니다. 이 방식은 소스의 백색점을 대상의 백색점으로 매핑해야 합니다. 흑점 보정이 사용되는 경우 소스의 흑점도 대상의 흑점으로 매핑되어야 합니다. 적응 알고리즘은 백색점 변화에 맞춰 조정하는 데 사용되어야 합니다. 소스와 대상 색역 모두에 속하는 색들 사이의 상대적 관계는 보존되어야 합니다. 대상 색역 밖에 있는 색들의 상대적 관계는 변경될 수 있습니다.

absolute-colorimetric
ICC-absolute colorimetric은, 대상 매체 색역 내에 있는 소스 색상은 채택된 백색(완벽한 반사 디퓨저)에 대해 변경하지 않고 그대로 두어야 합니다. 대상 매체 색역 밖의 소스 색상은 다양한 방법을 사용해 색역 경계상의 색으로 매핑됩니다. 이 방식은 색역 내 색상의 가장 정확한 색 매칭을 제공하지만, 대상 매체의 백색점이 소스 매체의 백색점보다 낮을 경우 하이라이트 클리핑이 발생할 수 있습니다. 이러한 이유로, 정확한 색상 매칭이 필요하고 하이라이트 클리핑이 문제가 되지 않는 응용에만 권장됩니다.

이 방식은 색 변환 시 백색점 매칭과 흑점 매칭을 사용 중지해야 합니다. 일반적으로 이 옵션은 테스트 목적을 제외하고 권장되지 않습니다.

perceptual
이 방법은 특히 소스와 대상 사이에 상당한 차이가 있을 때(예: 화면의 이미지를 반사 인쇄물로 재현할 때) 이미지에 선호되는 선택입니다. 소스 이미지의 색을 가져와 대상 매체에 맞게 외관을 재최적화합니다(프로프라이어터리 방법). 이 재최적화는 소스와 대상 색역 모두 내의 색들을 변경할 수 있지만, 지각적 변환은 원래 재현물의 기본적인 예술적 의도를 유지해야 합니다. 소스 이미지의 오류를 수정하려 시도하지는 않습니다.

참고: v2 ICC 프로파일에는 지정된 지각적 기준 매체(perceptual reference medium)가 없으므로 상호운용성 문제가 발생할 수 있습니다. v2 ICC 프로파일을 사용할 때는, 사용될 소스 및 대상 프로파일 조합이 원하는 결과를 내는지 확인되지 않았다면, 지각적 렌더링 인텐트 대신 black point compensation을 사용하는 media-relative colorimetric 렌더링 인텐트를 사용하는 것이 더 안전할 수 있습니다.

이 방법은 픽셀들이 대상 장치의 색역에 매핑될 때 픽셀들 사이의 상대적 색 값들을 유지해야 합니다. 이 방법은 색상 이동(hue shifts)과 불연속성을 피하고 장면의 전체적인 외관을 최대한 보존하기 위해, 원래 대상 장치 색역 내에 있던 픽셀 값들조차 변경할 수 있습니다.

saturation
이 옵션은 원본의 상대적 채도(chroma)를 보존하고 고색(솔리드 컬러)을 선명하게 유지하도록 만들어졌습니다. 그러나 지각적 인텐트와 유사하게 상호운용성 문제가 있었고, 고색 보존이 참조 매체 솔루션에 적합하지 않으므로 v4 프로파일을 사용해도 문제가 해결되지 않습니다. 이 렌더링 인텐트는 사용될 소스 및 대상 프로파일 조합이 원하는 결과를 내는지 확인된 경우를 제외하고 권장되지 않습니다. 이 옵션은 원본 픽셀들의 상대적 채도(chroma) 값을 보존해야 합니다. 색역 밖 색상은 같은 채도를 갖되 색역 내부로 들어오도록 변환되어야 합니다.
이름: components
대상: @color-profile
값: <ident>#
초기값: 해당 없음

색상 프로파일은 서로 다른 수의 구성 요소를 포함하는 색 공간을 정의할 수 있습니다. 예를 들어, Cyan, Magenta, Yellow, Black(CMYK) 프로파일은 네 개의 구성 요소(c, m, y, k)를 가집니다. 반면 어떤 4성분 가산 스크린 프로파일은 r, g, y, b 같은 네 이름을 사용할 수 있습니다.

이 디스크립터의 값은 쉼표로 구분된 <ident> 토큰 목록입니다. 각 <ident>는 프로파일에서 사용되는 순서대로 구성요소의 이름을 지정하며, 토큰의 총 개수가 구성 요소의 수를 정의합니다.

이 디스크립터는 네 개의 구성요소가 있고 이름은 cyan, magenta, yellow, black 임을 선언합니다: 
components: cyan, magenta, yellow, black
반면 다음 디스크립터는 더 간결한 이름을 선택합니다: 
components: c,m,y,k
이 디스크립터는 일곱 개의 구성요소가 있고 이름은 cyan, magenta, yellow, black, orange, green, violet 임을 선언합니다: 
components: cyan, magenta, yellow, black, orange, green, violet

구성요소가 ASCII 대소문자 구분 없는 방식으로 none과 일치하면, 그 descriptor는 유효하지 않다. 이는 누락된 값에 대한 토큰과 충돌하기 때문이다.

만약 구성 요소에 대해 선택한 이름이 CSS Values 4 § 10.7.1 Numeric Constants: e, pi에 정의된 CSS 숫자 상수와 충돌하면, 구성 요소는 여전히 유효하지만, calc() 안에서는 해당 구성 요소가 숫자 상수에 의해 가려져 예기치 않은 결과가 발생할 수 있습니다.

이 디스크립터는 구성 요소 중 하나를 pi라 명명하여, 상대 색상 문법에서 예기치 않은 결과를 초래합니다. 
@color-profile --unwise {
  src: url(https://example.com/unwise);
  components: mi, pi, ni;
}
--base: color(--unwise 35% 20% 8%);
--accent: color(from var(--base) mi calc(pi * 2) calc(ni / 2));

여기서 --accent의 구성 요소 값들은 35%, 3.14159265358979 * 2 = 6.28318530717959, 4% 입니다.

5.4. CSS와 인쇄: 보정된 CMYK 및 기타 인쇄된 색상 공간 사용

The @color-profile at-rule 은 RGB 색공간에만 국한되지 않습니다. 화면은 일반적으로 RGB로 색을 직접 표시하는 반면, 프린터는 종종 색을 CMYK로 표현합니다.

보정된 4도법 인쇄(Cyan, Magenta, Yellow, Black; CMYK)나, 추가 잉크(예: Cyan Magenta Yellow Black Orange Green Violet; CMYKOGV)를 사용하는 고충실도 넓은 색역 인쇄도 ICC 프로파일이 있다면 CSS에서 처리할 수 있습니다. 이 프로파일은 사용하려는 잉크 조합, 용지, 총 잉크 커버리지 및 장비에 대응해야 합니다.

예를 들어, 오프셋 인쇄를 ISO 12647-2:2004 / Amd 1:2007 규격으로 FOGRA39 특성화 데이터를 사용하여 115gsm 코팅지에 총 잉크 한도 300% Total Area Coverage 로 인쇄하는 경우 [FOGRA39]. 
@color-profile --fogra39 {
  src: url('https://example.org/Coated_Fogra39L_VIGC_300.icc');
}
.header {
  background-color:   color(--fogra39 0% 70% 20% 0%);
  }

여기서 color() 함수는 우선 우리가 프로파일에 부여한 이름을 적고, 이어서 cyan, magenta, yellow, black의 백분율을 제공합니다.

이 프로파일에서 이는 다음 색으로 해석됩니다: lab(63.673303% 51.576902 5.811058) 이는 rgb(93.124, 44.098% 57.491%) 입니다.

주어진 CMYK 조합으로부터 실제로 생성되는 색을 알고 있으므로, 인쇄물의 화면상 시각화(soft-proof)를 만들 수 있습니다.

또한 색을 알아야 하는 절차들(안티앨리어싱, 합성, 그라데이션에서 색 사용 등)은 정상적으로 진행될 수 있습니다.

A grid of colored squares. There are six columns, labelled A to F, and four rows, labelled 1 to 4.

A color checker, used for ensuring color fidelity in the print and photographic industries. Averaged measured Lab values are available for each patch. The rectangles show the Lab values, converted to sRGB. The circles, which are barely visible, show the Lab values, passed through a FOGRA51 [FOGRA51] ICC profile to convert them to CMYK. The CMYK values are then passed through the same ICC profile in reverse, to yield new Lab values. These are then converted to sRGB for display.

The one patch with a more visible circle (third row, first patch) is because the color is slightly outside the gamut of the FOGRA51 CMYK space used.

The table below shows, for each patch, the DeltaE 2000 between the original Lab and the Lab value after round-tripping through CMYK. A DeltaE 2000 of 1 or more is just visible.

A B C D E F
1 0.06 0.07 0.03 0.04 0.06 0.17
2 0.03 0.75 0.05 0.06 0.03 0.02
3 1.9 0.04 0.06 0.05 0.02 0.05
4 0.03 0.08 0.03 0.03 0.04 0.80
이 예시는 ISO 12647-2:2004 규격으로 오프셋 인쇄를 수행하고, CGATS/SWOP TR005 2007 특성화 데이터를 사용하여 grade 5 용지에서 총 잉크 한도 300% Total Area Coverage 및 중간 정도의 회색 성분 대체(GCR)를 적용합니다. 
@color-profile --swop5c {
  src: url('https://example.org/SWOP2006_Coated5v2.icc');
}
.header {
  background-color:   color(--swop5c 0% 70% 20% 0%);
}

이 프로파일에서 이 CMYK 비율(앞의 예와 동일한 백분율)은 다음 색으로 해석됩니다: lab(64.965217% 52.119710 5.406966) 이는 rgb(94.903% 45.248% 59.104%) 입니다.

예비 색상(fallback colors)은 예를 들어 미디어 쿼리를 사용하여 지정할 수 있으며, 지정된 CMYK 색이 sRGB 색역 밖인 것으로 알려진 경우에 사용됩니다.

이 예시는 앞서와 동일한 FOGRA39 설정을 사용하지만, sRGB 색역 밖에 있는 밝은 녹색을 지정합니다. 다만 display-p3 색역 내에는 들어갑니다. 따라서 넓은 색역 화면 및 인쇄에서는 그대로 표시되고, sRGB 화면에서는 덜 강한 폴백 색이 사용됩니다. 
@media (color-gamut: srgb) {
  .header {
    background-color:   rgb(8.154% 60.9704% 37.184%);
    }
}
@media print, (color-gamut: p3){
  .header {
    background-color:   color(--fogra39 90% 0% 90% 0%);
    }
}

이 CMYK 색은 lab(56.596645% -58.995875 28.072154) 또는 lch(56.596645% 65.33421077211648 154.5533771086801)에 해당합니다. sRGB에서는 rgb(-60.568% 62.558% 32.390%)가 되어, 큰 음수의 red 성분이 나타나듯이 색역 밖입니다.

결과가 색역 내에 들어올 때까지 채도를 줄이면 lch(56.596645% 51 154.5533771086801) 가 되고 이는 rgb(8.154% 60.9704% 37.184%) 입니다. 이 값이 수동으로 폴백 색상으로 지정되었습니다.

넓은 색역 화면에서는 이 색이 display-p3 색역 내에 있습니다 (display-p3(0.1658 0.6147 0.3533) 임).

색상은 네 잉크(CMYK)에 국한되지 않습니다. 예를 들어, 7색 잉크 세트도 사용할 수 있습니다.

이 예시는 베타 FOGRA55 데이터셋 [FOGRA55] 를 CMYKOGV 7색 인쇄에 사용합니다. 네 개의 잉크(black, cyan, magenta, yellow)는 FOGRA51 세트와 동일하며, 동일한 결과를 제공합니다. 다른 세 잉크는 다음과 같습니다:

측정 조건은 M1이며, 이는 용지의 형광증백제가 고려되고 분광광도계에 UV 컷 필터가 없음을 의미합니다.

@color-profile --fogra55beta {
  src: url('https://example.org/2020_13.003_FOGRA55beta_CL_Profile.icc');
}
.dark_skin {
  background-color: 
  color(--fogra55beta 0.183596 0.464444 0.461729 0.612490 0.156903 0.000000 0.000000);
}
.light_skin {
  background-color: 
  color(--fogra55beta 0.070804 0.334971 0.321802 0.215606 0.103107 0.000000 0.000000);
}
.blue_sky {
  background-color: 
  color(--fogra55beta 0.572088 0.229346 0.081708 0.282044 0.000000 0.000000 0.168260);
}
.foliage {
  background-color: 
  color(--fogra55beta 0.314566 0.145687 0.661941 0.582879 0.000000 0.234362 0.000000);
}
.blue_flower {
  background-color: 
  color(--fogra55beta 0.375515 0.259934 0.034849 0.107161 0.000000 0.000000 0.308200);
}
.bluish_green {
  background-color: 
  color(--fogra55beta 0.397575 0.010047 0.223682 0.031140 0.000000 0.317066 0.000000);
}

5.5. CMYK 색상을 Lab으로 변환

보정된 CMYK 색공간에서 Lab으로의 변환은 보통 ICC 프로파일에서 Lab 값을 조회(lookup)하여 수행됩니다.

5.6. Lab 색상을 CMYK로 변환

인쇄를 위해, Lab 색상은 프린터의 색공간으로 변환되어야 합니다.

이는 일반적으로 ICC 프로파일에서 CMYK 값을 조회하여 수행됩니다.

6. 보정되지 않은 CMYK 색상: device-cmyk() 함수

프린터가 보정되지 않았지만, 특정 잉크 조합의 출력이 실험이나 인쇄된 샘플 색상집을 통해 알려진 경우, CMYK 색상을 디바이스 의존적인 방식으로 표현하는 것이 유용할 수 있습니다.

참고: 실제로 출력되는 색상을 알 수 없기 때문에, CSS 처리기가 근사값을 계산할 수 있습니다. 이 근사값은 실제 인쇄 결과와 시각적으로 매우 다를 가능성이 높습니다.

device-cmyk() 함수는 작성자가 이러한 방식으로 색상을 지정할 수 있게 합니다:

device-cmyk() = <legacy-device-cmyk-syntax> | <modern-device-cmyk-syntax>
<legacy-device-cmyk-syntax> = device-cmyk( <number>#{4} )
<modern-device-cmyk-syntax> = device-cmyk( <cmyk-component>{4} [ / [ <alpha-value> | none ] ]? )
<cmyk-component> = <number> | <percentage> | none

device-cmyk() 함수의 인수는 시안, 마젠타, 옐로, 블랙 성분을 순서대로, 0에서 1 사이의 숫자나, 모던 문법에서는 0%에서 100% 사이의 백분율로 지정합니다. 이 두 방식은 동등하며, 선형적으로 서로 매핑됩니다. 0 또는 0% 미만, 1 또는 100%를 초과하는 값은 무효가 아니며; 대신 계산값 단계에서 0/0% 또는 1/100%로 clamp(클램프) 됩니다.

모던 문법에서는 다섯 번째 인수가 색상의 알파(투명도) 성분을 지정합니다. 이는 rgb() 함수의 네 번째 인수와 동일하게 해석됩니다. 생략되면 기본값은 100%입니다.

역사적 이유로, device-cmyk()는 레거시 색상 문법도 지원합니다.

일반적으로 인쇄 기반 응용 프로그램은 실제 사용된 색을 CMYK로 저장하고, 프린터로 해당 형태로 전송합니다. 하지만 이러한 색상은 색도 해석이 불가능하며, 그러므로 그라디언트, 합성, 블렌딩 등에는 사용할 수 없습니다.

따라서 Device CMYK 색상은 동등한 색상으로 변환되어야 합니다. 이는 HSL 또는 HWB를 RGB로 변환하는 것만큼 간단하지 않습니다; 정확한 변환은 출력 장치의 특성에 따라 달라집니다.

  1. 사용자, 작성자, 또는 사용자 에이전트 스타일시트에 @color-profile이 device-cmyk로 정의되어 있고, src 디스크립터로 지정한 리소스를 가져올 수 있으며, 해당 리소스가 유효한 CMYK ICC 프로파일이고, 사용자 에이전트가 ICC 프로파일을 처리할 수 있다면, device-cmyk() 함수의 계산값은 해당 CMYK 색상의 Lab 값이어야 합니다.
  2. 그렇지 않으면, device-cmyk() 함수의 계산값은 아래의 단순 변환 알고리즘을 사용하여 변환된 CMYK 색상의 sRGB 값이어야 합니다.
예를 들어, @color-profile이 없는 경우, 다음 색상들은 단순 변환을 사용하여 동등합니다. 
color:  device-cmyk(0 81% 81% 30%);
color:  rgb(178 34 34);
color:  firebrick;
예제 스타일시트처럼 @color-profile이 지정된 경우, 다음 색상들은 색도 변환을 사용하여 동등합니다. 
color:  device-cmyk(0 81% 81% 30%);
color:  lab(45.060% 45.477 35.459)
color:  rgb(70.690% 26.851% 19.724%);

단순 변환은 필연적으로 근사값일 수밖에 없습니다, 왜냐하면 잉크의 색도, 점 확산(dots gain), RGB 공간의 색도 등에 대한 정보가 없기 때문입니다.

색상 사각형 그리드입니다. A부터 F까지 6개의 열이 있고, 1부터 4까지 4개의 행이 있습니다.

컬러 체크판(color checker)은 인쇄 및 사진 산업에서 색상 정확도를 보장하기 위해 사용됩니다. 각 패치마다 평균 측정된 Lab 값이 제공됩니다. 사각형은 Lab 값을 sRGB로 변환한 결과입니다. 원은 Lab 값을 ICC 프로파일로 CMYK로 변환한 후, 다시 단순 변환을 통해 sRGB로 변환한 결과입니다.

아래 표는 각 패치의 오리지널 Lab과 CMYK를 거쳐 다시 변환한 Lab 값 사이의 DeltaE 2000(색상 차이)을 보여줍니다. DeltaE 2000 값이 1 이상이면 사람이 겨우 구분할 수 있고, 5 이상이면 완전히 다른 색상입니다.

A B C D E F
1 11.33 9.36 5.66 7.52 12.39 21.58
2 6.40 8.79 11.77 17.16 11.91 3.97
3 12.1 17.00 3.38 1.94 18.08 14.97
4 1.89 6.56 7.85 8.76 9.82 10.29

6.1. 보정되지 않은 CMYK와 sRGB 기반 색상 간의 단순 변환

CMYK를 RGBA로 단순 변환하려면:

RGBA를 CMYK로 단순 변환하려면:

7. 사용된 color-scheme에 반응하기: light-dark() 함수

시스템 색상은 현재 사용 중인 color-scheme 값에 따라 반응할 수 있습니다. light-dark() 함수는 저자(author)가 동일한 기능을 활용할 수 있게 해줍니다.

이 함수는 두 가지 형태가 있습니다: 하나는 색상 쌍을, 다른 하나는 이미지 쌍을 받습니다. 하나는 이미지, 하나는 색상을 전달하려 하면 파싱 시 에러가 발생합니다.

light-dark() = <light-dark-color> | <light-dark-image>
<light-dark-color> = light-dark(<color>, <color>)
<light-dark-image> = light-dark( [ <image> | none ] , [ <image> | none ] )

색상 형식의 경우, 이 함수는 첫 번째 색상의 계산값으로 계산된다. used color scheme이 light이거나 알 수 없는 경우이며, 또는 두 번째 색상의 계산값으로 계산된다. used color scheme이 dark인 경우이다.

이미지 형식의 경우, 이 함수는 첫 번째 이미지를 반환한다. used color scheme이 light이거나 알 수 없는 경우이며, 또는 두 번째 이미지를 반환한다. used color scheme이 dark인 경우이다.

none 키워드는 image(transparent)로 계산된다 (자연 크기가 없는 완전히 투명한 이미지).

예를 들어, light/dark 모드에서의 링크 가독성을 유지하려면: 
  a:link {
      color: light-dark(blue, #81D9FE);
      background-color: light-dark(white, black);
}

기존의 파란색 링크 텍스트는 흰색 배경에서 가독성이 높으나 (WCAG 대비 8.59:1, AAA 패스) 검정 배경에서는 가독성이 떨어집니다 (WCAG 대비 2.44:1, AA 실패). 대신, dark mode에서는 더 밝은 파란색 #81D9FE를 사용합니다. (WCAG 대비 13.28:1, AAA 패스).

가독성 있는 링크 텍스트

가독성 없는 링크 텍스트

가독성 있는 링크 텍스트

예를 들어, light/dark 모드별로 쉽게 보이는 목록 기호(bullet)를 제공하려면: 
ul.fancy {
    list-style-image: light-dark(
    url("icons/deep-maroon-ball.png"),
    url("icons/pale-yellow-star.png")
  );
}
예를 들어, light mode에서는 래스터 이미지가 사용되고, dark mode에서는 완전히 투명한 이미지를 원한다. 
background-image: light-dark(url(my-light-image.png), none);

이는 다음과 동등하다:

background-image: light-dark(url(my-light-image.png), image(transparent));
테스트

8. 동적으로 적정 명도를 갖는 텍스트 색상 지정: contrast-color() 함수

색상이 동적으로 생성되는 경우, 배경색으로 사용할 때 충분한 대비를 제공하는 텍스트 색상을 지정하기란 쉽지 않습니다. contrast-color() 함수는 명도 대비가 보장되는 색상을 자동으로 제공합니다. 이 함수는 지정한 단색 배경 위에 텍스트 색상으로 사용할 때 항상 충분한 색 대비를 보장합니다.

참고: 가독성은 복잡한 주제이며, 충분한 색상 대비는 그 일부일 뿐입니다. 충분한 대비를 갖췄다 해서 텍스트가 항상 잘 읽히는 것은 아니며, 폰트, 텍스트 크기, 주변 색상 등 다양한 요소에 따라 좌우됩니다.

contrast-color() = contrast-color( <color> )

contrast-color()는 흰색이나 검정색 중, 텍스트로 사용할 때 최대 색상 대비를 제공하는 색상으로 해석됩니다. 흰색과 검정색 모두 대비가 같을 경우, 흰색이 결과로 나옵니다.

어느 쪽이 밝은 색 혹은 어두운 색이 되어야 할지 결정하는 명도 대비 알고리즘은 이 단계에선 UA(유저 에이전트) 정의입니다.

참고: 이 명세의 차후 버전에선 대비 알고리즘, 사용 용도, 반환 색상 모두에 대해 더 많은 제어 기능이 도입될 예정입니다.

UA는 밝은 색/어두운 색 결정에 단순히 WCAG 2.1 섹션 1.4.3 콘트라스트(최소) 명도비 알고리즘만 활용하지 않는 것이 권장됩니다. 이 알고리즘은 여러 문제점이 알려져 있습니다. 하지만, 이 함수가 반환하는 색상은 WCAG 2.1 섹션 1.4.3 콘트라스트(최소) AA(대) 텍스트 기준을 충족해야 하며, 많은 작성자들이 법적 기준 충족이 필요하기 때문입니다.

테스트

9. 색상 보간

9.1. 보간을 위한 색 공간

<color-interpolation-method>는 CSS Color 4 § 13.1 보간을 위한 색 공간에서 정의된 대로, 사용자 정의 색 공간의 사용을 허용하도록 확장됩니다: 

<color-space> = <rectangular-color-space> | <polar-color-space> | <custom-color-space>
<rectangular-color-space> = srgb | srgb-linear | display-p3 | display-p3-linear | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | <xyz-space>
<polar-color-space> = hsl | hwb | lch | oklch
<custom-color-space> = <dashed-ident>
<hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue
<color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]

<dashed-ident>는 반드시 유효한 @color-profile 규칙 내에 선언되어야 하며, 그렇지 않으면 <color-interpolation-method>는 무효가 됩니다.

10. <color> 값 해석

10.1. color-mix() 값 해석

모든 <color> 매개변수가 각각의 색 공간에서 상응하는 색상으로 해석된다면, 계산값은 혼합 색상이 되며, 지정한 혼합 색 공간에 따라 CSS Color 4 §  15. Resolving <color> Values 기준으로 해석됩니다. 그렇지 않은 경우(함수 내에 currentColor가 쓰인 경우), 계산값은 color-mix() 함수이며 각각의 <color> 매개변수는 CSS Color 4 §  15. Resolving <color> Values에 따라 해석됩니다. 따라서 상속이 자식 요소까지 유지됩니다.

Tests

10.2. 상대 색상 문법 값 해석

모든 <color> 매개변수가 해당 색 공간의 상응 색상으로 해석되면, 계산값은 절대 <color> 값이 되며, 지정된 RCS 색 공간에 따라 CSS Color 4 §  15. Resolving <color> Values 기준으로 해석됩니다.

Tests

그렇지 않은 경우(함수 내에 currentColor가 쓰인 경우), 계산값은 상대 색상 문법 함수가 되며, 원본 <color> 매개변수는 CSS Color 4 §  15. Resolving <color> Values 기준으로 해석됩니다. 따라서 상속이 자식 요소까지 보존됩니다.

Tests

10.3. device-cmyk 값 해석

계산 값과 사용 값은 지정된 디바이스 의존 CMYK 색상이며 (각 성분은 <number>로, <percentage>가 아님) 지정된 알파 성분과 쌍을 이룹니다 (<number>로, <percentage>가 아님; 별도 지정이 없으면 불투명값으로 처리합니다).

실제 값은 조작에 따라 달라질 수 있으며, CMYK를 지원하는 디바이스로 렌더링할 경우 CMYK 색상으로 렌더될 수 있습니다. 하지만 비-CMYK 색상과 혼합하거나 비-CMYK 디바이스로 렌더링할 때에는, 반드시 § 6 Uncalibrated CMYK Colors: the device-cmyk() Function에 지정된 대로 변환되어야 합니다.

예를 들어, 
 device-cmyk(0% 70% 20% 0%)

의 지정값·실제값은

 device-cmyk(0 0.7 0.2 0)

이고, 구현체가 ICC 프로파일을 이해하며 적절한 프로파일이 설치되어 있다면, 사용 값은

 lab(63.673% 51.577 5.811)

참고: 모든 색상과 마찬가지로, script에서는 사용 값을 얻을 수 없습니다.

11. 직렬화(Serialization)

본 절에서는 CSS Color 4 §  16. Serializing <color> Values 내용을 확장하여, color-mix(), device-cmyk(), 그리고 상대 색상 함수 결과값의 직렬화를 추가합니다.

이 절에서는 명세에서 사용된 문자열과 대응하는 문자를 아래와 같이 정의합니다.

String Character
" " U+0020 SPACE
"," U+002C COMMA
"-" U+002D HYPHEN-MINUS
"." U+002E FULL STOP
"/" U+002F SOLIDUS

문자열 "."은 로케일에 상관없이 소수점 구분자로 사용되어야 하며, 천 단위 구분자는 없어야 합니다.

관례상, 결과의 알파 값이 정확히 1일 경우, 직렬화에서 생략됩니다. 1(완전 불투명)은 암묵적인 기본값입니다.

11.1. color-mix() 직렬화

선언된 color-mix() 함수의 값이 serialization될 때는 문자열 "color-mix("로 시작하고, <color-space>가 oklab 이 아닌 경우(명시적으로 지정되었는지 기본값인지 상관없이): 문자열 "in "이 이어지고, <color-space>를 소문자로, <hue-interpolation-method>가 지정되어 있고 shorter hue가 아닌 경우, " "와 <hue-interpolation-method>를 소문자로, 그리고 ", " 각 color argument의 serialization(아래 참고)을 ", "으로 구분해서 붙이고, ")"로 마무리한다.

각 color argument는 직렬화된 <color>로 표현되고, 해당 argument에 퍼센트가 직렬화될 경우에는(아래 참고) " "와 직렬화된 퍼센트를 함께 쓴다.

각 color argument는 개별적으로 serialization된다; 특히, 동일한 색상을 갖더라도 하나의 argument로 합쳐지지 않는다.

선언값의 퍼센트는 color-mix() 함수마다 다음과 같이 결정된다. N을 color argument의 수라고 하자.

각 argument마다, 그 effective percentage는 다음과 같다:

모든 effective percentage가 알려져 있고 100% / N과 같으면, 퍼센트는 직렬화되지 않는다. 그렇지 않으면 각 argument의 퍼센트는 다음과 같이 직렬화된다:

Note: calc() 값은 unknown 취급이며, 절대 100% / N이 될 수 없으므로, 생략된 <percentage>의 계산을 막는다.

예를 들어, 아래 선언값의 serialization 값은 
color-mix(in oklab, teal, peru 40%)
문자열 "color-mix(teal 60%, peru 40%)"가 된다: color space가 기본값(oklab)이므로 생략되고, 모든 퍼센트가 100%/2 = 50%가 아니어서 모두 직렬화된다.

다음 선언값의 serialization은

color-mix(in oklab, teal 50%, peru 50%)
문자열 "color-mix(teal, peru)"가 된다: 두 퍼센트가 100%/2 = 50%이므로 직렬화는 모두 생략된다.

다음 선언값의 serialization은

color-mix(in oklab, teal 70%, peru 70%)
문자열 "color-mix(teal 70%, peru 70%)"가 된다: 명시된 퍼센트가 70%로, 50%가 아니기 때문에 생략되지 않는다. (계산시에는 각각 50%로 정규화된다 하더라도.)

다음 선언값의 serialization은

color-mix(in oklch longer hue, red, green, blue)
문자열 "color-mix(in oklch longer hue, red, green, blue)"가 된다: color space(oklch)가 기본값이 아니고, hue interpolation(longer)가 기본값(shorter)이 아니고, 퍼센트가 모두 100%/3이므로 모두 생략.

다음 선언값의 serialization은

color-mix(red 50%, green, blue)
문자열 "color-mix(red 50%, green 25%, blue 25%)"가 된다: 퍼센트가 100%/3과 다르므로 모두 직렬화되며, 생략된 값도 (100%-50%)/2 = 25%로 각각 출력된다.

color-mix() 함수 결과의 serialization은 mix에 currentColor 키워드가 사용되었는지에 따라 달라진다. 사용된 경우, 결과는 선언값을 그대로 serialization한다. 이 덕분에 color 속성 값이 다른 자식 요소에서도 올바른 mixture가 적용된다. 그렇지 않으면, <color>가 되며, CSS Color 4 § 16. Serializing <color> Values 의 정의대로 처리된다. 사용되는 형식은 "in"으로 지정된 color space에 따라 다음과 같다:

믹싱 color space 형식
srgb color(srgb r g b)
srgb-linear color(srgb-linear r g b)
display-p3 color(display-p3 r g b)
a98-rgb color(a98-rgb r g b)
prophoto-rgb color(prophoto-rgb r g b)
rec2020 color(rec2020 r g b)
hsl color(srgb r g b)
hwb color(srgb r g b)
xyz-d65 color(xyz-d65 x y z)
xyz-d50 color(xyz-d50 x y z)
xyz color(xyz-d65 x y z) ¹
lab lab(l a b)
lch lch(l c h)
oklab oklab(l a b)
oklch oklch(l c h)
¹
xyz는 xyz-d65의 별칭일 뿐이기 때문

그러나 hsl 또는 hwb 색 공간에서 혼합한 결과에 적어도 하나의 누락된 색상 구성요소가 있으면 (CSS Color 4 § 13.2 누락된 구성요소로 보간하기에 따라 전달된 누락된 alpha를 포함), 사용되는 형식은 각각 현대적인 hsl(h s l / a) 또는 hwb(h w b / a) 구문이며, 원래의 색상 함수와 각 none 값을 CSS Color 4 § 16.2.2 sRGB 값의 CSS 직렬화에 따라 보존하고, color(srgb r g b)로 저하시키지 않는다(그렇게 하면 hsl/hwb 정체성이 손실된다).

Tests

최소 round-tripping 정밀도는 CSS Color 4 §  16. Serializing <color> Values에 명시된 것과 동일합니다.

이 색상 혼합의 결과는 
color-mix(in lch, peru 40%, palegoldenrod)
문자열 "lch(79.7256 40.448 84.771)"로 직렬화됩니다. 반면 다음의 결과는 
color-mix(in srgb, peru 40%, palegoldenrod)
문자열 "color(srgb 0.8816 0.7545 0.4988)"로 직렬화됩니다.

11.2. 원본 색상의 직렬화

다른 색상 함수 내부에서 원본 색상으로 사용되는 색상의 선언값 직렬화는 아래와 같습니다:

  1. rgb(), rgba(), hsl(), hsla()인 경우

참고: 모던 문법이든 레거시 문법이든 동일하게 직렬화됩니다.

  1. hwb(), lab(), lch(), oklab(), oklch()인 경우

  1. color()인 경우

11.3. 상대 색상 함수 직렬화

상대 색상의 선언값 직렬화는 다음과 같습니다:

  1. rgb(), rgba(), hsl(), hsla()인 경우

  1. hwb(), lab(), lch(), oklab(), oklch()인 경우

  1. color()인 경우

예를 들어 아래 선언값의 직렬화는 
OkLcH(from peru  l    c  h)

"oklch(from peru l c h)"라는 문자열입니다

예를 들어 아래 선언값의 직렬화는 
rgb(from red calc(r / 2) g calc(30%));

"rgb(from red calc(0.5 * r) g calc(30%))"라는 문자열이 되며, 계산값 직렬화는 "color(srgb 0.5 0 0.3)" 문자열이 됩니다.

예를 들어 아래 선언값의 직렬화는 
hsl(from hsl(none 10% 50%) h s l);

"hsl(from hsl(none 10% 50%) h s l)"가 되고, 계산값 직렬화는 "color(srgb 0.55 0.45 0.45)" 문자열입니다.

예를 들어, 다음 선언된 값의 직렬화는 
hsl(from rebeccapurple none none none / none);

문자열 "hsl(from rebeccapurple none none none / none)"입니다.

계산값은 누락된 alpha를 전달한다 (alpha는 그 자체의 유사 구성요소이다). 이는 hue, saturation, lightness, alpha가 모두 누락된 hsl() 상대 색상을 제공한다. 해결된 값이 누락된 색상 구성요소를 포함하므로, 직렬화는 현대적인 hsl() 형식을 사용하여, color(srgb 0 0 0 / none)이 아니라 문자열 "hsl(none none none / none)"을 산출한다.

예를 들어 아래 선언값의 직렬화는 
hsl(from hsl(127.9 302% 25.33%) h s l);

"hsl(from hsl(127.9 302% 25.33%) h s l)"가 되고, 계산값 직렬화는 "color(srgb -0.511666 1.018266 -0.310225)"입니다.

다음과 같은 HTML이 주어진 경우(이 요소에 color 속성 설정이 있음): 
<div id="example" 
  style="background-color: rgb(from currentcolor r g calc(b / 2)); 
  color: blue;">
</div>

background-color 선언값 직렬화는 "rgb(from currentcolor r g calc(b / 2))" 문자열이며, 계산값은 "color(srgb 0 0 0.5)"입니다

상대 색상 함수 결과 직렬화는 currentColor 키워드가 원본 색상인지에 따라 달라집니다. 그렇다면 선언값으로 직렬화됩니다. 이를 통해 자식 요소의 color 속성 값이 달라져도 올바른 값이 사용될 수 있습니다. 아니라면 해석된 값, 즉 <color>가 됩니다. CSS Color 4 §  16. Serializing <color> Values을 따릅니다.

실제 적용 형태는 상대 색상의 색상 공간에 따라 달라집니다:

mixing color space form
srgb color(srgb r g b)
srgb-linear color(srgb-linear r g b)
display-p3 color(display-p3 r g b)
a98-rgb color(a98-rgb r g b)
prophoto-rgb color(prophoto-rgb r g b)
rec2020 color(rec2020 r g b)
hsl color(srgb r g b)
hwb color(srgb r g b)
xyz-d65 color(xyz-d65 x y z)
xyz-d50 color(xyz-d50 x y z)
xyz color(xyz-d65 x y z)
lab lab(l a b)
lch lch(l c h)
oklab oklab(l a b)
oklch oklch(l c h)

그러나 hsl() 또는 hwb() 상대 색상의 해결된 값에 적어도 하나의 누락된 색상 구성요소가 있으면 (전달된 누락된 alpha를 포함하며, 이는 원본 색상으로부터 CSS Color 4 § 13.2 누락된 구성요소로 보간하기에 따른 것이다), 사용되는 형식은 각각 현대적인 hsl(h s l / a) 또는 hwb(h w b / a) 구문이며, 원래의 색상 함수와 각 none 값을 보존하고, color(srgb r g b)로 저하시키지 않는다(그렇게 하면 hsl/hwb 정체성이 손실된다). 이는 § 11.2 원본 색상 직렬화하기와 나란한데, 그 절은 원본 색상에 대해 항상 현대적인 슬래시 구문을 내보내며, CSS Color 4 § 16.2.2 sRGB 값의 CSS 직렬화에 있는 일반 sRGB 직렬화 규칙을 따른다.

Tests

최소 round-trip 정밀도는 CSS Color 4 § 16.5 color() 함수 값의 직렬화에 명시된 것과 같습니다.

다음의 직렬화 결과는 
lch(from peru calc(l * 0.8) calc(c * 0.7) calc(h + 180))
문자열 "lch(49.80224 37.80819 243.6803)" 입니다.

11.4. 사용자 정의 색상 공간 직렬화

color() 성분 값의 정밀도, 즉 직렬화 값의 유효 숫자 자리수는 이 명세에서 정의되어 있지 않습니다. 단, CMYK 색상 공간의 경우 값이 8비트 정밀도로 round-trip(왕복 변환)될 수 있을 만큼 충분해야 하며, 이는 소수점 둘째 자리 이상(단, 끝 0 생략 가능)이어야 합니다.

아래 색상의 직렬화 값은

@color-profile --swop5c {
    src: url('https://example.org/SWOP2006_Coated5v2.icc');
    }
    .header {
    background-color:    color(--swop5c  0% 70.0% 20.00% .0%);
    }

"color(--swop5c 0 0.7 0.2 0)"로 직렬화됩니다

11.5. device-cmyk 값 직렬화

device-cmyk() 값의 직렬화 형태는 계산값에서 비롯되며, 함수 이름은 소문자로 하여 device-cmyk() 형태를 사용합니다.

각 성분 값은 <number>로, 십진수(base 10)로 직렬화합니다. 컴포넌트 값 사이 분리자는 반드시 ASCII 스페이스 " " 하나여야 합니다.

각 성분 값의 끝 소수점 0은 생략해야 하며; 소수점 이하가 모두 0이라면, 소수점 자체도 생략됩니다.

이 색상의 직렬화 값은

  device-cmyk(0 81% 81% 30%)

"device-cmyk(0 0.81 0.81 0.3)"가 됩니다

device-cmyk() 성분 값의 정밀도, 즉 직렬화 값의 유효 숫자 자리수는 이 명세에서 정의되어 있지 않으나, 8비트 정밀도로 왕복 변환이 가능할 만큼 충분해야 하며 소수점 둘째 자리 이상(끝 0 생략 가능)이어야 합니다. 값은 +∞ 쪽으로 반올림해야 하며, 단순히 버려(truncate)서는 안 됩니다.

알파 값이 1일 때는 명시적으로 직렬화하지 않습니다. 1이 아닌 알파 값은 명확히 직렬화해야 하며, 문자열 " / " (스페이스, 슬래시, 스페이스)가 블랙("k")성분 값과 알파 값 사이의 구분자로 사용되어야 합니다.

12. API

12.1. CSSColorProfileRule 인터페이스

CSSColorProfileRule 인터페이스는 @color-profile 규칙을 나타냅니다.

[Exposed=Window]
interface CSSColorProfileRule : CSSRule {
  readonly attribute CSSOMString name ;
  readonly attribute CSSOMString src ;
  readonly attribute CSSOMString renderingIntent ;
  readonly attribute CSSOMString components ;
};
name, 타입 CSSOMString, 읽기 전용
name 속성은 다음을 반환해야 합니다: 관련 규칙에 대해 정의된 컬러 프로파일의 name 직렬화를 포함하는 CSSOMString 객체
src, 타입 CSSOMString, 읽기 전용
renderingIntent, 타입 CSSOMString, 읽기 전용
components, 타입 CSSOMString, 읽기 전용
나머지 속성들은 관련 규칙에 대해 정의된 관련 디스크립터의 직렬화를 포함하는 CSSOMString 객체를 반환해야 합니다. 디스크립터가 규칙에 지정되지 않았다면, 속성 값은 빈 문자열을 반환해야 합니다.

13. 기본 스타일 규칙

아래 스타일시트는 참고용이며, 표준 문서가 아닙니다. 구현체가 HTML 패밀리 문서의 기본 스타일링 일부로 사용할 수 있습니다.

/* 데스크탑 사용자 에이전트의 하이퍼링크 전통 색상 */
:link { color: LinkText; }
:visited { color: VisitedText; }
:active { color: ActiveText; }

/* device-cmyk에 대한 합리적이고 보수적인 기본값 */
@color-profile device-cmyk {
  src: url('https://drafts.csswg.org/css-color-4/ICCprofiles/Coated_Fogra39L_VIGC_300.icc');
}

14. 색 변환 샘플 코드

이 부분은 표준이 아닙니다.

device-cmyk의 단순 변환은 매우 쉽습니다:

function naive(cmyk) {
  // naively convert an array of CMYK values
  // to sRGB
  let [cyan, magenta, yellow, black] = cmyk;
    let red = 1 - Math.min(1, cyan * (1 - black) + black);
    let green = 1 - Math.min(1, magenta * (1 - black) + black);
    let blue = 1 - Math.min(1, yellow * (1 - black) + black);
    return [red, green, blue];
}

15. 보안 고려사항

이 명세는 CSS에 온디맨드 ICC 프로파일 다운로드 기능을 추가합니다. ICC 프로파일에는 실행 가능한 코드가 없으므로, 보안 위험이 증가하지 않습니다.

16. 개인정보 보호 고려사항

이 명세와 관련해 신규 개인정보 보호 고려사항이 보고되지 않았습니다.

17. 접근성(Accessibility) 고려사항

이 명세는 사용자가 지정한 색상(동적 색 포함)을 배경으로 쓸 때 텍스트 대비가 충분한지 보장하는 방법을 추가합니다.

18. 변경 이력

18.1. 2026년 1월 13일 워킹 드래프트 이후

18.2. 2025년 3월 18일 워킹 드래프트 이후

18.3. 2024년 2월 29일 워킹 드래프트 이후

18.4. 2022년 6월 28일 워킹 드래프트 이후

18.5. 2022년 4월 28일 워킹 드래프트 이후

18.6. 2021년 12월 15일 워킹 드래프트 이후

18.7. 2021년 6월 1일 워킹 드래프트

18.8. 2020년 6월 10일 FPWD 이후

18.9. CSS Color 4와의 차이점

CSS Color 4와 비교해 주요 변경점 중 하나는, CSS 색상이 더는 사전에 정의된 sRGB, display-p3 등 RGB 색 공간에 한정되지 않는다는 것입니다.

이를 위해, 다음과 같은 새로운 기능이 추가되었습니다:

  1. color() 함수가 @color-profile at-rule로 확장되어, 보정된 CMYK 등 프로파일 장치 의존 색상도 지원
  2. device-cmyk() 함수로 출력 장치 특화 비보정 CMYK 색 지정

또한, color-mix() 함수가 두 색상을 지정한 색상 공간에서 혼합해 새로운 색을 만들어낼 수 있습니다.

적합성(Conformance)

문서 관례

적합성 요구사항은 설명적 단언과 RFC 2119 용어를 조합하여 표현됩니다. 핵심 단어 “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, “OPTIONAL”은 본 명세의 규범적(nomative) 부분에서 RFC 2119에 명시된 의미로 해석해야 합니다. 다만, 가독성을 위해 본 명세에서는 이 단어들이 모두 대문자로 나오지 않습니다.

비규범적(설명용), 예시, 주석(노트)으로 명시된 부분을 제외하고, 본 명세의 모든 내용이 규범적입니다. [RFC2119]

이 명세에 등장하는 예시는 “for example”로 시작하거나, 다음과 같이 class="example"로 본문과 구분되어 나타납니다:

이것은 설명용 예시입니다.

설명 노트는 “Note”로 시작하며, 다음처럼 class="note"로 규범 텍스트와 구분해서 작성합니다:

Note, 이것은 설명용 노트입니다.

Advisement(권고)는 특별히 주목받아야 할 규범적 단락이며, 다음과 같이 다른 규범 텍스트와 <strong class="advisement">로 분리되어 강조됩니다: UA는 반드시 접근성 대안을 제공해야 합니다.

Tests

이 명세의 내용과 관련된 테스트는 이렇게 “Tests” 블록에 문서화될 수 있습니다. 이러한 블록은 모두 비규범적인 내용입니다.

적합성 클래스

이 명세에 대한 적합성은 세 가지 적합성 클래스로 정의됩니다:

스타일 시트
CSS 스타일 시트.
렌더러
UA 즉, 스타일시트 의미를 해석하여 해당 스타일시트를 적용한 문서를 렌더링하는 프로그램.
저작 도구
UA 즉, 스타일 시트를 작성하는 도구.

주어진 스타일 시트가 이 명세를 준수한다고 인정받으려면, 모듈에 정의된 문법을 사용하는 모든 구문(statement)이 CSS 일반 문법 및 각 기능별 개별 문법에 따라 유효해야 합니다.

렌더러(UA)가 이 명세를 준수하려면 적절한 명세에서 정의한 대로 스타일 시트를 해석할 뿐만 아니라, 본 명세에서 정의한 모든 기능을 올바르게 파싱하고 문서에 그 결과를 적용(render)해야 합니다. 단, 디바이스 제한으로 문서를 제대로 표시하지 못해도 UA가 비적합으로 간주되진 않습니다. (예: 흑백 모니터에서 색상 렌더링을 제공할 필요는 없음.)

저작 도구가 이 명세를 준수하려면, CSS 일반 문법 및 본 모듈의 각 기능별 문법에 맞춰 구문적으로 올바른 스타일시트만 작성해야 하며, 이 외에도 본 모듈에 규정된 모든 스타일 시트 관련 적합성 요건을 충족해야 합니다.

부분 구현

작성자가 미래 호환 구문 파싱 규칙을 이용해 대체(fallback) 값을 할당할 수 있도록, CSS 렌더러는 반드시 지원 가능한 수준이 아니거나 해석 불가한 at-rule, 속성, 속성 값, 키워드 등 구문 구조는 무효로 처리(그리고 적합하게 무시)해야 합니다. 특히 UA는 한 속성 선언 내에 여러 값이 있을 때 지원하지 않는 값은 무시하는 대신, 전체 선언을 반드시 무시해야 합니다. (즉, 한 선언에서 일부 값만 무시하고 나머지 값을 적용해서는 안 됩니다.)

불안정 및 독점적(프로프라이어터리) 기능 구현

앞으로 표준화될 CSS 기능과 충돌하지 않도록, CSSWG는 향후 호환성 확보 모범 사례 및 불안정 기능, 독점 기능의 구현 방식 모범 사례를 따르길 권장합니다.

비실험적 구현

명세가 Candidate Recommendation(CR) 단계에 이르면, 비실험적(non-experimental) 구현이 가능해지며, 구현자는 스펙에 맞게 올바르게 동작한다고 입증할 수 있는 모든 CR 단계 기능의 prefix 없는 버전을 배포해야 합니다.

CSS의 다양한 구현간 상호 운용성을 확보 및 유지하기 위하여, CSS 워킹그룹은 비실험적 CSS 렌더러 제작자가 prefix 없는 새로운 CSS 기능을 배포하기 전 W3C에 구현 보고서(및 필요한 경우 테스트케이스)를 제출해주길 요청합니다. W3C에 제출된 테스트케이스는 CSS 워킹그룹에서 검토 및 교정할 수 있습니다.

테스트케이스 및 구현 보고서 제출에 관한 자세한 정보는 CSS 워킹그룹 웹사이트 https://www.w3.org/Style/CSS/Test/에서 확인 가능합니다. 문의 사항은 public-css-testsuite@w3.org 메일링 리스트로 보내주십시오.

색인(Index)

이 명세서에서 정의된 용어

다른 명세서에서 정의된 용어

참조 문헌(References)

규범적 참조(Normative References)

[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS 계단식과 상속 5단계(Cascading and Inheritance Level 5). 2022년 1월 13일. CR. URL: https://www.w3.org/TR/css-cascade-5/
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou. CSS 색상 모듈 4단계(Color Module Level 4). 2026년 5월 2일. CRD. URL: https://www.w3.org/TR/css-color-4/
[CSS-COLOR-ADJUST-1]
Elika Etemad; 외. CSS 색상 조정 모듈 1단계(Color Adjustment Module Level 1). 2025년 12월 16일. CR. URL: https://www.w3.org/TR/css-color-adjust-1/
[CSS-IMAGES-3]
Tab Atkins Jr.; Elika Etemad; Lea Verou. CSS 이미지 모듈 3단계(Images Module Level 3). 2023년 12월 18일. CRD. URL: https://www.w3.org/TR/css-images-3/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS 구문 모듈 3단계(Syntax Module Level 3). 2021년 12월 24일. CRD. URL: https://www.w3.org/TR/css-syntax-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS 값 및 단위 모듈 4단계(Values and Units Module Level 4). 2024년 3월 12일. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-VALUES-5]
Tab Atkins Jr.; Elika Etemad; Miriam Suzanne. CSS 값 및 단위 모듈 5단계(Values and Units Module Level 5). 2024년 11월 11일. WD. URL: https://www.w3.org/TR/css-values-5/
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez. CSS 오브젝트 모델 (CSSOM). 2021년 8월 26일. WD. URL: https://www.w3.org/TR/cssom-1/
[FETCH]
Anne van Kesteren. Fetch 표준. Living Standard. URL: https://fetch.spec.whatwg.org/
[ICC]
ICC.1:2022 (프로파일 버전 4.4.0.0). 2022년 5월. URL: http://www.color.org/specification/ICC.1-2022-05.pdf
[INFRA]
Anne van Kesteren; Domenic Denicola. Infra 표준. Living Standard. URL: https://infra.spec.whatwg.org/
[RFC2119]
S. Bradner. RFC에서 요구사항 수준을 나타내기 위한 키워드. 1997년 3월. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[WEBIDL]
Edgar Chen; Timothy Gu. Web IDL 표준. Living Standard. URL: https://webidl.spec.whatwg.org/

설명용 참고 문헌(Informative References)

[FOGRA39]
ISO 12647-2:2004 / Amd 1, Offset commercial and specialty printing according to ISO 12647-2, paper type 1 or 2 (gloss or matte coated offset, 115 g/m²), screen frequency 60/cm. 2006년. URL: https://www.color.org/chardata/FOGRA39.xalter
[FOGRA51]
ISO 12647-2:2013, Process control for the production of half-tone colour separations, proof and production printsPart 2: Offset lithographic processes, PS 1, premium coated, 115 g/m², moderate substrate fluorescence. 2015년. URL: https://registry.color.org/cmyk-registry/fogra51
[FOGRA55]
CMYKOGV-based gamut exchange space. 2021년. URL: https://fogra.org/en/research/prepress-technology/multiprimary-printing-13003

속성 색인(Property Index)

정의된 속성이 없습니다.

@color-profile 디스크립터

이름(Name) 값(Value) 초기값(Initial)
components <ident># n/a
rendering-intent relative-colorimetric | absolute-colorimetric | perceptual | saturation relative-colorimetric
src <url> n/a

IDL 색인(IDL Index)

[Exposed=Window]
interface CSSColorProfileRule : CSSRule {
  readonly attribute CSSOMString name ;
  readonly attribute CSSOMString src ;
  readonly attribute CSSOMString renderingIntent ;
  readonly attribute CSSOMString components ;
};