CSS 색상 모듈 레벨 5

W3C 작업 초안,

이 문서에 대한 자세한 정보
이 버전:
https://www.w3.org/TR/2025/WD-css-color-5-20250318/
최신 게시 버전:
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 © 2025 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 기술 보고서 인덱스 https://www.w3.org/TR/에서 확인할 수 있습니다.

이 문서는 CSS 작업 그룹에 의해 작업 초안으로 발행되었으며, 권고안 트랙을 사용합니다. 작업 초안으로 발행되었다고 해서 W3C 및 그 회원들의 승인을 의미하지는 않습니다.

이 문서는 초안 문서이며, 언제든지 업데이트, 대체 또는 폐기될 수 있습니다. 이 문서를 작업 진행 중인 상태로 인용하는 것 외에는 적절하지 않습니다.

피드백은 GitHub에서 이슈를 작성(권장)하거나, 제목에 사양 코드 “css-color”를 포함하여 “[css-color] …의견 요약…” 형식으로 제출해 주세요. 모든 이슈와 의견은 아카이브됩니다. 또는, 피드백은 (아카이브) 공개 메일링 리스트 www-style@w3.org로 보낼 수 있습니다.

이 문서는 2023년 11월 3일 W3C 프로세스 문서에 의해 관리됩니다.

이 문서는 W3C 특허 정책에 따라 운영되는 그룹에 의해 제작되었습니다. W3C는 그룹의 결과물과 관련하여 제출된 공개된 특허 목록을 유지 관리하며, 해당 페이지에는 특허를 공개하는 방법도 포함되어 있습니다. 필수 청구항을 포함한다고 믿는 특허에 대한 실제 지식을 가진 개인은 W3C 특허 정책 섹션 6에 따라 정보를 공개해야 합니다.

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

절대 색상은 <color>의 계산된 값으로, 절대적이고 색채계적인 해석을 가지는 색상입니다. 이는 다음과 같은 값이 아닙니다:

또한 <color-mix()> 또는 상대 색상 구문 내에서 이러한 값이 사용되지 않습니다.

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

웹 개발자, 디자인 도구 및 디자인 시스템 개발자는 구성 요소 색상 관계를 확장하는 데 도움을 주기 위해 색상 함수를 자주 사용합니다. 여러 플랫폼 및 다양한 사용자 환경 설정을 지원하는 디자인 시스템이 증가하고 있으며, UI의 다크 모드 기능이 강화되는 상황에서, 색상을 수동으로 설정하지 않고 대신 색상 스킴이 계산되는 단일 소스를 갖는 것이 더욱 유용해지고 있습니다.

LC 색상 선택기
미국의 색상 분포도 지도

위는 CIE LCH 공간에서 작동하는 색상 선택기입니다. 여기서 두 개의 색상이 사용되어 채도-밝기 평면(고정된 색조)에서 색상 스케일을 정의하고 있습니다. 아래는 색상 스케일이 사용된 색상 분포도 지도입니다.

현재 Sass, HSL 값에 대한 calc(), 또는 PostCSS가 이를 수행하는 데 사용됩니다. 그러나 전처리기는 동적으로 조정된 색상에는 작동할 수 없습니다. 현재 모든 솔루션은 sRGB 색영역 및 HSL의 지각적 제한에 국한됩니다. (색상 원형에서 색상이 응축되고, 노란색과 파란색처럼 시각적으로 서로 다른 밝기를 가지는 두 색상이 동일한 HSL 밝기를 가질 수 있습니다.)

이 요구를 충족하기 위해 color-mix() 함수는 두 개의 <color> 명세를 받아 주어진 <color-space>에서 지정된 비율로 혼합한 결과를 반환합니다.

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

3.1. 백분율 정규화

백분율은 0%에서 100% 범위 내에 있어야 합니다. 음수 백분율은 명확히 허용되지 않습니다. 백분율은 다음과 같이 정규화됩니다:

  1. p1을 첫 번째 백분율, p2를 두 번째 백분율로 둡니다.

  2. 두 백분율 모두 생략된 경우, 각각 50%로 기본값이 지정됩니다 (두 색상의 동등한 혼합).

  3. 그 외의 경우, p2가 생략되면 100% - p1이 됩니다.

  4. 그 외의 경우, p1이 생략되면 100% - p2가 됩니다.

  5. 그 외의 경우, 두 값이 모두 주어지고 합이 100%를 초과하면 두 값을 100%가 되도록 비례 조정합니다.

  6. 그 외의 경우, 두 값이 모두 주어지고 합이 100%보다 작으면 합을 알파 곱셈값으로 저장합니다. 그리고 두 값을 100%가 되도록 비례 조정합니다.

즉, p1은 p1 / (p1 + p2)로, p2는 p2 / (p1 + p2)로 변환됩니다.

테스트
이러한 문법 형태는 모두 동일합니다: 
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%)

모두 퍼플과 플럼을 현행 표준의 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.2. color-mix 결과 계산

두 백분율을 정규화한 후, 결과는 다음 알고리즘으로 생성됩니다:

  1. CSS Color 4 §  12. 색상 보간에서 설명한 대로, 두 색상 모두 지정된 보간 <color-space>로 변환되며, 해당 유사 구성요소도 고려합니다.

  2. 색상은 지정된 색상 공간에서 보간되며, CSS Color 4 §  12. 색상 보간에서 설명합니다. 지정된 색상 공간이 cylindrical-polar-color 공간인 경우, <hue-interpolation-method>가 CSS Color 4 § 12.4 Hue 보간에서 설명한 대로 색상 보간을 제어합니다. <hue-interpolation-method>가 지정되지 않았다면, shorter가 지정된 것과 같습니다.

  3. 백분율 정규화 중 알파 곱셈값이 생성되었다면, 보간된 결과의 알파 구성요소에 곱해집니다.

테스트

혼합 결과는 두 번째 색에서 첫 번째 색으로 진행되는 경로의 지정된 백분율 지점의 색상입니다.

참고: 따라서, 백분율이 0%이면 지정된 색상 공간으로 변환된 다른 색상을 반환하며, 백분율이 100%이면 동일한 색상을 지정된 색상 공간으로 변환한 결과를 반환합니다.

이 예시는 페루 40%와 페일골든로드 60%를 혼합한 결과를 만듭니다. 
color-mix(in lch, peru 40%, palegoldenrod)

혼합은 lch 색상 공간에서 이루어집니다. 다음은 중립 L 축을 따라 내려다본 모습입니다:

