HEX OKLCH 변환기

HEX OKLCH 변환기란 무엇인가요?

// sRGB hex → OKLCH per W3C CSS Color 4 + Ottosson 2020
// References: https://www.w3.org/TR/css-color-4/#color-conversion-code
//             https://bottosson.github.io/posts/oklab/
// Worked example: #3b82f6 (Tailwind blue-500) → oklch(0.629 0.193 263.4)
function hexToOklch(hex) {
  const h = hex.trim().replace(/^#/, '');
  const srgb = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
  // sRGB → linear-sRGB (CSS Color 4 §11.2 piecewise gamma)
  const lin = srgb.map(v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
  const [lr, lg, lb] = lin;
  // linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
  const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
  const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
  const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;
  // XYZ D65 → LMS (Ottosson 2020), cube-root, → OKLAB
  const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
  const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
  const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
  const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
  const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
  const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
  // OKLAB → OKLCH (Cartesian to polar)
  const C = Math.sqrt(a * a + b * b);
  const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
}
console.log(hexToOklch('#3b82f6')); // → oklch(0.629 0.193 263.4)

주요 기능

HEX OKLCH 변환기 대안 비교

HEX OKLCH 변환 예시

#3b82f6

#FF5733

#FF1744

#0f172a

#3b82f6

자주 쓰이는 HEX → OKLCH 변환 (Tailwind v4)

10개의 인기 Tailwind v4 기본 팔레트 중간 셰이드와 그 HEX 및 OKLCH 등가물의 레퍼런스 표입니다. 값은 Tailwind v4의 공개 팔레트 정밀도(L과 C 셋째 자리, H는 정수 또는 첫째 자리 소수)와 일치합니다.

HEX OKLCH 변환기 사용 방법

1. 1

   HEX 입력란에 HEX 코드 붙여넣기

   어떤 HEX 값이든 HEX 입력란에 떨어뜨리십시오. 앞의 `#` 포함 여부, 3자리 축약 (`#F73`), 6자리 완전형 (`#3b82f6`), 4자리 알파 축약 (`#F738`), 또는 8자리 알파 완전형 (`#FF573380`) 모두 가능합니다. 파서는 다섯 가지 입력 형태를 OKLCH 도출 전에 모두 동일한 내부 색상으로 정규화합니다. 대소문자는 무관합니다 (`#3b82f6`과 `#3B82F6`은 동일하게 파싱됩니다). 잘못된 문자나 자릿수는 조용한 인라인 오류를 만들어 내고, 유효한 HEX는 OKLCH를 포함한 다른 모든 형식 입력란을 실시간으로 업데이트합니다.

2. 2

   OKLCH 입력란에서 OKLCH 트리플 읽기

   OKLCH 입력란은 CSS Color 4의 최신 형식으로 값을 노출합니다. 불투명 색상에는 `oklch(0.629 0.193 263.4)`, 알파가 포함된 색상에는 `oklch(0.629 0.193 263.4 / 0.5)`. L은 소수점 셋째 자리까지 반올림되며(Tailwind v4 공개 정밀도와 일치), C는 셋째 자리까지, H는 1도 소수점 한 자리까지입니다. 본 도구의 내부 OKLCH 단일 사실 출처는 그 아래의 부동소수점 정밀도가 다른 모든 입력란에 걸쳐 보존된다는 뜻입니다. HEX로 되돌리는 왕복이 비트 안정적으로 유지되며, 왕복마다 1-2도씩 드리프트하는 레거시 HSL 피벗 변환기와 다릅니다.

3. 3

   복사를 클릭해 OKLCH 문자열 가져오기

   각 형식 카드의 오른쪽에는 복사 버튼이 있습니다. 한 번 클릭하면 값이 클립보드로 들어가고, 버튼 레이블이 잠시 "복사되었습니다!"로 바뀌어 알려 줍니다. 복사된 문자열은 정규 CSS Color 4 구문(`oklch(0.629 0.193 263.4)`)이며, Tailwind v4 `@theme` 블록이나 shadcn/ui CSS 변수 정의에 그대로 떨어뜨릴 수 있습니다. 플랫폼별 출력(CSS 사용자 정의 속성, Tailwind v4 토큰, SwiftUI, Compose, Flutter)은 피커 아래의 코드로 복사 섹션을 사용하십시오. 해당 스니펫은 각 플랫폼이 네이티브로 기대하는 형식을 내보냅니다.

4. 4

   Display P3 / Rec2020 색역 배지 확인

   세 색역 배지(sRGB, Display P3, Rec2020)는 현재 색상이 각 공간의 재현 가능 범위 안에 들어가는지를 보여 줍니다. sRGB 배지가 빨갛게 켜지지만 P3가 초록이라면, 그 색상은 Apple 하드웨어(2017년 이후의 iPhone, iPad, MacBook)에서는 채도를 살려 렌더링되지만 레거시 24비트 모니터에서는 채도가 떨어지는 광색역 OKLCH입니다. **Snap to sRGB** 버튼은 이진 채도 축소(CSS Color 4 §13 정보 알고리즘)를 사용해 L과 H를 보존한 채 색상을 sRGB로 줄여 줍니다. `@supports not (color: oklch(0 0 0))`를 통해 배포할 수 있는 HEX 폴백이 만들어집니다.

5. 5

   함께 표시되는 형식: RGB, HSL, OKLAB, HSV, HWB, CMYK, 이름 있는 색상

   붙여넣은 동일한 HEX가 다른 여덟 형식 입력란도 함께 채웁니다. canvas 호출과 하드웨어용 RGB, 레거시 CSS 변수용 HSL, 팔레트 수학과 색각 이상 행렬용 OKLAB, 디자이너 색상 피커 작업 흐름용 HSV와 HWB, 인쇄 견적용 CMYK, 그리고 문서 산문용 가장 가까운 CSS 이름 있는 색상까지. HEX → OKLCH 한 방향에 묶이지 않습니다. 피커(SL 정사각형 + 색조 슬라이더 + 알파 슬라이더)가 아홉 개를 동시에 구동하며, Chromium 브라우저에서는 EyeDropper 버튼이 브라우저 바깥을 포함한 화면 어디든 픽셀을 샘플링합니다.

자주 발생하는 HEX / OKLCH 실수

OKLCH C = 0.3을 "30% 채도"로 기대하며 설정:
oklch(0.7 0.3 250) → 파랑에 대해서는 sRGB 색역을 벗어날 수 있음
광색역 색상이 레거시 디스플레이에서 채도가 떨어져 렌더링됨.

C를 절대 채도로 다루고 색역 배지 확인:
oklch(0.7 0.15 250) → 이 L+H 쌍에서 sRGB에 편안하게 들어맞음
배지를 사용해 타깃 색역에 들어맞는 최대 C를 찾으십시오.

HSL L 백분율을 OKLCH에 직접 복사:
hsl(220 50% 30%)을 oklch(0.30 0.10 220)으로 이식
두 색상이 밝기에서 눈에 띄게 다르게 보임.

HSL을 이식하지 말고 원본 HEX에서 OKLCH 재도출:
HEX 원본 → OKLCH 변환 → oklch(0.34 0.08 254)
지각 L이 정확하게 유지되고 팔레트가 균일하게 느껴짐.

sRGB 색역을 확인하지 않고 oklch(0.7 0.4 30) 배포:
P3 디스플레이는 채도가 살아 있는 빨강으로 렌더링하고, sRGB 디스플레이는 채도가 떨어진 채로 렌더링
사용자 하드웨어에 따라 브랜드 색상이 일관되지 않게 보임.

sRGB 색역 배지 확인, 필요하면 Snap to sRGB, @supports로 계층화:
@supports (color: oklch(0 0 0)) { --primary: oklch(0.7 0.4 30); }
@supports not (color: oklch(0 0 0)) { --primary: #ef6b50; }
P3 하드웨어는 광색역 값을 받고, sRGB 하드웨어는 스냅된 폴백을 받음.

브랜드 색상을 OKLCH로만 정의:
:root { --primary: oklch(0.629 0.193 263.4); }
IE 11과 구형 iOS Safari가 색상을 전혀 렌더링하지 않음.

우아한 폴백을 위해 @supports로 계층화:
:root { --primary: #3b82f6; }
@supports (color: oklch(0 0 0)) { :root { --primary: oklch(0.629 0.193 263.4); } }
최신 브라우저는 OKLCH를, 레거시 브라우저는 HEX 폴백을 받음.

동일한 결과를 기대하며 lch()를 oklch()로 대체:
lch(60% 50 240) ≠ oklch(0.6 0.15 240) — 전혀 다른 색상
공간 사이에 복사·붙여넣기를 하면 값이 조용히 잘못됨.

한 공간을 선택하고 그 안에 머무르십시오:
최신 디자인 시스템에는 oklch(0.629 0.193 263.4)
또는 lch(60% 50 240) — 단, 재변환 없이 함수 이름을 바꾸지 말 것

누가 HEX OKLCH를 사용하나요

Tailwind v4 OKLCH 토큰으로 이주하는 프런트엔드 개발자

Tailwind v4는 2025년 1월 기본 팔레트의 정규 형식으로 OKLCH를 표준화했습니다. HEX 기반 브랜드 색상을 가진 v3 코드베이스를 이주한다는 것은 각 HEX를 OKLCH로 변환해 새 `@theme` 블록에 떨어뜨리는 일을 뜻합니다. 여기에 각 HEX를 붙여넣고, `oklch()` 값을 복사하고, `--color-primary: oklch(0.629 0.193 263.4)` 등을 정의하십시오. 실시간 색역 배지가 sRGB를 벗어나는 색상을 표시해 주므로, Display P3 사용자를 위해 광색역 값을 유지할지 sRGB로 스냅할지 결정할 수 있습니다.

사용자 정의 팔레트를 구축하는 shadcn/ui 테마 작성자

shadcn/ui의 CSS 변수 테마는 모든 토큰(`--background`, `--foreground`, `--primary` 등)에 OKLCH를 사용합니다. 사용자 정의 테마는 기본 브랜드 HEX를 OKLCH로 변환한 뒤 라이트/다크 변형용으로 L을 회전시켜 도출합니다. 브랜드 HEX를 붙여넣고, OKLCH 트리플을 읽고, C와 H를 고정한 채 L을 단계적으로 움직여 나머지 테마를 구축하십시오. 정규 shadcn 작업 흐름과 정확히 일치합니다.

지각적으로 균일한 램프를 생성하는 디자인 시스템 작성자

C와 H를 고정한 채 L 채널을 동일한 OKLCH 증분으로 움직여 50/100/200/.../900 램프를 생성하십시오. 인접한 단계 사이의 시각적 간격이 모든 색조에 걸쳐 동일해 보이며, 이는 브랜드 색상 팔레트가 실제로 필요로 하는 속성입니다. Tailwind v4는 기본 팔레트에 정확히 이 구성을 사용하며, shadcn/ui도 이를 반영합니다. 각 브랜드 HEX를 붙여넣고, OKLCH를 읽고, 알고리즘적으로 또는 피커 아래의 틴트/셰이드/톤 패널을 통해 램프를 생성하십시오.

OKLCH 공간에서 명암비를 검증하는 접근성 엔지니어

WCAG 2.1과 APCA 명암비 모두 OKLCH 트리플이 아닌 해석된 sRGB 색상에 대해 보고하지만, 브랜드 색상의 OKLCH L을 아는 것은 명암비 튜닝을 예측 가능하게 만들어 줍니다. L을 0.1 올려 흰색 대비 AA를 통과시키고, L을 0.1 낮춰 검은색 대비 AA를 통과시키는 식입니다. OKLCH + WCAG + APCA 동시 뷰가 그 관계를 보이게 만들어 줍니다. 브랜드 HEX를 붙여넣고, 명암비 배지를 지켜보고, OKLCH에서 L을 조정해(HSL보다 더 예측 가능합니다) 쌍이 두 지표 모두를 통과할 때까지 진행하십시오.

최신 디스플레이용 광색역 색상 토큰을 구축하는 웹 개발자

2017년 이후 대부분의 Apple 기기(그리고 많은 최신 Android 기기)는 Display P3를 네이티브로 렌더링합니다. OKLCH로 브랜드 강조 색상을 정의하면 어떤 HEX 코드로도 인코딩할 수 없는 P3 전용 채도가 높은 빨강과 초록을 가리킬 수 있습니다. 기존 HEX를 붙여넣어 OKLCH를 읽고, sRGB 천장 위로 C 채널을 밀어 올려 추가 P3 채도를 청구하십시오. 색역 배지가 새 값이 P3에 들어맞음을 확인해 줍니다(그리고 브라우저 채도 압축을 통해 sRGB 전용 화면에서 우아하게 폴백됩니다).

지각 명도와 기하학적 명도를 가르치는 교육자

OKLCH + HSL 동시 뷰는 지각 명도와 기하학적 명도의 차이를 명확하게 만듭니다. 동일한 HSL L=50%에서 채도가 높은 초록과 채도가 높은 파랑을 붙여넣으십시오. OKLCH L 값이 눈에 띄게 다르며, OKLCH가 실제 지각 밝기를 측정하기 때문입니다. HSL 색조 슬라이더를 드래그하고 HSL L을 고정한 채 OKLCH L이 흔들리는 것을 지켜보십시오. 그 곡선이 시각화된 감마 특이성입니다. 디자인 시스템이 왜 OKLCH로 이주했는지에 대한 교실 준비 시연입니다.

토큰 문서를 현대화하는 오픈 소스 유지보수자

구형 디자인 시스템 문서는 보통 브랜드 색상을 HEX 코드로만 나열합니다. OKLCH로 현대화한다는 것은 동일한 색상을 두 공간 모두에 보여 준다는 뜻입니다. 코드 블록 호환성을 위한 HEX, 명세 표와 최신 토큰 정의를 위한 OKLCH. 각 HEX를 붙여넣고, OKLCH 출력을 복사하고, 문서를 업데이트하십시오. 공유 가능한 URL 해시는 또한 기여자가 GitHub 이슈에서 논의 중인 정확한 색상을 모호함 없이 연결할 수 있게 해 줍니다.

HEX OKLCH 수학과 파이프라인

HEX → OKLCH는 7단계 파이프라인

변환은 다섯 개의 중간 표현을 거칩니다. HEX → 정수 sRGB → 정규화 sRGB(0-1) → 선형 sRGB(감마 디코딩) → CIE XYZ D65 → OKLAB → OKLCH. 각 단계는 1차 출처에서 정의된 행렬 또는 조각별 함수입니다. 본 도구는 키 입력마다 전체 파이프라인을 실행합니다. 디바운싱이 필요 없을 만큼(마이크로초 단위) 수학이 충분히 빠릅니다. OKLCH와 함께 중간 RGB 튜플을 노출한다는 것은 RGB 채널을 검사해 예상치 못한 OKLCH 값을 디버깅할 수 있다는 뜻입니다.

CSS Color 4 §11.2 감마 함수

sRGB → 선형 sRGB 변환은 CSS Color 4 §11.2 조각별 함수를 사용합니다: `v ≤ 0.04045 ? v/12.92 : ((v + 0.055) / 1.055)^2.4`. 조각별 형태(0 근처의 작은 선형 구간 포함)는 매우 어두운 색상에서 순수 지수 형태의 수치 불안정성을 피해 줍니다. ICC 프로필이 sRGB를 인코딩할 때 사용하는 동일한 함수이며, HEX 코드를 렌더링할 때 브라우저가 내부적으로 사용하는 동일한 함수입니다. OKLCH → HEX의 역변환은 동일한 함수를 거꾸로 적용합니다: `v ≤ 0.0031308 ? v * 12.92 : 1.055 * v^(1/2.4) - 0.055`.

CSS Color 4 §15.1 행렬: 선형 sRGB ↔ XYZ D65

CSS Color 4 §15.1의 행렬은 선형 sRGB를 D65 백점 하의 CIE XYZ로 변환합니다: `X = 0.4124564 R + 0.3575761 G + 0.1804375 B`, `Y = 0.2126729 R + 0.7151522 G + 0.0721750 B`, `Z = 0.0193339 R + 0.1191920 G + 0.9503041 B`. Y 행이 sRGB 휘도 공식을 제공합니다. 이 행렬은 ICC, Adobe Color Engine, 그리고 LCMS 오픈 소스 파이프라인을 포함한 모든 색상 관리 라이브러리가 사용하는 동일한 행렬입니다. OKLCH → HEX용 역행렬은 §15.1 역행렬을 적용합니다.

Ottosson 2020 OKLAB 행렬과 세제곱근 단계

XYZ D65 → OKLAB 변환은 Björn Ottosson의 2020년 OKLAB 논문에 공개된 두 행렬과 세제곱근 단계를 사용합니다. 첫 번째 행렬은 XYZ를 LMS 원추 응답 공간(사람의 L/M/S 원추 감도를 느슨하게 모델링)으로 변환합니다. 각 채널의 세제곱근을 취해 동적 범위를 비선형적으로 압축합니다(지각 균일성을 보정하는 단계). 두 번째 행렬은 세제곱근을 취한 LMS를 OKLAB의 L/a/b 좌표로 변환합니다. 세 연산 모두 논문의 레퍼런스 구현에 공개된 정확한 값을 사용합니다. 재도출이나 반올림이 없습니다. OKLCH → HEX의 역변환은 이 행렬들을 거꾸로 적용합니다.

OKLAB ↔ OKLCH는 직교 → 극좌표 변환

OKLAB의 `a`와 `b` 축은 L 축에 수직인 채도(chroma, OKLCH C 채널) 평면을 이룹니다. OKLCH는 그 평면을 극좌표로 인코딩합니다: `C = sqrt(a² + b²)`(회색으로부터의 유클리드 거리), `H = atan2(b, a) * 180 / π`(0-360°로 감긴 각도). 역변환: `a = C * cos(H * π / 180)`, `b = C * sin(H * π / 180)`. 극형식이 디자인 토큰 저장에 OKLAB보다 선호되는 이유는 색조가 안정적인 축이기 때문입니다. 색조를 회전해도 OKLAB에서 `a`나 `b`를 회전할 때처럼 실수로 회색을 통과해 크로스페이드되는 일이 없습니다.

채널 범위 검사를 통한 색역 감지

한 색상은 그 공간의 원색으로 변환된 후 모든 채널이 `[-ε, 1 + ε]` 안에 들어갈 때 타깃 공간(sRGB, Display P3, Rec2020)에 대해 색역 내로 간주됩니다. 여기서 `ε = 1e-7`은 경계 부근의 부동소수점 정밀도 잡음을 흡수합니다. 어떤 채널이든 범위를 벗어나면 각 공간의 색역 배지가 빨갛게 변합니다. OKLCH는 색역에 한계가 없습니다. `oklch(0.7 0.4 30)`은 유효한 좌표이지만 sRGB의 채널당 256 바이트 공간을 초과할 수 있습니다. 검사는 키 입력마다 실행됩니다. Snap to sRGB와 결합되어, 가장 흔한 도입 함정(레거시 화면에서 올바르게 표시되지 않는 광색역 OKLCH)을 잡아 줍니다.

Snap to sRGB 이진 채도 축소

Snap to sRGB는 CSS Color 4 §13의 정보 색역 매핑 알고리즘과 일치합니다. L과 H를 현재 값에 고정한 채, C ∈ [0, currentC]에서 sRGB 변환이 색역 안에 머무는 가장 큰 C를 이진 탐색합니다. 탐색은 최대 30회 반복(정밀도 약 10⁻⁹)으로 실행되며, 시각적 정확성을 위해서는 충분히 많습니다. L과 H 보존은 스냅된 색상이 동일한 색조 가족, 동일한 밝기로 읽힌다는 뜻입니다. 채도만 잃을 뿐입니다. RGB 채널을 직접 클립하지 않는 이유는 그것이 색조를 눈에 띄게 왜곡하기 때문입니다(특히 파랑이 보라 쪽으로 클립됩니다).

HEX / OKLCH 작업 모범 사례

새 코드에서 정규 토큰 형식으로 OKLCH 사용

2025년 이후 출시되는 디자인 시스템에서는 브랜드 색상과 팔레트 램프를 OKLCH로 정의하십시오. L 축이 자동으로 지각적으로 균일한 램프를 만들어 주며, Chroma 축은 HEX가 인코딩할 수 없는 광색역 색상을 가리킬 수 있습니다. 구형 브라우저용으로 `@supports not (color: oklch(0 0 0))`나 빌드 타임 PostCSS를 통해 HEX 폴백을 유지하되, 토큰 저장소에서는 OKLCH를 단일 사실 출처로 만드십시오. Tailwind v4와 shadcn/ui 모두 이 방식으로 출시되며, 새 프로젝트도 마찰 없이 이를 따를 수 있습니다.

C와 H를 고정한 채 L을 움직여 램프 생성

정규 OKLCH 램프 구성: C와 H를 잠그고 L을 동일한 증분으로 휩쓰십시오. L = 0.1, 0.2, …, 0.9에 대한 9단계 램프 `oklch(L 0.15 263)`은 모든 단계에 걸쳐 시각적으로 균일한 간격을 만들어 냅니다. Tailwind v4가 내부적으로 정확히 이렇게 합니다. 램프의 채도 강도를 의도적으로 변화시키고 싶지 않다면(드뭅니다) L과 함께 C를 휩쓸지 마십시오. 5°의 드리프트만 있어도 램프가 뒤죽박죽으로 느껴지므로 단계 사이에서 H를 흘리지 마십시오.

Tailwind v4 정밀도 일치: L+C 셋째 자리, H 첫째 자리

Tailwind v4의 기본 팔레트는 L과 C에 소수점 셋째 자리, H에 소수점 첫째 자리로 OKLCH 값을 공개합니다 — blue-500에 대해 `oklch(0.629 0.193 263.4)`. 자신의 토큰에서 이 정밀도와 일치시킨다는 것은 설정 붙여넣기 작업 흐름이 Tailwind가 배포하는 값과 동일한 값을 만들어 낸다는 뜻이며, diff 도구가 거짓 차이를 표시하지 않는다는 뜻입니다. 본 도구의 기본 반올림은 이 관례를 따릅니다. `@theme` 블록에 복사·붙여넣기 하면 비트 단위로 정확합니다.

광색역 OKLCH를 Display P3 색역 검사로 실행

최신 Apple 하드웨어(2017년 이후의 iPhone, iPad, MacBook)를 타기팅하거나 HDR 인식 콘텐츠를 배포한다면, 색역 배지는 sRGB 천장 위로 C를 밀어 추가 P3 채도를 청구할 수 있게 해 줍니다. 브라우저가 적용하는 채도 압축이 sRGB 전용 화면에서 색상이 클립되지 않게 막아 줍니다. 청중 전체가 레거시 디스플레이에 있다는 것을 알지 못한다면 기본적으로 미리 sRGB로 스냅하지 마십시오. 그것은 P3 하드웨어가 렌더링할 수 있는 채도의 30% 이상을 잃는 일입니다.

2023년 이전 브라우저용으로 @supports를 통해 HEX 폴백 제공

`oklch()`의 에버그린 브라우저 지원이 이제 94% 이상이지만, 긴 꼬리(IE 11, 구형 Android Chrome, 임베디드 웹뷰)는 여전히 폴백을 필요로 합니다. 토큰을 `@supports (color: oklch(0 0 0))`로 감싸고 대안 브랜치에 HEX 변형을 제공하십시오. Snap to sRGB 출력이 정확히 그 폴백이며, L과 H를 보존한 채 현재 OKLCH 트리플로부터 자동으로 생성됩니다. `postcss-oklab-function` 같은 빌드 타임 PostCSS 플러그인도 컴파일 시점에 sRGB 근사를 인라인으로 끼워 넣을 수 있습니다.

토큰에 OKLCH와 원본 HEX 모두 문서화

`--color-primary: oklch(0.629 0.193 263.4)` 같은 CSS 변수를 배포할 때, 원본 HEX와 함께 주석을 포함하십시오: `/* source: #3b82f6 (Tailwind blue-500) */`. 6개월 후 누군가 관련 셰이드를 도출하거나 브랜드 가이드라인 PDF에 대해 값을 확인해야 할 때, 원본 HEX가 완전한 출처 추적을 보존해 줍니다. OKLCH 단독으로도 의미가 있지만 눈으로 알아보기가 더 어렵습니다. 원본 HEX가 대부분의 동료가 가장 먼저 찾는 식별자입니다.

실시간 색상 결정 공유에 URL 해시 사용

모든 색상 변경은 URL 해시를 `#hex=3b82f6` 또는 `#oklch=...` 형태로 자동 업데이트합니다. URL을 Slack 스레드나 GitHub 이슈에 복사하면, 그것을 여는 모든 사람이 동일한 OKLCH 트리플의 동일한 색상에 도달합니다. 채팅에 OKLCH 문자열을 붙여넣는 것보다 더 안정적이며(수신자가 가끔 소수점을 잘못 입력하거나 잘못된 정밀도로 감쌉니다), 디자인 리뷰 스레드가 "화요일에 논의한 그 브랜드 파랑"이 아니라 정확한 색상을 참조할 수 있게 해 줍니다. 해시는 서버로 전송되지 않습니다.

자주 묻는 질문