색 공간 Cubehelix

색, 팔레트, 그러데이션, 이미지를 모든 색공간으로 표현해 보세요. 화면에서 인쇄까지, 색 선택에서 연구까지, 1860년부터 2026년까지.

사용법

JavaScript

라이브러리 전체: 색공간 221개, gzip으로 71 kB – 모든 색공간에서 다른 모든 색공간으로, 양방향으로.

npm install color-space

import space from 'color-space'

space.rgb.oklch(255, 128, 0)      // → [0.732, 0.186, 53]
space.oklch.rgb(0.65, 0.1, 180)   // → [56.14, 162.97, 145.41]
space.oklch.range                 // [[0,1], [0,0.4], [0,360]]

또는 색공간 하나만 – 번들에는 다른 것이 들어가지 않습니다.

import oklch from 'color-space/oklch.js'

oklch.rgb(0.65, 0.1, 180)   // → [56.14, 162.97, 145.41]

타입 지원: TypeScript 선언이 패키지에 포함되어 있습니다. 라이브러리 전체에도, 각 색 공간을 따로 가져올 때에도.

WebAssembly

이미지 전체와 긴 버퍼 처리용. 색공간 54개, gzip으로 53 kB, 측정한 26개 변환에서 JS 배치보다 1.4–4.8배 빠름.

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

모듈이 아무것도 가져오지 않으므로 WebAssembly가 실행되는 곳이면 어디서나 실행됩니다: 브라우저, Node, Deno, Bun – 그리고 wasmtime이나 wasmer를 통해 Python, Rust, Go에서도.

import struct
from wasmtime import Store, Module, Instance   # pip install wasmtime

store = Store()   # color-space.wasm: the npm package's dist/
cs = Instance(store, Module.from_file(store.engine, 'color-space.wasm'), []).exports(store)

at = cs['alloc'](store, 1.0) & 0xFFFFFFFF   # the buffer: n×3 float64 in the kernel's memory
cs['memory'].write(store, struct.pack('3d', 255, 128, 0), at)
cs['rgb_lrgb_n'](store, 1.0)                # in place, edge by edge: rgb → linear rgb → oklab
cs['lrgb_oklab_n'](store, 1.0)
struct.unpack('3d', cs['memory'].read(store, at, at + 24))   # (0.732, 0.112, 0.148)

jz로 컴파일

색공간 rgb, lrgb, xyz, xyz-d50, xyy, lms, p3, p3-linear, rec2020, rec2020-linear, a98rgb, a98rgb-linear, prophoto, prophoto-linear, rec709, hsl, hsv, hwb, oklab, oklrab, oklch, oklrch, lab, lchab, lab-d65, lch-d65, din99o-lab, din99o-lch, luv, lchuv, hsluv, hpluv, cam16, hct, ycbcr-bt709, ycbcr-bt2020, jzazbz, jzczhz, ictcp, ictcp-hlg, ipt, din99d, acescg, acescct, acescc, awg3, logc3, logc4, slog3, vlog, log3g10, clog2, ryb, munsell

셰이더

색공간 221개 모두를 셰이더 함수로. rgb로 변환하면 JavaScript처럼 0–255가 반환되므로, 프래그먼트 색으로 쓰려면 255로 나누세요.

WebGL과 OpenGL: GLSL.

import { glsl } from 'color-space/gl'
import oklch from 'color-space/gl/oklch'

const frag = `#version 300 es
precision highp float;
${glsl(oklch, 'rgb')}
out vec4 color;
void main() { color = vec4(oklch_rgb(vec3(0.7, 0.15, gl_FragCoord.x)) / 255.0, 1.0); }`

WebGPU: WGSL.

import { wgsl } from 'color-space/gl'

const code = wgsl(oklch, 'rgb') + `
@fragment fn main(@builtin(position) p: vec4f) -> @location(0) vec4f {
  return vec4f(oklch_rgb(vec3f(0.7, 0.15, p.x)) / 255.0, 1.0);
}`

DirectX, Unity, Unreal: HLSL. Metal: MSL. 둘 다 선택적 의존성인 naga가 WGSL에서 생성합니다.