두 색상의 혼합과 혼합 결과. CIE L 축을 따라 ab 평면을 내려다보고 있습니다. 두 축은 a와 b로 표시되며, 중심에서 교차합니다. 그래프의 중심이 원점입니다.
페루와 페일골든로드의 CIE LCH 혼합. 페루는 양의 a 축 기준으로 63.677도 색상각을 가지고, 페일골든로드는 98.834도 색상각을 가집니다. 페루의 채도(중앙 중립 축에서의 거리)는 54.011이고, 페일골든로드의 채도는 31.406입니다. 모든 혼합 결과는 곡선을 따라 나타나며, 40%/60% 혼합이 표시됩니다.

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

이 예시는 teal과 olive를 혼합한 결과를 만듭니다. lch 색상 공간에서, 각 lch 구성요소는 teal 값의 65%, olive 값의 35%로 계산됩니다.

참고: 색상과 채도를 보간하면 중간 색상도 끝점 색상만큼 채도가 유지됩니다.

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

두 색상의 혼합과 혼합 결과. CIE L 축을 따라 ab 평면을 내려다보고 있습니다. 두 축은 a와 b로 표시되며, 중심에서 교차합니다.
teal과 olive의 혼합. teal의 색상각은 양의 a 축 기준으로 196.4524도, olive는 99.5746도입니다. teal의 채도는 31.6903, olive의 채도는 56.8124입니다. 혼합 결과는 점선 곡선을 따라 나타나며, 65%/35% 혼합이 표시됩니다.

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

3.3. color-mix에서 혼합 색상 공간의 효과

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

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

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

LCH 혼합은 L 값이 50%로 완벽한 중간 회색을 주며, 예상대로입니다. (Lab에서 혼합해도 동일하며, LCH와 Lab의 밝기 축은 동일합니다.)

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);

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

3.4. color-mix에서 비단일 알파(Non-Unity Alpha)의 효과

지금까지 color-mix() 예시들은 모두 완전히 불투명한 색상을 사용했습니다. 예시를 단순화하기 위해 프리멀티플리케이션 및 언프리멀티플리케이션 단계는 생략되었는데, 이는 단순히 1을 곱하고 1로 나누는 것이므로 결과에 변화가 없기 때문입니다.

일반적인 경우에는, 색상에 비단일 알파(1이 아닌 알파) 값이 있을 수 있으므로 프리멀티플리케이션, 보간, 언프리멀티플리케이션 단계가 반드시 포함되어야 합니다.

이 예시는 25% 반투명 빨간색과 75% 반투명 녹색을 sRGB에서 혼합한 예시입니다. 올바른(프리멀티플리케이션 적용) 방법과 잘못된(비프리멀티플리케이션) 방법 모두를 보여줍니다. 
color-mix(in srgb, rgb(100% 0% 0% / 0.7) 25%, rgb(0% 100% 0% / 0.2));

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

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

이는 매우 큰 차이가 있으며, 올바른 결과와 잘못된 결과간 ΔE2000은 30.7입니다!

백분율 정규화에서 알파 곱셈값이 생성되면, 계산은 마지막에 한 단계가 추가되는 것만 다릅니다.

이 예시는 앞의 예시와 비슷하며, 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. 상대 색상의 처리 모델

이 명세의 이전 레벨에서는, 색상 함수는 색상 구성요소를 모두 직접 지정하여 절대적으로만 색상을 지정할 수 있었습니다.

새로운 상대 색상 문법은 현대 색상 문법을 확장하여 기존 색상을 색상 함수로 수정할 수 있게 합니다: 원본 색상이 지정된 경우, 각 색상 구성요소(알파 구성요소가 지정된 경우 포함)는 직접 지정하거나, 원본 색상에서 가져올 수 있으며 (또는 수학 함수로 수정할 수도 있습니다).

원본 색상과 상대 색상은 반드시 같은 색상 함수를 사용할 필요가 없습니다.

모든 연산은 상대 색상 함수의 색상 공간에서 수행됩니다; 만약 원래 지정된 색상 공간이 원본 색상에서 다른 색상 함수를 사용했다면, 먼저 선택한 색상 함수로 변환되어 구성요소에 대해 의미 있는 값을 갖게 됩니다 그리고 구성요소 키워드는 상대 색상의 색상 공간을 기준으로 하며, 원본 색상 기준이 아닙니다.

상대 색상의 알파 값이 생략되면, 원본 색상의 알파 값이 기본값이 됩니다 (절대 문법에서는 100%가 기본값임).

상대 색상 문법을 사용할 때, 색상 구성요소 값은 직접 지정된 경우든 색상 공간 변환에서 나온 경우든 참조 범위에 클램프(clamp)되지 않고 그대로 유지됩니다. 이는 목적지 색상 공간이 이를 표현할 수 있다면 가뮤트(gamut) 밖의 값도 유지함을 의미합니다.

그러나 상대 색상 문법에서는 알파 구성요소 값은 직접 지정됐거나 색상 공간 변환에서 나온 경우든 참조 범위에 클램프됩니다.

누락된 구성요소는 CSS Color 4 § 12.2 누락된 구성요소와 보간과 동일하게 처리됩니다: 원본 색상 공간과 상대 색상 함수의 색상 공간을 비교하여, 유사 구성요소가 있으면 계승되어 누락으로 처리됩니다.

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

구성요소를 일반적인 위치 밖에서 사용할 때는 주의해야 합니다; 백분율이 숫자로 변환될 때, 해당 숫자가 다른 위치에 사용된다면 위치 변화에 따른 "자동 스케일링"은 없습니다.

4.2. 상대 색상 문법

각 함수의 상대 색상 지원을 위한 문법 변경 세부 사항은 아래에 정리되어 있지만, 모두 공통 구조를 따릅니다:

구성요소 키워드는 <숫자> 또는 none을 반환합니다; 만약 원래 <백분율> 또는 <각도>로 지정됐다면, 그 <백분율>은 <숫자>로, <각도>는 도(degree) 단위의 <숫자>로 변환됩니다 (이는 표준 단위입니다) [0, 360] 범위 내입니다.

테스트
예를 들어, 색상이 <백분율>로 지정된 경우, 동일한 색상 공간의 RCS는 변환된 <숫자> 형태를 사용합니다: 
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는 변하지 않음: oklab(0.457 -0.072 -0.02).

예를 들어, 원본 색상에 각도 <각도>가 도(degree)로 지정된 경우, 동일한 색상 공간의 RCS는 변환된 <숫자> 형태를 사용합니다: 
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)입니다.

만약 원본 색상의 각도 <각도>가 다른 단위(라디안 또는 턴 등)로 지정됐다면, 변환된 <숫자>는 도(degree) 값입니다.

