168 spaces

색공간

에서 까지, 에서 까지, 년부터 년까지.
CSS, 셰이더, WASM, 색 변환 표(LUT)를 지원합니다.

디스플레이·웹19

제작과 배포를 위한 RGB 색공간. 웹 기본값부터 더 넓은 디스플레이 색역까지.

HP & Microsoft, 1996
Apple, 2015
ITU-R, 2012
HP & Microsoft, 1996
ITU-R, 1990
Kodak, 1999
Adobe Systems, 1998
DCI, 2005
Apple, 2015
ITU-R, 2012
Adobe Systems, 1998
Kodak, 1999
IEC, 2003
Kodak, 2000
CIE, 1931
FCC, 1953–87
Walter Bruch / Telefunken, 1967
Apple Computer, 1987–96
SMPTE, 1988–90

RGB 변형9

RGB 위에 만든 색상·채도·밝기 조절 체계. 같은 간격이 같아 보이지는 않을 수 있습니다.

Joblove & Greenberg, 1978
Alvy Ray Smith, 1978
Alvy Ray Smith, 1996
John R. Kender, 1976
community convention, 2011
Ian Taylor, 2012
Darel Rex Finley, 2006
Kuzma Shapran, 2012
Bianconi et al., 2009

지각 기반48

색을 비교하고, 팔레트를 만들고, 색의 외관을 예측하기 위한 좌표계.

Björn Ottosson, 2020
CIE, 1976
Li et al., 2017
Björn Ottosson, 2020
Google, 2021
Björn Ottosson, 2021
Björn Ottosson, 2021
Björn Ottosson, 2021
Björn Ottosson, 2021
Björn Ottosson, 2021
Jan Behrens, 2009
Konovalenko et al., 2021
Li & Luo, 2024
Hensley & Fairchild, 2020
Safdar et al., 2017
Safdar et al., 2017
Fritz Ebner & Mark Fairchild, 1998
Safdar et al., 2017
Mark Fairchild & Garrett Wyble, 2010
CIE, 1976
CIE, 1976
Alexei Boronine, 2012
CIE, 1976
CIE, 1976
CIE, 1976
Alexei Boronine, 2012
DIN, 2018
DIN, 2018
Cui et al., 2002
Richard S. Hunter, 1948
David MacAdam / CIE, 1960–76
Günther Wyszecki / CIE, 1964–76
Elliot Q. Adams, 1942–76
Mark Fairchild & Garrett Wyble, 2010–16
CIE, 2002–17
Li et al., 2017
Safdar et al., 2021
Luo et al., 2006–17
Li et al., 2017
Li et al., 2017
Luo et al., 2006–17
Luo et al., 2006–17
Luke Hellwig & Mark Fairchild, 2022
Mark Fairchild, 1996
Luo et al., 1996
Yoshinobu Nayatani, 1995
Robert W. G. Hunt, 1994
Sherman Lee Guth, 1995

측색·연구22

측정의 기초, 눈의 원리, 연구용 특수 좌표계.

CIE, 1931
CIE, 1931
Estévez et al., 1979
ICC, 1994
CIE, 1976
Yoshi Ohno / ANSI, 2014
Raymond Davis; CIE, 1931
James Clerk Maxwell, 1860
CIE, 1931
ITU-R, 2016
Donald MacLeod & Robert Boynton, 1979
Derrington et al., 1984
CIE, 1931
Hermann von Helmholtz, 1860
James Clerk Maxwell, 1860
Richard Kirk, 2019
Jyrki Alakuijala et al., 2019
OSA committee, 1974
Terrillon & Akamatsu, 2000
Xerox, 1989
Ohta et al., 1980
Ruderman et al., 1998

비디오·방송20

방송, 압축, HDR 배포를 위해 밝기와 색을 분리합니다.

ITU-R, 1990
Dolby, 2016
ITU-R, 2012
ITU-R, 1982
ITU-R, 1982
ITU-R, 1982
Walter Bruch / Telefunken, 1967
NTSC, 1953–82
ITU-R, 1982
Malvar & Sullivan, 2003
Eric Hamilton / C-Cube Microsystems, 1992
Henri de France, 1967
ITU-R, 2012
Sony / IEC, 2006
SMPTE, 1987
Kodak, 1992
Dolby / ITU-R, 2016
BBC & NHK / ITU-R, 2016
ITU-R, 2016
Julian Fröhlich, 2017

영화·카메라43

빛을 기록하고 그레이딩하기 위한 카메라 로그 인코딩과 작업 색공간.

