CSS color-mix() 미리보기 (보간 공간 비교)

사용법

1. 색상 피커나 hex로 색 A와 색 B를 정합니다.
2. 퍼센티지 슬라이더를 드래그 — 슬라이더 값이 A의 비율 (30% 이면 A 30% + B 70%).
3. 8개 카드를 비교: 스와치는 현재 비율의 결과, 스트립은 해당 공간의 A→B 전체 그라데이션.
4. 복사 아이콘으로 `background: color-mix(in <space>, ...);` 선언을 가져갑니다.
5. 프리셋을 시도 — 빨강↔파랑, 노랑↔파랑은 'srgb는 왜 칙칙해 보이는가' 의 대표 예시.

자주 묻는 질문

왜 공간마다 결과가 완전히 다른가요?

`color-mix()` 가 하는 선형 보간은 선택한 좌표계의 직선이에요. sRGB 큐브는 대각선이 회색이라 그 직선이 칙칙한 중간값을 통과합니다. OKLCH 에서는 같은 직선이 인지 밝기를 유지하면서 색상만 회전해 선명함을 유지합니다. HSL은 색상환의 짧은 길로 가서 A와 B 사이에 없는 색까지 휩쓸기도 합니다. 어느 것도 틀린 게 아니라, 기하 구조가 다른 거예요.

어떤 공간을 써야 하나요?

대부분의 UI 작업에는 `oklch` 나 `oklab` 이 인지적으로 가장 좋습니다 — 밝기가 균일하게 유지되고, 섞어도 선명하고, 칙칙한 중간점이 없어요. `srgb-linear` 는 물리적 빛 합성 (사진 합성)에 정확합니다. `srgb` 는 구식 도구와 2023 이전 CSS의 결과와 같습니다. `hsl` 은 A와 B가 채도·명도를 공유할 때만 색상 기반 팔레트에 적합합니다. 선명한 색쌍에 그냥 `srgb` 는 피하세요 — 일부러 차분한 톤을 원할 때만.

표시된 hex는 정확한가요?

브라우저가 계산한 그대로입니다. 색 표현식을 캔버스 `fillStyle` 로 설정하고 1×1 픽셀을 그린 뒤 `getImageData()` 로 실제 sRGB 바이트를 읽습니다. 그래서 표시되는 hex는 `getComputedStyle()` 이 같은 mix에 대해 반환할 값과 일치합니다 — 8비트 캔버스 양자화로 인한 채널당 ±1 오차 이내.

hue-shortest와 hue-longest는?

CSS는 hue 기반 공간 (hsl, hwb, lch, oklch)에 `longer hue` / `shorter hue` / `increasing hue` / `decreasing hue` 수식자를 지원합니다. 이 도구는 카드를 단순하게 유지하려고 기본값 (shorter hue)을 씁니다. 긴 경로가 필요하면 수식자를 직접 붙이세요: `color-mix(in oklch longer hue, A 50%, B)` — 같은 색, 환의 반대 방향.

브라우저 지원?

`color-mix()` 는 Chrome/Edge 111+ (2023.03), Safari 16.2+ (2022.12), Firefox 113+ (2023.05)부터. 2023년 이후의 모든 메이저 브라우저가 여기 나열된 모든 공간을 지원합니다. 미지원 배너가 보이면 그보다 오래된 브라우저예요 — CSS 자체는 파싱되지만 올바른 색을 만들지 못합니다.

관련 도구