구성요소 키워드를 수학 함수에 사용하면, 원본 색상을 더 고급스럽게 조작할 수 있습니다. 
html { --color: green; }
.foo {
  --darker-accent: lch(from var(--color) calc(l / 2) c h);
}

이 예시에서 원본 색상의 밝기(l)를 반으로 줄여 어둡게 만들지만, 다른 색상 특성은 변경하지 않습니다.

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

예를 들어, 테마 색상이 불투명하게 지정됐지만 특정 경우에 부분 투명하게 사용해야 할 때: 
html { --bg-color:  blue; }
.overlay {
  background:  rgb(from var(--bg-color) r g b / 80%);
}

이 예시에서 원본 색상의 r, g, b 구성요소는 변경되지 않고, 키워드로 지정되어 원본 색상에서 값을 가져옵니다. 반면 투명도(opacity)는 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));
예를 들어, 색상을 간단히 그레이스케일로 변환하려면: 
--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 값이 rgb(85 107 47)인데, rgb(93.8 93.8 93.8)이 됩니다.

(간단히 변환한 것이므로, 일단 이 계산은 감마 인코딩된 공간에서 이루어지며 선형광이 아니고, 가중치도 sRGB가 아닌 NTSC에서 유래한 값임에 유의.)

(이 문법을 설명하기 위한 예시일 뿐, 색상을 그레이스케일로 바꾸는 더 쉽고 정확한 방법은 oklch() 함수를 사용하는 것입니다. 이 색상 공간은 인간 지각에 더 정확하므로: oklch(from var(--color) l 0 h)는 밝기를 유지하고 채도(chroma)는 0으로 만들어 색상의 "색감"을 제거합니다.)

예를 들어,

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

알파 구성요소는 <숫자>로 변환되어 0.6이 되고, 결과 컬러는 color(srgb 0.6 0.6 0.6 / 0.9) 입니다.

하지만 두 번째 예시에서도 알파는 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를 갖습니다.

만약 구현체가 이러한 계승을 하지 않는다면, --darker-bg의 hue는 0이 되어, 그라데이션 시작 부분에 바람직하지 않은 붉은빛이 나타납니다.

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

하지만, 누락된 값에 대해 계산을 하면 none은 0으로 처리됩니다.

4.3. 상대 sRGB 색상

현대 색상 문법의 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() 및 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도를 더해 보색을 만듭니다. 
--accent:  lightseagreen;
--complement:   hsl(from var(--accent) calc(h + 180) s l);

lightseagreen은 hsl(177deg 70% 41%)이므로, --complement는 hsl(357deg 70% 41%)이 됩니다.

상대 HSL 색상 문법은 레거시 HSL 문법이 아닌 형태에만 적용됩니다.

4.5. 상대 HWB 색상

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

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

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

테스트

4.6. 상대 Lab 색상

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

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

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

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

모든 조정은 손실 없이(가뮤트 클리핑 없음) 이루어지는데, lab()은 모든 가시 색상을 포함하기 때문입니다. 이는 sRGB 기반 함수(rgb(), hsl(), hwb() 등)의 알파 조정에는 해당되지 않습니다. 이러한 함수는 HSL이나 HWB 계산을 위해 sRGB로 변환해야 하며, 알파 투명도 조정 외에도 변환이 필요합니다.

색상의 채도를 완전히 제거하여 회색으로 만들고, 밝기는 그대로 유지: 
--mycolor:  orchid;
// orchid는 lab(62.753 52.460 -34.103)
--mygray:  lab(from var(--mycolor) l 0 0)
// mygray는 lab(62.753 0 0)이며, rgb(59.515% 59.515% 59.515%)

4.7. 상대 Oklab 색상

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

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

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

4.8. 상대 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는 lch(62.753 62.571 326.973)
--mygray:  lch(from var(--mycolor) l 0 h)
// mygray는 lch(62.753 0 326.973)이고, rgb(59.515% 59.515% 59.515%) 와 같습니다.

이제 (색상은 유지됨) 다시 채도를 올리면

--mymuted:  lch(from var(--mygray) l 30 h);
// mymuted는 lch(62.753 30 326.973)이고, rgb(72.710% 53.293% 71.224%) 와 같습니다.

하지만 HSL과는 달리, 조작 결과가 항상 가시색 영역에 들어간다는 보장은 없습니다.

이 예시는 동일한 명도와 채도를 가진 새로운 색상을 만드려고 하지만, 색상각이 120도 변경된 삼색조(triad)입니다. 원본 색상은 RGB 색역 안에 있지만, LCH에서 색상각을 회전하면 색역 밖의 색상이 생성됩니다. 
--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, 원래 90).

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

이 다이어그램은 CIE ab 평면에서 sRGB 색역을 보여줍니다. 작은 원은 주요 및 보조 색상을 나타냅니다. 원본 색상(큰 원)은 sRGB에서 색역 안에 있지만; 색상각이 -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에서 색상 회전으로 명도는 60%에서 89%로 크게 증가했고, 채도는 90에서 49로 감소했으며, 색상각은 실제로 120이 아니라 141도 변화했습니다.

4.9. 상대 OKLCh 색상

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

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

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

테스트

OKLCh는 지각적으로 균등하고 채도 보존 특성을 가지며, 각 축이 색상의 직관적인 속성에 대응하기 때문에, 색상 조작에 적합한 선택입니다.

이 예시에서의 목적 역시 명도 및 채도가 동일한 새로운 색상을 생성하는 것이지만, 삼색조(색상각이 120도 다름)입니다. 이 예시에서는 OKLCh에서 조작을 수행합니다. 원본 색상은 RGB 색역 안에 있지만, OKLCh에서 색상각을 회전하면 역시 색역 밖의 색상이 생성됩니다. 
--mycolor:  lch(60% 90 320);
oklch(from var(--mycolor) l c calc(h - 120));

--mycolor는 oklch(0.69012 0.25077 319.893) 입니다. 색상각에서 120을 빼면 매우 높은 채도의 청록색 oklch(0.69012 0.25077 199.893)가 되며, sRGB 색역을 벗어납니다. color(srgb -0.6018 0.7621 0.8448) (빨간색 음수 값이 색역 밖임을 나타냅니다.) OKLCh 채도를 낮춰 색역 내로 맞추면 oklch(0.69012 0.1173 199.893)가 됩니다. OKLCh 채도는 0.251에서 0.117로 감소합니다.

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

color() 함수는 특정 색상 공간에서 색상을 지정할 수 있게 해줍니다 (다른 색상 함수들이 대부분 암시적으로 sRGB 색상 공간을 사용하는 것과 달리).

