CSS oklch() 색상에 대체 색상과 @supports를 함께 두는 방법

문제와 사용 상황

oklch()는 밝기(L), chroma(C), 색상 각도(H)를 나누어 CSS 색상을 표현합니다. 다만 지원하지 않는 브라우저에서 최신 선언만 남기면 배경색이나 글자색이 사라질 수 있습니다. 기존 색상을 먼저 선언한 뒤 @supports 안에서 OKLCH 값을 덮어쓰면 지원 여부에 따라 안전하게 점진적으로 향상할 수 있습니다.

1. 기존 색상 표기를 일반 선언으로 둡니다.
2. @supports (background-color: oklch(...))가 참일 때만 최신 값을 적용합니다.
3. 브라우저 이름이 아니라 기능 지원 여부를 검사합니다.

테스트 환경·버전·날짜

2026-08-05 KST에 Node.js v24.14.0 정적 검사와 Node.js 내장 HTTP 서버를 사용했습니다. 실제 브라우저 검사는 Google Chrome 151.0.0.0에서 수행했습니다.

최소 재현 코드

<div class="card">지원 브라우저에서는 OKLCH 색상</div>
<div class="unsupported">지원하지 않는 조건은 대체 색상</div>

<style>
.card {
  color: #0f172a;
  background-color: #e2e8f0;
  padding: 1rem;
}

@supports (background-color: oklch(70% 0.15 240)) {
  .card { background-color: oklch(70% 0.15 240); }
}

.unsupported {
  color: #111827;
  background-color: #fef3c7;
}

@supports (background-color: made-up-color(1 2 3)) {
  .unsupported { background-color: made-up-color(1 2 3); }
}
</style>

일반 선언이 먼저 나오므로 조건을 이해하지 못하는 브라우저는 기존 색상을 사용합니다. 존재하지 않는 색상 함수를 넣은 두 번째 조건은 거짓이므로 대체 색상이 유지됩니다.

const supported = CSS.supports(
  "background-color",
  "oklch(70% 0.15 240)"
);
const invalid = CSS.supports(
  "background-color",
  "made-up-color(1 2 3)"
);
console.log({ supported, invalid });

테스트 케이스와 결과

확인	실제 출력	결과
OKLCH 지원	true	통과
잘못된 색상 함수	false	통과
지원 브라우저 계산 색상	oklch(0.7 0.15 240)	통과
대체 색상 유지	rgb(254, 243, 199)	통과

계산된 스타일의 직렬화 표기와 공백은 브라우저마다 달라질 수 있어 특정 문자열 전체보다 기능 지원과 실제 대비를 확인해야 합니다.

최종 코드

:root {
  --surface-card: #e2e8f0;
  --text-card: #0f172a;
}

.card {
  color: var(--text-card);
  background-color: var(--surface-card);
  border: 1px solid #334155;
}

@supports (background-color: oklch(70% 0.15 240)) {
  :root { --surface-card: oklch(70% 0.15 240); }
}

실패 조건·브라우저·버전 차이

• 대체 선언을 조건 뒤에 두면 미지원 브라우저에서 색상이 사라질 수 있습니다.
• 색 영역 밖의 값은 브라우저가 조정해 표시할 수 있습니다.
• 계산 색상의 문자열 형태는 브라우저마다 다를 수 있습니다.
• Chrome 151에서만 실제 실행했으므로 Firefox, Safari, 오래된 WebView 결과는 별도 확인이 필요합니다.

보안·호환성 주의사항

사용자 입력을 그대로 스타일시트에 이어 붙이지 말고 색상 토큰을 허용 목록과 형식 검사로 제한하세요. oklch() 사용 여부와 별개로 텍스트 대비, 투명도 합성 결과, 고대비 설정을 확인해야 합니다. 사용자 에이전트 문자열 대신 feature query를 사용하세요.

직접 확인 방법

1. 페이지를 로컬 HTTP 서버로 제공합니다.
2. 콘솔에서 CSS.supports("background-color", "oklch(70% 0.15 240)")를 실행합니다.
3. getComputedStyle(document.querySelector(".card")).backgroundColor를 확인합니다.
4. 잘못된 함수의 CSS.supports()가 false인지 확인합니다.
5. 각 브라우저에서 같은 절차를 반복하고 실행한 브라우저만 PASS로 기록합니다.

공식 참고자료

• MDN oklch()
• MDN @supports
• W3C CSS Color Module Level 4

변경 이력

2026-08-05: 대체 색상과 @supports를 함께 쓰는 최소 예제, 정적 검사, Chrome 실제 브라우저 결과를 추가했습니다.