205 spaces

색공간

웹에서 인쇄까지, 색 선택기에서 연구까지, 1860년부터 2026년까지. CSS, 셰이더, WASM, 색 변환 표(LUT)를 지원합니다.

사용법

하나의 JavaScript 패키지입니다. 같은 변환을 WASM으로 이미지 전체에 적용하거나 GLSL·WGSL 셰이더에서 실행할 수 있고, LUT와 ICC 프로파일로 내보낼 수도 있습니다.

기준값으로 검증모든 색공간 테스트 완료
양방향어떤 색공간이든 다른 색공간으로
초경량색공간 하나에 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 205 × 204 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"] } } }

// Figma 플러그인: 선택 항목의 채우기와 선을 205개 색공간 어디에서나 –
// 채널마다 평면과 막대, 파일의 색역에 맞춰 자름. 색을 CSS로 복사
figma.com/community/plugin/1691970922817908383/color-space

git clone https://github.com/colorjs/color-space

// Figma 데스크톱 앱: 오른쪽 클릭 › Plugins › Development › Import plugin from manifest…
color-space/plugins/figma/manifest.json

// 무엇을 읽고, 쓰고, 보관하는지 – plugins/figma

색공간이란 무엇인가요?

색을 위한 좌표계입니다. 축, 범위, 그리고 숫자를 측정 가능한 빛에 연결하는 규칙으로 이루어집니다. 같은 주황이 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()를 기본 지원합니다.

hex를 OKLCH로 어떻게 변환하나요?

맨 위 색 입력란에 #ff8000 같은 값을 입력하거나 붙여 넣으세요. 페이지의 모든 색공간이 그 색을 한꺼번에 보여 줍니다. OKLCH에서는 0.732, 0.186, 53이고, CSS 표기는 oklch(0.732 0.186 53)입니다. 각 상세 정보의 css 탭에서 복사할 수 있는 형태를 볼 수 있고, 코드로는 space.rgb.oklch(255, 128, 0)입니다.

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

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

S-Log3 등 카메라 로그를 Rec. 709로 어떻게 변환하나요?

카메라의 로그 색공간을 여세요. 예를 들면 S-Log3, LogC4, Apple Log입니다. 그 변환 LUT 블록에서 Rec. 709와 사용하는 편집기를 고르세요. DaVinci Resolve, Premiere Pro, Final Cut Pro, OBS, ffmpeg 등이 있습니다. .cube 파일은 브라우저가 만들어 줍니다. 톤 매핑 없는 기술적 변환이므로 확산 백색보다 밝은 하이라이트는 잘리고, 룩은 직접 더해야 합니다.

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

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

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

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

사진은 어떤 색공간으로 내보내야 하나요?

웹용이나 공유용이라면 sRGB입니다. 파일에 프로파일이 없으면 브라우저와 휴대폰은 sRGB로 간주합니다. Display P3는 프로파일이 포함된 채로 있는 한 Apple 기기와 여러 Android 기기의 화면에서 선명한 장면을 더 많이 살립니다. 인화소에서 요청하면 Adobe RGB로 보내세요. ProPhoto RGB는 16비트 편집용으로 남겨 두세요. 색역이 워낙 넓어서 8비트 파일에서는 밴딩이 생깁니다.

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

변환은 룩업 근사가 아니라 닫힌 형태의 공식이며, 왕복 변환은 부동소수점 오차 범위 안으로 돌아옵니다. 몇 가지 예외는 해당 위치에 문서화되어 있습니다. 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로 제공합니다.

색각 이상이 있는 사람에게는 색이 어떻게 보이나요?

보기를 열고 색각에서 1형(빨강), 2형(초록), 3형(파랑) 중 하나를 고르세요. 카탈로그가 그 눈에 보이는 대로 다시 그려지므로, 팔레트의 색들이 서로 구별되는지 확인할 수 있습니다. NEI 집계에 따르면 남성 약 12명 중 1명이 색각 이상입니다.

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

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