이 레벨에서는 color() 함수가 CSS Color 4 §  10. 미리 정의된 색상 공간에서 지정된 사전 정의 공간뿐만 아니라, 사용자 정의 색상 공간도 허용하도록 확장됩니다.

또한 절대 색상뿐만 아니라 상대 색상도 허용하도록 확장됩니다.

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

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> [ <number> | <percentage> | none ]{3}
<xyz> = xyz | xyz-d50 | xyz-d65

color 함수는 명시적으로 지정된 색상 공간에서 색상을 지정하는 매개변수를 받습니다.

아래 설명된 대로 잘못된 색상 또는 유효한 색상을 나타냅니다.

잘못된 색상이 아닌 모든 색상은 유효한 색상입니다.

유효한 색상이어도 출력 장치(화면, 프로젝터, 프린터)에서 생성 가능한 색상 범위 밖일 수 있습니다. 이 경우 해당 색상 공간에 대해 색역 밖(out of gamut)이라고 합니다.

색역 밖의 색상은 구성 요소 값이 0 또는 0%보다 작거나, 1 또는 100%보다 클 수 있습니다. 이는 잘못된 색상이 아니며, 대신 표시를 위해 색역 맵핑이 상대 컬러리메트릭 방식으로 수행되어, 계산값 단계에서 0/0%~1/100% 범위로 맞춰집니다.

각 유효한 색상은 출력 장치(화면 또는 프린터)의 색역 안에 있거나, 색역 밖에 있습니다.

5.1. 상대 color() 함수 색상

상대 색상 구문에서 color() 함수가 <custom-params>를 사용하는 경우, 허용되는 구성 요소 키워드의 개수와 이름은 다음과 같습니다:

상대 색상 구문에서 color() 함수가 <predefined-rgb-params>를 사용하는 경우, 허용되는 구성 요소 키워드는 다음과 같습니다:

상대 색상 구문에서 color() 함수가 <xyz-params>를 사용하는 경우, 허용되는 구성 요소 키워드는 다음과 같습니다:

상대 색상 구문에서 color() 함수가 <predefined-rgb-params> 또는 <xyz-params>를 사용하는 경우, 추가로 허용되는 구성 요소 키워드는 다음과 같습니다:

매개변수의 형식은 다음과 같습니다:

테스트
예시: CIE XYZ D65 색상 공간의 상대 색상 구문을 사용해 기준 색상의 채도는 동일하게, 명도(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. 사용자 정의 색상 공간

CSS는 색상을 색상 프로필 참조로 지정할 수 있도록 허용합니다. 예를 들어 교정된 CMYK 프린터, 또는 RGB 색상 공간, 혹은 다른 종류의 색상/흑백 출력 장치(특성화된)를 사용할 수 있습니다.

이 예시는 네 가지 교정된 색상을 지정합니다: 두 개는 사용자 정의 공간 (SWOP-coated 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. 미리 정의된 색상 공간을 사용하지 않는 색상은 <dashed-ident>를 사용하여 구분하며, 스타일시트 어딘가에 @color-profile at-rule이 필요합니다. 이름을 프로필 데이터와 연결합니다.

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

5.3. 색상 프로필 지정: @color-profile at-rule

@color-profile 규칙은 나중에 color() 함수에서 색상을 지정할 때 사용할 수 있는 색상 프로필을 정의하고 이름을 지정합니다.

정의 방식은 다음과 같습니다:

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

<dashed-ident>는 색상 프로필의 이름을 지정하며, CSS 스타일시트에서 이 이름으로 사용할 수 있습니다. 또는 device-cmyk 키워드는 이 색상 프로필이 유효하다면 device-cmyk로 지정된 색상을 해석할 때 사용됨을 의미합니다.

@color-profile 규칙은 이 명세에서 정의된 설명자를 허용합니다.

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

src 설명자는 색상 프로필 정보를 가져올 URL을 지정합니다.

가져온 ICC 프로필이 유효하려면 다음 조건을 만족해야 합니다:

프로필이 유효하지 않으면, 이 프로필을 참조하는 모든 CSS 색상은 잘못된 색상이 됩니다.

외부 색상 프로필을 가져오기 절차는, @color-profile 규칙 rule이 주어졌을 때, 스타일 리소스 가져오기를 rule의 URL로 수행합니다. 스타일시트는 rule의 상위 CSS 스타일시트이며, destination은 "color-profile", CORS 모드는 "cors", processResponse는 response |/res| 및 null, 실패, 또는 바이트 스트림 byteStream에 대해 다음 단계를 수행합니다: byteStream이 바이트 스트림이면, |byteStream에서 파싱한 색상 프로필을 적용합니다.

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

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

색상 프로필에는 "렌더링 인텐트(rendering intents)"가 포함되어 있으며, 더 작은 색역으로 색상을 색역 맵핑할 방법을 정의합니다. 대부분의 프로필은 하나의 인텐트만 포함하지만, 여러 개가 있으면 rendering-intent 설명자로 사용할 인텐트를 선택합니다.

네 가지 가능한 렌더링 인텐트는 [ICC]와 같습니다:

relative-colorimetric
미디어 상대 컬러리메트릭은 대상 매체 색역 내에 있는 원본 색상을 각 미디어의 백색점에 대해 변경하지 않고 유지해야 합니다. 대상 색역 밖의 원본 색상은 다양한 방법으로 색역 경계의 색상으로 맵핑됩니다.

미디어 상대 컬러리메트릭 렌더링 인텐트는 블랙 포인트 보상과 함께 자주 사용되며, 원본 매체의 블랙 포인트도 대상 매체의 블랙 포인트로 맵핑됩니다. 이 방식은 반드시 원본 백색점을 대상 백색점으로 맵핑해야 합니다. 블랙 포인트 보상이 사용된다면 원본 블랙 포인트 또한 대상 블랙 포인트로 맵핑되어야 합니다. 백색점 변경에 대한 적응 알고리즘을 사용해야 합니다. 원본과 대상 색역 내의 색상 간 상대 관계는 유지되어야 하며, 대상 색역 밖의 색상 간 상대 관계는 변경될 수 있습니다.

absolute-colorimetric
ICC 절대 컬러리메트릭은 대상 매체 색역 내에 있는 원본 색상을 채택된 백색(완전 반사 확산체)에 대해 변경하지 않고 유지해야 합니다. 대상 색역 밖의 원본 색상은 다양한 방법으로 색역 경계의 색상으로 맵핑됩니다. 이 방식은 색역 내 색상에 대해 가장 정확한 색상 일치를 제공하지만, 대상 매체 백색점이 원본 매체 백색점보다 낮으면 하이라이트가 잘릴 수 있습니다. 따라서, 정확한 색상 일치가 필요하고 하이라이트 잘림이 문제가 되지 않는 경우에만 권장됩니다.

이 방식은 색상 변환 시 백색점 일치와 블랙 포인트 일치를 반드시 비활성화해야 합니다. 일반적으로 테스트 목적 외에는 권장되지 않습니다.

perceptual
이 방식은 특히 원본과 대상 사이에 큰 차이가 있을 때(예: 화면 이미지와 인쇄 이미지) 이미지에 자주 선호됩니다. 원본 이미지의 색상을 대상 매체에 맞게 최적화합니다(프로프라이어터리 방식 사용). 이 최적화로 인해 원본과 대상 색역 모두의 색상이 변경될 수 있지만, 예술적 의도는 재현 시 최대한 유지되어야 합니다. 원본 이미지의 오류는 교정하지 않습니다.

참고: v2 ICC 프로필에는 지정된 지각적 기준 매체가 없어 상호운용성 문제가 발생할 수 있습니다. v2 ICC 프로필을 사용할 때는 지각적 렌더링 인텐트 대신 블랙 포인트 보상이 적용된 미디어 상대 컬러리메트릭 인텐트를 사용하는 것이 더 안전할 수 있습니다. 단, 사용하려는 소스와 대상 프로필 조합이 원하는 결과를 산출함을 확인한 경우는 예외입니다.

이 방식은 타깃 장치 색역으로 맵핑되는 동안 픽셀 간 상대 색상 값을 유지해야 합니다. 타깃 색역 내의 픽셀 값도 변경될 수 있지만, 색상 변화나 불연속성을 피하고 전체적인 장면의 외관을 최대한 보존합니다.

saturation
이 옵션은 원본의 상대 채도(크로마)를 유지하고 순색을 순수하게 유지하기 위해 만들어졌습니다. 하지만 지각적 인텐트와 유사하게 상호운용성 문제가 있었고, 순색 보존이 참조 매체 기반 솔루션에 적합하지 않아 v4 프로필 사용으로 문제를 해결할 수 없습니다. 소스와 대상 프로필 조합이 원하는 결과를 산출함을 확인하지 않은 한, 이 렌더링 인텐트는 권장되지 않습니다. 이 옵션은 원본 픽셀의 상대 채도(크로마) 값을 유지해야 합니다. 색역 밖의 색상은 동일한 채도를 가지면서 색역 내에 들어오는 색상으로 변환되어야 합니다.
이름: components
대상: @color-profile
값: <ident>#
초기값: 해당없음

색상 프로필은 다양한 개수의 구성 요소를 포함하는 색상 공간을 정의할 수 있습니다. 예를 들어, 시안, 마젠타, 옐로우, 블랙(CMYK) 프로필은 c, m, y, k로 이름 붙은 네 개의 구성 요소를 가지며, 네 개의 가산형 스크린 프로필은 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과 일치하면, 이 설명자는 무효입니다. (누락 값 토큰과 충돌하기 때문입니다.)

구성 요소 이름이 CSS Values 4 § 10.7.1 수치 상수: 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 및 기타 인쇄 색상 공간 사용

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

시안, 마젠타, 옐로우, 블랙(CMYK)의 교정된 4색 인쇄, 또는 시안 마젠타 옐로우 블랙 오렌지 그린 바이올렛(CMYKOGV)과 같은 추가 잉크를 사용하는 고충실도 광색역 인쇄도 해당 잉크, 종이, 전체 잉크 커버리지 및 장비에 맞는 ICC 프로필이 있다면 CSS에서도 가능합니다.

예를 들어, ISO 12647-2:2004 / Amd 1:2007 오프셋 인쇄를 FOGRA39 특성화 데이터와 115gsm 코팅지, 300% 총 면적 커버리지 ink limit로 사용하는 경우 [FOGRA39]. 
@color-profile --fogra39 {
  src: url('https://example.org/Coated_Fogra39L_VIGC_300.icc');
}
.header {
  background-color:   color(--fogra39 0% 70% 20% 0%);
  }

여기서 color() 함수는 먼저 우리가 지정한 프로필 이름을 적고, 그 다음에 시안, 마젠타, 옐로우, 블랙의 백분율을 적습니다.

이 프로필에서, 위 값은 lab(63.673303% 51.576902 5.811058)으로 해석되며, 이는 rgb(93.124%, 44.098%, 57.491%)입니다.

주어진 CMYK 조합에서 실제로 만들어지는 색상을 알 수 있으므로, 인쇄 결과의 화면 시뮬레이션(소프트 프루프)도 할 수 있습니다.

또한 색상 정보를 이용하는 모든 처리는 (안티앨리어싱, 합성, 그라디언트에 색상 사용 등) 정상적으로 진행할 수 있습니다.

색상 사각형 그리드. 6열(A~F), 4행(1~4)로 라벨링되어 있습니다.

인쇄 및 사진 산업에서 색상 정확도를 보장하기 위해 사용되는 컬러 체크 차트. 각 패치의 평균 측정 Lab 값이 제공됩니다. 사각형은 Lab 값을 sRGB로 변환한 결과를, 거의 보이지 않는 원은 Lab 값을 FOGRA51 [FOGRA51] ICC 프로필을 통해 CMYK로 변환한 값을 나타냅니다. CMYK 값은 다시 같은 ICC 프로필을 거꾸로 적용하여 새 Lab 값을 얻고, 이것을 sRGB로 변환하여 화면에 표시합니다.

원형이 더 잘 보이는 패치(3행 1열)는 해당 색상이 사용된 FOGRA51 CMYK 색역을 약간 벗어나 있기 때문입니다.

아래 표는 각 패치에 대해 CMYK 왕복 후 원래 Lab과 새 Lab의 DeltaE 2000 값을 보여줍니다. DeltaE 2000 값이 1 이상이면 육안으로 구분할 수 있습니다.

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 특성화 데이터, 5등급 용지, 300% 총 면적 커버리지 ink limit, 중간 그레이 컴포넌트 대체(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) 색상은 예를 들어 미디어 쿼리를 사용하여, 지정한 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%)가 되며, 큰 음수의 빨간색 성분을 보면 색역을 벗어남을 알 수 있습니다.

채도를 줄여 색역 내로 맞추면 lch(56.596645% 51 154.5533771086801)가 되고, 이는 rgb(8.154% 60.9704% 37.184%)이며, 이 값이 폴백 색상으로 명시적으로 지정되었습니다.

광색역 화면에서는 색상이 display-p3 색역 내에 있으며 (display-p3(0.1658 0.6147 0.3533)입니다.)

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

이 예시는 CMYKOGV 7색 인쇄용 FOGRA55 베타 데이터셋 [FOGRA55]을 사용합니다. 4개 잉크(블랙, 시안, 마젠타, 옐로우)는 FOGRA51 세트와 동일하며, 결과도 같습니다. 나머지 3개 잉크는 다음과 같습니다:

측정 조건은 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 값을 조회하여 이루어집니다.

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%로 클램핑됩니다.

현대 문법에서는 다섯 번째 인자가 색상의 알파(투명도) 구성요소를 지정합니다. 이는 rgb() 함수의 네 번째 인자와 동일하게 해석됩니다. 생략 시 100%이 기본값입니다.

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

일반적으로 인쇄 기반 응용 프로그램은 실제로 사용된 색상을 CMYK로 저장하고, 프린터에 그대로 전달합니다. 하지만 이러한 색상은 색채측정적 해석이 불가능하므로 그라디언트, 합성, 혼합 등에서는 사용할 수 없습니다.

따라서 Device CMYK 색상은 동등한 색상으로 변환해야 합니다. 이는 HSL이나 HWB에서 RGB로의 변환처럼 단순하지 않으며, 정확한 변환은 출력 장치의 특성에 따라 달라집니다.

  1. 사용자, 저자, 또는 user-agent 스타일시트에 @color-profile로 device-cmyk 정의가 있고, src 설명자로 지정된 리소스를 가져올 수 있으며, 리소스가 유효한 CMYK ICC 프로필이며, user-agent가 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%);