import { hlsl } from 'color-space/gl/hlsl'   // npm i naga-wasm
import { msl } from 'color-space/gl/msl'

await hlsl('oklch', 'rgb')   // float3 oklch_rgb(float3)
await msl('oklch', 'rgb')    // metal::float3 oklch_rgb(metal::float3)

MCP 서버

AI 에이전트가 변환을 추측하는 대신 검증된 변환을 호출할 수 있습니다.

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"] } } }

기준값으로 검증모든 색공간 테스트 완료
양방향어떤 색공간이든 다른 색공간으로
초경량색공간 하나에 약 1 kB
퍼블릭 도메인CC0

색공간이란 무엇인가요?

색을 나타내는 좌표계이며, 축과 범위, 숫자를 측정 가능한 빛에 대응시키는 규칙으로 이루어집니다. 사람의 색각은 세 종류의 원추세포(S, M, L)에 기반한 삼색성이므로, 눈에 보이는 모든 색을 나타내려면 좌표가 최소 세 개 필요합니다. 동일한 주황색이 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에 존재하지 않습니다. 변환하면 숫자가 유효 범위를 벗어납니다. 아틀라스는 이를 그대로 보여 줍니다. 현재 색 옆의 ⚠ 표시는 그 색이 ‘한계’에서 고른 색역 밖에 있음을 뜻하고, 평면이나 채널 막대 위에서 Alt를 누르고 있으면 그 자리의 색에 어떤 더 넓은 색역(P3, Rec. 2020)이 필요한지 알려 주며, 범위를 벗어난 구간은 체크무늬 위에 흐리게 표시됩니다.

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

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

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

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

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

변환은 룩업 근사가 아니라 닫힌 형태의 공식이며, 왕복 변환 결과는 부동소수점 오차 범위 안에서 원래 값과 일치합니다. 몇 가지 예외는 해당 위치에 문서화되어 있습니다. OSA-UCS에는 닫힌 형태의 역변환이 없고, Munsell 같은 색표집 기반 체계는 발표된 등급 사이를 보간합니다. rgb 출력은 클램프하지 않습니다. sRGB 밖의 색은 0보다 작거나 255보다 큰 값으로 나오므로, 표시할 때만 클램프하세요.

검증도 거쳤습니다. 모든 색공간에는 구현 근거가 된 논문이나 규격의 링크가 있고, 값은 겹치는 범위에서 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으로 직접 정의)입니다. 수식이 한 번이라도 발표된 체계라면 이 카탈로그에 넣을 수 있습니다. 빠진 것을 제안해 주세요.

대안

색 변환 라이브러리 비교.

도구	색공간	카메라 로그	루마–크로마	sRGB	도구 모음	크기	속도	타깃
color-space	205	31	16	0–255	`parse` `mix` `ΔE` `contrast` `CVD`	62 kB		JS, WASM, GL, LUT, ICC, OCIO, MCP, Figma, VS Code, CLI, web
culori	30	–	1	0–1	`parse` `mix` `gamut` `ΔE` `contrast` `CVD`	23 kB		JS
colorjs.io	51	–	–	0–1	`parse` `mix` `gamut` `ΔE` `contrast`	34 kB		JS, web
chroma-js	11	–	–	0–255	`parse` `mix` `ΔE` `contrast` `palettes`	17 kB		JS
@texel/color	16	–	–	0–1	`parse` `gamut` `ΔE`	9 kB		JS
colour-science	128	24	6	0–1	`ΔE` `CVD`	–	–	Python, LUT
ColorAide	77	–	–	0–1	`parse` `mix` `gamut` `ΔE` `contrast` `CVD` `palettes`	–	–	Python
colorspace (R)	9	–	–	0–1	`mix` `contrast` `CVD` `palettes`	–	–	R, web
OpenColorIO	57	11	–	0–1	`gamut`	–	–	C++, Python, GL, LUT, ICC
Bruce Lindbloom	22	–	–	0–1, 0–255	`ΔE`	–	–	web
oklch.com	9	–	–	0–255	`parse` `gamut`	–	–	web