Academy, 2014
ARRI, 2010–22
Academy, 2014
Sony, 2014
Sony, 2014
Academy, 2012
Academy, 2016
ARRI, 2022
Kodak, 1992
Blackmagic Design, 2020
Sony, 2012–14
Panasonic, 2014
RED Digital Cinema, 2017
Canon, 2011–15
Canon, 2015
Canon, 2016
Fujifilm, 2016
Fujifilm, 2022
Fujifilm, 2024
Nikon, 2018
Apple, 2023
Apple, 2025
Blackmagic Design, 2020
DJI, 2017
FilmLight, 2013
Kinefinity, 2025
SMPTE/DCI, 2006
Sony, 2008–12
Academy, 2013
Kodak, 2000
Leica, 2020
GoPro, 2012
GoPro, 2026
Insta360, 2026
Xiaomi, 2024
OPPO, 2025
Samsung, 2025
RED Digital Cinema, 2007–08
RED Digital Cinema, 2008–17
RED Digital Cinema, 2016–17
Panavision / Sony, 2005
Thomson Grass Valley, 2002
FiLMiC Inc., 2017

인쇄·물감7

잉크, 물감, 그리고 측정에 기반한 물체색의 체계.

Eagle Printing Ink Co., 1906
Albert H. Munsell, 1905
Johannes Itten, 1961
Louis Ducos du Hauron, 1868–1906
RAL gGmbH, 1993
Antal Nemcsics, 1980
Wilhelm Ostwald, 1917

사용하기

색 변환을 위한 JavaScript 패키지입니다. 색공간 하나의 크기는 1.5 kB 미만이며, 모든 색공간을 가져오면 임의의 두 공간 사이에서 변환할 수 있습니다. 같은 변환을 WASM으로 이미지 전체에 적용하거나 GLSL·WGSL 셰이더에서 실행할 수 있습니다. LUT 표와 ICC 프로파일로 내보내거나 에이전트가 MCP 서버를 통해 호출할 수도 있습니다.

  • 기준값으로 검증모든 색공간 테스트 완료
  • 양방향어떤 색공간이든 다른 색공간으로
  • 초경량색공간 하나에 0.4–1.5 kB
  • 퍼블릭 도메인CC0
import space from 'color-space'

space.rgb.oklch(255, 128, 0)      // → [0.732, 0.186, 53]
space.oklch.rgb(0.65, 0.25, 180)  // any of 168 × 167 pairs

space.oklch.name    // 'oklch'
space.oklch.range   // [[0,1], [0,0.4], [0,360]]

// one space only – tree-shaken, 0.4-1.5 kB
import oklch from 'color-space/oklch.js'
oklch.rgb(0.65, 0.25, 180)
색공간이란 무엇인가요?

색을 위한 좌표계입니다. 축, 범위, 그리고 숫자를 측정 가능한 빛에 연결하는 규칙으로 이루어집니다. 같은 주황이 rgb(255 128 0), oklch(0.732 0.186 53), XYZ [49, 36.7, 4.5]입니다. 같은 색을 세 가지로 쓴 것입니다. 팔레트는 고른 색 몇 개이고, 색공간은 어떤 색이든 적을 수 있는 방법입니다.

색 모델과 색공간, 무엇이 다른가요?

색 모델은 색을 표현하는 성분을 정합니다. RGB는 세 원색, HSL은 색상·채도·명도, CMYK는 네 가지 잉크를 사용합니다. 색공간은 원색, 백색점, 인코딩 곡선을 구체적으로 정해 각 값의 조합이 측정 가능한 하나의 색에 대응하도록 합니다. 따라서 rgb(255 0 0)은 sRGB, Display P3, Adobe RGB에서 서로 다른 빨강을 나타냅니다. 모델은 같지만 색공간이 다릅니다.

일반적으로 둘 다 색공간이라고 부릅니다. CSS의 color-mix(in hsl, …)와 이 카탈로그에서도 마찬가지입니다. 자체 기준이 없는 모델은 기존 색공간을 기준으로 정의할 수 있습니다. 여기서 HSL과 HSV는 CSS에서처럼 sRGB를 기반으로 합니다.

실제로 어떤 색공간을 써야 하나요?

작업에 따라 다릅니다.

  • 이미지 저장과 공유 – 웹의 기본값인 sRGB
  • 팔레트와 그러데이션 디자인 – 같은 간격이 같아 보이는 OKLCH
  • 빛에 대한 연산(블렌딩, 블러, 3D) – 선형 광 RGB
  • 영상 촬영과 그레이딩 – 카메라의 로그 색공간, 납품은 Rec. 709 또는 Rec. 2100
  • 두 색이 얼마나 다르게 보이는지 측정 – CIELAB 또는 DIN99o

카탈로그를 용도별로 묶어도 같은 방식으로 정리됩니다.

HSL 대신 무엇을 써야 하나요?

OKLCH입니다. 색상, 크로마, 명도라는 세 가지 조절값은 같지만 명도를 믿을 수 있습니다. HSL에서 L=50인 노랑은 L=50인 파랑보다 약 13배 많은 빛을 내므로, L이 같다고 밝기가 같지 않습니다. OKLCH에서는 같습니다. CSS는 oklch()를 기본 지원합니다.