단순 변환은 잉크의 색채측정, 도트 게인, RGB 공간의 색채측정 등 정보를 알 수 없으므로 반드시 근사적일 수밖에 없습니다.

색상 사각형 그리드. 6열(A~F), 4행(1~4)으로 라벨링되어 있습니다.

인쇄 및 사진 산업에서 색상 정확도를 보장하기 위해 사용되는 컬러 체크 차트. 각 패치의 평균 측정 Lab 값이 제공됩니다. 사각형은 Lab 값을 sRGB로 변환한 결과를, 원은 Lab 값을 ICC 프로필로 CMYK로 변환한 후 다시 단순 변환으로 sRGB로 변환한 결과를 나타냅니다.

아래 표는 각 패치에 대해 CMYK 왕복 후 원래 Lab과 새 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. 사용된 색상 모드에 반응하기: light-dark() 함수

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

light-dark() = light-dark( <color>, <color> )

이 함수는 사용된 색상 모드가 light 또는 알 수 없는 상태면 첫 번째 색상의 계산값으로, 사용된 색상 모드가 dark이면 두 번째 색상의 계산값으로 평가됩니다.

테스트

8. 동적으로 충분한 대비의 텍스트 색상을 지정하기: contrast-color() 함수

색상이 동적으로 생성될 때, 이를 배경 색상으로 사용할 경우 충분한 대비를 제공하는 텍스트 색상을 지정하는 것은 종종 어려울 수 있습니다. contrast-color() 함수는 지정된 색상을 단색 배경으로 사용할 때 텍스트에 대해 충분한 색상 대비가 보장되는 색상을 자동으로 제공합니다.

참고: 가독성은 복잡한 주제이며, 충분한 색상 대비는 그 중 한 부분일 뿐입니다. 충분한 대비의 색상 쌍을 가진다고 해서 텍스트가 반드시 읽기 쉬운 것은 아니며, 이는 폰트, 텍스트 크기, 주변 색상 등 다양한 요인에 따라 달라집니다.

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

contrast-color()는 white 또는 black 중 텍스트에 대해 최대 색상 대비를 제공하는 색상으로 해석됩니다. 입력 색상이 단색 배경으로 사용될 때, white와 black 모두 동일한 대비를 제공하면 white로 해석됩니다.

밝은 색 또는 어두운 색을 출력할지 결정하는 정확한 색상 대비 알고리즘은 이 수준에서는 UA(사용자 에이전트) 정의입니다.

참고: 향후 명세에서는 사용되는 대비 알고리즘, 용도, 반환되는 색상 등에 대해 더 많은 제어 기능이 추가될 예정입니다.

UA에는 WCAG 2.1 섹션 1.4.3 최소 대비 대비 비율 알고리즘만을 밝은색/어두운색 결정에 단순히 사용하지 말 것을 권장합니다. 이 알고리즘에는 여러 가지 알려진 문제점이 있습니다. 그러나 이 함수가 반환하는 색상은 WCAG 2.1 섹션 1.4.3 최소 대비 기준 AA 대형 텍스트에는 반드시 부합해야 합니다. 많은 저자들이 법적 요구사항을 충족해야 하기 때문입니다.

9. 색상 보간

9.1. 색상 보간을 위한 색상 공간

<color-interpolation-method>는 사용자 정의 색상 공간을 사용할 수 있도록 확장됩니다: 

<color-space> = <rectangular-color-space> | <polar-color-space> | <custom-color-space>
<rectangular-color-space> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65
<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 §  14. <color> 값 해석하기에 따라 해석됩니다. 그렇지 않은 경우(함수 내에서 currentColor가 사용된 경우), 계산값은 color-mix() 함수이며, 각 <color> 매개변수는 CSS Color 4 §  14. <color> 값 해석하기에 따라 해석되어, 자식 요소로 상속이 유지됩니다.

테스트

10.2. 상대 색상 구문 값 해석하기

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

테스트

그 외의 경우(함수에서 currentColor가 사용된 경우), 계산값은 상대 색상 구문 함수이며, 원본 <color> 매개변수는 CSS Color 4 §  14. <color> 값 해석하기에 따라 해석되어, 자식 요소로 상속이 유지됩니다.

테스트

10.3. device-cmyk 값 해석하기

계산값 및 사용값은 지정된 장치 특화 CMYK 색상이며, (구성 요소는 <number> 타입, <percentage> 타입 아님) 지정된 알파 구성 요소와 짝지어집니다 (<number> 타입, <percentage> 타입 아님; 지정하지 않으면 불투명이 기본값입니다).

사용값은 연산에 따라 달라질 수 있습니다; CMYK 지원 장치로 렌더링할 때는 CMYK 색상으로 렌더링될 수 있으며; 비-CMYK 색상과 혼합하거나 비-CMYK 장치로 렌더링할 때는, § 6 보정되지 않은 CMYK 색상: device-cmyk() 함수에 명시된 대로 변환되어야 합니다.

예시: 
 device-cmyk(0% 70% 20% 0%)

명시값 및 사용값은

 device-cmyk(0 0.7 0.2 0)

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

 lab(63.673% 51.577 5.811)

