168 spaces

색공간

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

사용하기

색 변환을 위한 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)

// values in the notations CSS already speaks – straight from the library
color: oklch(0.732 0.186 53);            // space.rgb.oklch(255, 128, 0)
color: color(display-p3 0.936 0.529 0.199);  // space.rgb.p3(255, 128, 0)
color: color(xyz-d65 0.49 0.367 0.045);      // space.rgb.xyz(…) / 100 – exact interchange

// spaces CSS lacks ship as ICC profiles or LUTs – see those tabs;
// every dossier's css tab writes the current color in copyable forms

// per-space metadata – sourced, ships as data.json
import data from 'color-space/data.json' with { type: 'json' }

const m = data.spaces.oklch
m.channels   // [{symbol, min, max, name}, …]
m.refs       // defining spec / paper links
m.year, m.by // 2020, 'Björn Ottosson'

// scalar or whole-buffer, zero-copy – a true WASM kernel
import space, { alloc } from 'color-space/wasm'

space.oklch.rgb(0.72, 0.16, 41)   // → [246, 125, 79]

const buf = alloc(n)              // n×3 Float64Array
space.rgb.oklch(buf)              // in place – 27 spaces

// every pair as a GLSL shader chunk
import { glsl } from 'color-space/gl'
import oklch from 'color-space/gl/oklch'

const src = glsl(oklch, 'rgb')
// → self-contained: vec3 oklch_rgb(vec3 c)
//   paste into any fragment shader, no uniforms

// an MCP server – convert · gamut · css · space · spaces · cube –
// so an agent calls verified conversions instead of guessing them
npx -y color-space mcp

// Claude Code
claude mcp add color-space -- npx -y color-space mcp
// VS Code
code --add-mcp '{"name":"color-space","command":"npx","args":["-y","color-space","mcp"]}'
// Claude Desktop · Cursor · .mcp.json
{ "mcpServers": { "color-space": { "command": "npx", "args": ["-y", "color-space", "mcp"] } } }

색공간이란 무엇인가요?

색을 위한 좌표계입니다. 축, 범위, 그리고 숫자를 측정 가능한 빛에 연결하는 규칙으로 이루어집니다. 같은 주황이 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으로 직접 정의)입니다. 기준은 간단합니다. 수학이 한 번이라도 발표되었다면 이 컬렉션에 들어옵니다.