그러데이션 가운데가 왜 탁해지나요?

감마 인코딩된 sRGB에서 계산하기 때문입니다. 여기서 두 색의 숫자를 평균하면 실제로 빛을 섞을 때보다 어둡고 탁한 빛이 나옵니다. OKLab에서 보간하면 이 문제를 피할 수 있습니다. 모든 상세 정보의 보간 행은 같은 혼합을 두 색공간에서 나란히 그려 보여 주므로, 고르기 전에 차이를 확인할 수 있습니다.

“색역 밖”이란 무슨 뜻인가요?

한 색공간에서는 표현할 수 있지만 다른 색공간이나 내 화면에서는 보여 줄 수 없는 색입니다. 선명한 Display P3 초록은 sRGB에 아예 존재하지 않습니다. 변환하면 숫자가 유효 범위를 벗어납니다. 아틀라스는 이를 그대로 보여 줍니다. 현재 색 옆의 알약 표시는 그 색을 담는 가장 좁은 표준 색역을 알려 주고, 범위를 벗어난 구간은 체크무늬 위에 흐리게 표시됩니다.

인쇄물은 왜 화면보다 탁해 보이나요?

화면은 빛을 내고, 종이는 잉크가 흡수하지 않은 빛을 반사합니다. 종이 위의 잉크가 낼 수 있는 선명한 색은 더 적어서, 채도 높은 RGB의 파랑·초록·빨강은 그 범위를 벗어나 더 탁하게 인쇄됩니다. 인쇄 전 공정에서는 유럽 코팅지용 FOGRA39나 미국의 GRACoL처럼 인쇄기와 용지에 맞춘 ICC 프로파일로 변환합니다. 이 카탈로그의 CMYK는 CSS가 프로파일 없이 device-cmyk()에 쓰는 단순 공식입니다. 숫자로는 맞지만 인쇄 교정용은 아닙니다.

변환은 정확한가요? 왕복 변환에서 데이터가 손실되나요?

변환은 룩업 근사가 아니라 닫힌 형태의 공식이며, 왕복 변환은 부동소수점 오차 범위 안으로 돌아옵니다. 몇 가지 예외는 해당 위치에 문서화되어 있습니다. OSA-UCS에는 닫힌 형태의 역변환이 없고, Munsell 같은 아틀라스 체계는 발표된 등급 사이를 보간하며, rgb 출력은 sRGB 색역으로 클램프됩니다. 그 밖의 값이 필요하면 XYZ나 선형 RGB를 거치세요.

검증도 거쳤습니다. 모든 색공간에는 구현 근거가 된 논문이나 규격의 링크가 있고, 값은 겹치는 범위에서 colorjs.io와 대조해 테스트하며, 카메라 로그는 Academy의 공식 ACES 변환과 대조합니다. formula-verification.md에는 무엇을 무엇과 대조했는지 기록되어 있습니다. 발표된 논문 자체에 오류가 있던 몇몇 지점도 포함됩니다.

다른 라이브러리와 숫자가 다르다면 범위를 비교해 보세요. 많은 라이브러리가 모든 값을 0–1로 정규화하지만, 여기서는 각 색공간의 관례적 범위를 유지합니다. RGB는 0–255, Lab 명도는 0–100, 색상은 0–360입니다. 모든 카드에 범위가 표시되며, 코드에서는 space.oklch.range입니다.

이 중 CSS로 쓸 수 있는 것은?

기본 지원은 rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch()이고, color()로 Display P3, Adobe RGB, ProPhoto, 선형 sRGB, XYZ(D65와 D50)를 쓸 수 있습니다. CSS의 rec2020은 순수한 2.4 감마로, 이 카탈로그의 Rec. 2020이 쓰는 BT.2020 커브와 다릅니다. 같은 숫자가 다른 색을 가리키게 됩니다. 각 상세 정보의 css 탭은 현재 색을 복사할 수 있는 형태로 적어 줍니다. CSS에 없는 색공간은 대신 ICC 프로파일이나 LUT로 제공합니다.

Pantone, NCS, RAL은 어디 있나요?

이들은 라이선스 제품입니다. 색이 공개된 공식이 아니라 소유자가 판매하는 데이터로 정의되므로, 구현할 공개 수학이 없고 그 표를 재배포하는 것도 합법이 아닙니다. 수학이 공개된 가까운 친척들은 여기 있습니다. Munsell(1943년 재표기는 공공 기록)과 RAL Design(CIELAB으로 직접 정의)입니다. 기준은 간단합니다. 수학이 한 번이라도 발표되었다면 이 컬렉션에 들어옵니다.

복사됨