참고: 모든 색상과 마찬가지로, 사용값은 스크립트에서 접근할 수 없습니다.

11. 직렬화

이 섹션은 CSS Color 4 §  15. <color> 값 직렬화를 확장하여, color-mix(), device-cmyk(), 그리고 상대 색상 함수의 결과 직렬화를 추가합니다.

이 섹션에서 명세에 사용되는 문자열과 해당 문자 코드는 다음과 같습니다.

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

문자열 "."은 지역과 상관없이 소수점 구분자로 사용되며, 천 단위 구분자는 사용하지 않습니다.

일반적으로, 결과의 alpha가 정확히 1이면, 직렬화 시 생략됩니다; 1(완전 불투명)이 암묵적 기본값입니다.

11.1. color-mix() 직렬화

color-mix() 함수의 선언된 값 직렬화는 문자열 "color-mix(in "으로 시작하고, 지정된 <color-space>를 모두 소문자로 표시한 다음, ", "를 넣고, 첫 번째로 지정된 색상을 이어 붙이고, 그 뒤에 공백을 넣고, 첫 번째 백분율(아래 참조) 직렬화, ", "를 넣고, 두 번째로 지정된 색상, 두 번째 백분율 직렬화, 마지막에 ")"를 붙입니다.

color-mix() 함수의 선언값에서 첫 번째 백분율 직렬화 규칙은 다음과 같습니다:

color-mix() 함수의 선언값에서 두 번째 백분율 직렬화 규칙은 다음과 같습니다:

참고: calc() 값은 unknown으로 간주되며, 절대로 50%가 될 수 없고, 다른 값과 합쳐서 100%가 될 수도 없습니다.

예시: 다음 선언값의 직렬화 결과는 
color-mix(in oklab, teal, peru 40%)

문자열 "color-mix(in oklab, teal 60%, peru)"가 됩니다.

다음 선언값의 직렬화 결과는

color-mix(in oklab, teal 50%, peru 50%)

문자열 "color-mix(in oklab, teal, peru)"가 됩니다.

다음 선언값의 직렬화 결과는

color-mix(in oklab, teal 70%, peru 70%)

문자열 "color-mix(in oklab, teal 70%, peru 70%)"가 됩니다. 이 값들이 50%씩으로 정규화된다는 사실은 백분율 정규화 이후에만 알 수 있기 때문입니다.

color-mix() 함수 결과의 직렬화는 믹스에 currentColor 키워드가 사용되었는지에 따라 달라집니다. 사용된 경우 결과는 선언값 그대로 직렬화됩니다. 이렇게 하면 color 속성 값이 다른 자식 요소에서도 올바른 혼합 결과를 사용할 수 있습니다. 그렇지 않은 경우, <color>로 직렬화되며, CSS Color 4 §  15. <color> 값 직렬화에서 정의된 대로 처리됩니다. 사용되는 형식은 "in"으로 지정된 색상 공간에 따라 다릅니다:

혼합 색상 공간 형식
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의 별칭입니다
테스트

왕복(round-trip) 직렬화의 최소 정밀도는 CSS Color 4 §  15. <color> 값 직렬화에서 명시된 것과 동일합니다.

이 색상 혼합 결과는 
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 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 §  15. <color> 값 직렬화에서 정의된 대로 처리됩니다.

사용되는 형식은 상대 색상의 색상 공간에 따라 다릅니다:

혼합 색상 공간 형식
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)
테스트

왕복 직렬화의 최소 정밀도는 CSS Color 4 § 15.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() 형식을 사용합니다.

구성 요소 값은 10진법으로 <number>로 직렬화됩니다. 구성 요소 값 사이에는 반드시 하나의 ASCII 공백 문자 " "가 구분자로 사용되어야 합니다.

구성 요소 값에 포함된 소수점 이하 0은 반드시 생략해야 하며, 소수 부분이 모두 0이면 소수점도 생략해야 합니다.

다음 색상의 직렬화 값은

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

"device-cmyk(0 0.81 0.81 0.3)" 문자열입니다

device-cmyk() 구성 요소 값의 보존 정밀도와 직렬화 값의 유효 숫자 개수는 이 명세에서 정의되어 있지 않으나, 최소한 8비트 정밀도로 왕복(round-trip)할 수 있을 만큼 충분해야 하며, 이는 뒤의 0이 생략되지 않는 한 최소 소수점 두 자리를 의미합니다. 값은 +∞ 방향으로 반올림해야 하며, 단순히 버림하면 안 됩니다.

알파 값이 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 속성을 가져올 때 CSSOMString 객체를 반환해야 하며, 해당 규칙에 정의된 색상 프로필의 name 직렬화 값을 포함해야 합니다.
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. 보안 고려사항

이 명세는 CSS에 필요 시 ICC 프로필 다운로드 기능을 추가합니다. ICC 프로필은 실행 코드가 아니므로, 추가적인 보안 위험을 초래하지 않습니다.

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

이 명세에 대해 새로운 개인정보 보호 고려사항은 보고된 바 없습니다.

16. 접근성 고려사항

이 명세는 사용자 지정 색상(동적 색상 포함)이 배경인 텍스트에 대해 충분한 대비를 보장할 수 있는 방법을 제공합니다.

17. 변경 사항

17.1. 2024년 2월 29일 작업 초안 이후

17.2. 2022년 6월 28일 작업 초안 이후

17.3. 2022년 4월 28일 작업 초안 이후

17.4. 2021년 12월 15일 현행 표준 초안 이후

17.5. 2021년 6월 1일 작업 초안 이후

17.6. 2020년 6월 10일 FPWD 이후

17.7. CSS Color 4와의 변경 사항

CSS Color 4와 비교하여 주요 변경점은 CSS 색상이 더 이상 sRGB나 display-p3와 같은 미리 정의된 RGB 색상 공간에만 제한되지 않는다는 점입니다.

이를 지원하기 위해 여러 새로운 기능이 추가되었습니다:

  1. color() 함수가 @color-profile at-rule에 의해 확장되어, 교정된 CMYK 등 프로파일 기반 장치 의존 색상 지원
  2. device-cmyk() 함수로 출력 장치별 비교정 CMYK 색상 공간 지정 가능

또한 신규 color-mix() 함수로 두 색상을 지정된 색상 공간에서 혼합하여 새로운 색상 생성 가능

적합성

문서 관례

준수 요구사항은 설명적 단언과 RFC 2119 용어의 조합으로 표현됩니다. “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, “OPTIONAL” 등의 핵심 단어는 본 명세의 규범 부분에서 RFC 2119에 정의된 대로 해석해야 합니다. 그러나 가독성 향상을 위해, 이 단어들은 대문자로 표기되지 않습니다.

