- CIE 1931 xy 색도 다이어그램의 말굽형 경계는 임의의 공식이 아니라, 사람이 빨강·초록·파랑 빛을 상대적으로 지각하는 방식을 측정한 색 일치 함수에서 나옴
- CIE RGB 데이터는 700nm, 546nm, 435nm 광원을 조절해 스펙트럼 색과 맞춘 실험 결과이며, 일부 파장의 음수 값은 순수 RGB만으로 재현할 수 없는 색이 있음을 보여줌
- XYZ 색공간은 RGB를 선형 변환해 모든 값을 양수로 다루기 쉽게 만든 표준이며,
x = X/(X+Y+Z), y = Y/(X+Y+Z)로 3차원 값을 2차원 색도 좌표에 투영함
- 다이어그램 내부 색은
x, y에서 바로 계산하기보다, 여러 스펙트럼 선 형태를 만들고 색 일치 함수와 곱해 적분한 뒤 xy 좌표에 찍는 방식으로 근사할 수 있음
- 실제 화면은 sRGB나 display-p3 같은 디스플레이 색공간에 묶이므로, 경계 근처의 많은 색은 정확히 표시되지 않고 클리핑이나 채널 포화가 생김
말굽형 다이어그램의 출발점
- CIE 1931 XYZ 색공간을 이해하다 보면 반복해서 만나는 색도 다이어그램은 밝기와 분리해 색의 품질을 나타내는 도표임
- 가장자리는 특정 파장의 스펙트럼 색과 연결되지만, 전체 형태와 내부 색은 단순한
x = func(y) 공식으로 설명되지 않음
- 핵심 형태는 사람이 빨강·초록·파랑을 서로 어떻게 지각하는지에서 나오며, 내부 색은 색 혼합 수학과 점 샘플링으로 2D 이미지에 렌더링할 수 있음
색 일치 함수와 CIE RGB
- 색 일치 함수는 특정 파장의 목표 색을 눈으로 같게 보이게 만들기 위해 빨강·초록·파랑 광원의 세기를 얼마나 조절해야 하는지 나타냄
- CIE 1931 RGB 색 일치 함수는 각각 700nm, 546nm, 435nm의 빨강·초록·파랑 광원을 기준으로 함
- 실험은 한쪽에 목표 색 광원을 두고, 다른 쪽 RGB 광원을 사람이 직접 조절해 목표 색과 맞추는 방식으로 진행됨
- 이 데이터에는 음수 빨강 같은 값이 등장함
- 음수 광원은 물리적으로 만들 수 없음
- 순수 RGB 광원만으로 일부 스펙트럼 색을 재현할 수 없다는 뜻임
- 그래도 변환을 거치면 색공간 계산에 유용하게 쓸 수 있음
XYZ 색공간과 xy 색도 좌표
- XYZ 색공간은 RGB 색공간을 행렬로 선형 변환한 형태이며, 같은 정보를 계산하기 쉬운 다른 좌표계로 재배치한 것에 가까움
- Wikipedia의 RGB 변환 행렬을 사용하면 XYZ 색 일치 함수 데이터를 RGB 그래프와 비교할 수 있음
matrix = [
2.364613, -0.89654, -0.468073,
-0.515166, 1.426408, 0.088758,
0.005203, -0.014408, 1.009204
]
[R, G, B] = matrix * [X, Y, Z]
- XYZ는 표시 장치가 직접 낼 수 없는 색까지 포함해 모든 색을 기술하는 표준 공간으로 쓰일 수 있음
- 각 장치는 이 값을 자신이 물리적으로 표시 가능한 색공간으로 해석해야 함
- 장치의 색역이 넓어지면 같은 색 정보에서도 더 많은 색을 표현할 수 있음
- xy 색도 좌표는 XYZ 값을 전체 합으로 나누어 계산함
const x = X / (X + Y + Z)
const y = Y / (X + Y + Z)
const z = Z / (X + Y + Z) = 1 - x - y
z는 x와 y에서 유도할 수 있어 xy 색도 다이어그램에서는 보통 생략됨xy에서 다시 XYZ로 돌아가려면 Y 값이 필요하며, 이를 포함한 표현이 xyY 색공간임
왜 말굽처럼 보이는가
- RGB 색 일치 함수 데이터를 xy로 투영하면 익숙한 색도 다이어그램의 윤곽이 나타나기 시작함
- RGB 데이터에는 불가능한 색 때문에 x축 음수 영역이 포함되고, XYZ로 변환하면 더 익숙한 말굽형 형태에 가까워짐
- XYZ 색 일치 함수 표 데이터를 직접 xy로 렌더링해도 같은 형태와 맞아떨어짐
- 형태는 XYZ 색 일치 함수의 곡선에서 직접 유도됨
- 각 파장마다
X, Y, Z가 전체에서 차지하는 비율을 계산함
- 이 비율을 따라 점을 찍으면 색도 경계가 생김
- 임의로 만든 색 일치 함수에 같은 절차를 적용하면 전혀 다른 형태가 나오므로, 실제 말굽형은 인간 시각 실험에서 유도된 함수의 결과임
내부 색을 채우는 근사 방식
x, y 좌표만으로는 해당 점이 유효한 색인지, 어떤 색으로 근사해야 하는지 바로 알 수 없음- 반대로 임의의 XYZ 값이나 스펙트럼을 만들고, 이를 xy 좌표로 변환해 도표 위에 찍는 접근을 사용할 수 있음
- 핵심은 스펙트럼 선 형태를 생성하는 것임
- 모든 파장 축 위에서 각 파장이 색에 얼마나 기여하는지 나타내는 선을 만듦
- 그 선을 XYZ 색 일치 함수와 곱하고 적분해 최종 XYZ 값을 얻음
- 같은 방식으로 RGB 색 일치 함수와 곱하고 적분해 RGB 값을 얻음
- 얻은 XYZ 값을 xy로 바꾸어 색도 다이어그램에 찍음
- 두 개의 사인 곡선에서 오프셋과 폭을 바꾸면 서로 다른 스펙트럼 선이 생성되고, 그 결과 다른 색과 좌표가 도표에 나타남
- 자동화 데모는 오프셋과 폭을 변화시키며 공간을 더 넓게 훑지만, 전체 색공간을 완전히 채우지는 못함
- 직접 실험할 수 있는 CodePen 데모가 제공됨
화면 표시와 색공간 제약
- 계산된 XYZ 값을 화면에 표시하려면 sRGB 같은 실제 렌더링 색공간으로 변환해야 함
- 브라우저의
rgb()는 sRGB를 가정하므로, XYZ를 RGB로 바꿀 때 감마 보정을 고려해야 함
- display-p3는 sRGB보다 넓은 색역을 가진 색공간이며, 많은 브라우저와 디스플레이가 지원함
- CSS에서는
color(display-p3 r, g, b) 형태로 display-p3 색을 지정할 수 있음
- 브라우저의 p3 색공간도 sRGB와 같은 감마 보정을 사용하므로, 이를 포함해야 색이 맞게 렌더링됨
- wide gamut 브라우저와 디스플레이에서는 더 강한 색을 볼 수 있지만, 스크린샷이나 Zoom 화면 공유에서 p3가 어떻게 전달되거나 sRGB로 변환되는지는 이 실험만으로 확정하기 어려움
색이 완전히 정확하지 않은 이유
- 내부 색을 XYZ 값에서 바로
XYZ_to_sRGB로 변환하면 많은 색이 0~255 범위를 벗어나고, 지나치게 포화된 결과가 나옴
- XYZ에서 직접 색을 얻기보다 스펙트럼 선을 RGB 색 일치 함수와 곱해 적분하는 방식이 더 나은 보간처럼 보임
- 그래도 생성된 색 중 상당수는 여전히 유효하지 않은 RGB 값임
- 0~255 범위를 벗어나는 색을 렌더링하지 않으면 익숙한 sRGB 삼각형만 남음
- 삼각형 밖의 색은 정확히 표시되지 않지만, RGB 채널 중 1~2개만 포화된 상태에서는 나머지 채널 변화로 색 차이가 어느 정도 보일 수 있음
관련 자료