이 명세의 모든 텍스트는 특별히 비규범임이 표시된 섹션, 예시, 주석을 제외하고는 규범적입니다. [RFC2119]

이 명세의 예시는 “예를 들어” 라는 문구로 시작하거나, class="example"처럼 규범 텍스트와 구분되어 표시됩니다, 예시:

이것은 정보 제공용 예시입니다.

정보 제공용 주석은 “참고”라는 단어로 시작하며 class="note"로 규범 텍스트와 구분되어 표시됩니다, 예시:

참고: 이것은 정보 제공용 주석입니다.

권고(advisement)는 규범 섹션을 특별히 강조하여 스타일링한 것이며, <strong class="advisement">로 규범 텍스트와 구분됩니다, 예시: UA는 반드시 접근 가능한 대안을 제공해야 합니다.

테스트

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

적합성 클래스

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

스타일시트
CSS 스타일시트.
렌더러
UA는 스타일시트의 의미를 해석하고, 이를 사용하는 문서를 렌더링하는 에이전트입니다.
저작 도구
UA는 스타일시트를 작성하는 도구입니다.

스타일시트가 본 명세에 준수하려면, 이 모듈에서 정의된 문법을 사용하는 모든 선언이 CSS 일반 문법과 각 기능별 개별 문법에 따라 유효해야 합니다.

렌더러가 본 명세에 준수하려면, 스타일시트를 해당 명세에 따라 해석하는 것 외에, 이 명세에서 정의된 모든 기능을 올바르게 파싱하여 문서를 그에 맞게 렌더링해야 합니다. 단, 장치의 한계로 인해 UA가 문서를 올바로 렌더링하지 못하는 경우 UA가 비준수로 간주되지 않습니다. (예: UA가 흑백 모니터에서 색상을 렌더링할 필요는 없음)

저작 도구가 본 명세에 준수하려면, 스타일시트를 본 모듈의 CSS 일반 문법과 각 기능별 개별 문법에 맞춰 구문적으로 올바르게 작성하고, 스타일시트에 대한 모든 기타 준수 요구사항을 충족해야 합니다.

부분 구현

저자가 하위 호환 파싱 규칙을 활용하여 폴백 값을 지정할 수 있도록, CSS 렌더러는 반드시 사용할 수 없는 수준의 지원을 가진 at-rule, 속성, 속성값, 키워드 및 기타 문법 요소를 무효로 간주하고 적절히 무시해야 합니다. 특히, 사용자 에이전트는 단일 다중값 속성 선언에서 지원하지 않는 구성 요소 값만 무시하고 지원되는 값만 적용해서는 안 됩니다: 어떤 값이 무효(지원 불가)로 간주되면 CSS는 전체 선언을 무시하도록 요구합니다.

불안정 및 독점 기능 구현

향후 안정적인 CSS 기능과 충돌을 피하기 위해, CSSWG는 모범 사례를 따라 불안정한 기능 및 독점 확장을 구현할 것을 권장합니다.

비실험적 구현

명세가 Candidate Recommendation 단계에 도달하면, 비실험적 구현이 가능해지며, 구현자는 명세에 따라 올바르게 구현되었음을 입증할 수 있는 모든 CR 수준 기능을 접두어 없이 릴리스해야 합니다.

CSS의 구현 간 상호운용성을 확립하고 유지하기 위해, CSS 워킹 그룹은 비실험적 CSS 렌더러가 W3C에 구현 보고서(필요하다면 해당 테스트케이스 포함)를 제출한 후 CSS 기능의 접두어 없는 구현을 릴리스할 것을 요청합니다. W3C에 제출된 테스트케이스는 CSS 워킹 그룹의 검토와 수정 대상입니다.

테스트케이스 및 구현 보고서 제출에 대한 추가 정보는 CSS 워킹 그룹 웹사이트 https://www.w3.org/Style/CSS/Test/에서 확인할 수 있습니다. 질문은 public-css-testsuite@w3.org 메일링리스트로 문의하시기 바랍니다.

색인

이 명세에서 정의된 용어

참조로 정의된 용어

참고문헌

규범적 참고문헌

[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. 2022년 1월 13일. CR. URL: https://www.w3.org/TR/css-cascade-5/
[CSS-COLOR-4]
Chris Lilley; Tab Atkins Jr.; Lea Verou. CSS Color Module Level 4. 2024년 2월 13일. CRD. URL: https://www.w3.org/TR/css-color-4/
[CSS-COLOR-ADJUST-1]
Elika Etemad; et al. CSS Color Adjustment Module Level 1. 2022년 6월 14일. CRD. URL: https://www.w3.org/TR/css-color-adjust-1/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS 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 Values and Units Module Level 4. 2024년 3월 12일. WD. URL: https://www.w3.org/TR/css-values-4/
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). 2021년 8월 26일. WD. URL: https://www.w3.org/TR/cssom-1/
[FETCH]
Anne van Kesteren. Fetch Standard. 현행 표준. URL: https://fetch.spec.whatwg.org/
[ICC]
ICC.1:2022 (Profile version 4.4.0.0). 2022년 5월. URL: http://www.color.org/specification/ICC.1-2022-05.pdf
[INFRA]
Anne van Kesteren; Domenic Denicola. Infra Standard. 현행 표준. URL: https://infra.spec.whatwg.org/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. 1997년 3월. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[WEBIDL]
Edgar Chen; Timothy Gu. Web IDL Standard. 현행 표준. URL: https://webidl.spec.whatwg.org/

참고용 참고문헌

[FOGRA39]
ISO 12647-2:2004 / Amd 1, 오프셋 상업 및 특수 인쇄(ISO 12647-2 기준), 용지 타입 1 또는 2(광택 또는 무광 오프셋, 115 g/m²), 스크린 주파수 60/cm. 2006년. URL: https://www.color.org/chardata/FOGRA39.xalter
[FOGRA51]
ISO 12647-2:2013, 반톤 컬러 분리, 교정 및 인쇄물 생산을 위한 공정 제어, Part 2: 오프셋 리소그래피, PS 1, 프리미엄 코팅, 115 g/m², 중간 기질 형광. 2015년. URL: https://www.color.org/chardata/fogra51.xalter
[FOGRA55]
CMYKOGV 기반 색역 교환 공간. 2021년. URL: https://fogra.org/en/research/prepress-technology/multiprimary-printing-13003

속성 색인

정의된 속성이 없습니다.

@color-profile 설명자

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

IDL 색인

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