OKLCH란 무엇인가요?
OKLCH는 2020년 Björn Ottosson이 설계한 OKLAB 색 공간의 원통형 표현입니다. OK 명도, 채도, 색상을 나타내며 기존 RGB나 HSL 시스템에 비해 더 직관적인 색상 작업 방법을 제공합니다.
장치 지향적인 RGB나 지각적 결함이 있는 HSL과 달리 OKLCH는 인간 시각 원리를 기반으로 합니다. 동일한 수치 변화가 동일한 지각 변화를 생성하도록 보장합니다.
OKLCH 색상 선택기 & 변환기
OKLCH 이해하기: 웹 색상의 미래
웹 디자인을 혁신하는 지각적으로 균일한 색 공간에 대한 포괄적인 가이드
왜 RGB와 HSL 대신 OKLCH를 선택해야 하나요?
RGB의 한계
- • 장치 종속적인 값
- • 직관적이지 않은 색상 혼합
- • 변형 생성이 어려움
- • 접근성 계산에 부적합
HSL의 단점
- • 거짓 지각적 균일성
- • 색상에 따라 명도가 변함
- • 채도가 예측 불가능하게 동작
- • sRGB 색역에 제한됨
OKLCH의 장점
- • 진정한 지각적 균일성
- • 색상 간 일관된 명도
- • 예측 가능한 색상 관계
- • 넓은 색역 지원(P3, Rec2020)
지각적 균일성의 힘
지각적 균일성은 시작 색상에 관계없이 동일한 수치 양의 변화가 유사한 지각 변화를 생성한다는 것을 의미합니다. 이는 다음에 중요합니다:
디자인 일관성
호버 상태, 비활성 상태 및 테마 변형에 필수적인 동일한 지각 밝기를 유지하는 색상 변형을 만듭니다.
접근성
실제 지각 명도 값으로 작업하여 대비 비율을 정확하게 예측하고 WCAG 준수를 보장합니다.
sRGB를 넘어서: 넓은 색역 색상
현대 디스플레이는 기존 sRGB를 훨씬 넘어서는 색역을 지원합니다. OKLCH는 이러한 확장된 색 공간을 원활하게 처리합니다:
sRGB
모든 디스플레이에서 지원되는 표준 색역
P3
25% 더 많은 색상, Apple 기기에서 일반적
Rec2020
HDR 디스플레이를 위한 미래 보장 색역
OKLCH를 사용하면 현대 디스플레이를 최대한 활용하는 색상을 지정하면서 표준 화면용 자동 대체를 제공할 수 있습니다.
실전에서의 OKLCH
색상 팔레트 만들기
/* 기본 색상 */
--primary: oklch(0.6 0.2 250);
/* 밝은 변형 - L만 증가 */
--primary-light: oklch(0.8 0.2 250);
/* 어두운 변형 - L만 감소 */
--primary-dark: oklch(0.4 0.2 250);
/* 보색 - 색상에 180 추가 */
--secondary: oklch(0.6 0.2 70);접근성 우선 디자인
/* WCAG AA 대비 보장 */
--text-on-light: oklch(0.3 0 0); /* L=0.3 어두운 텍스트용 */
--text-on-dark: oklch(0.9 0 0); /* L=0.9 밝은 텍스트용 */
/* 일관된 지각 밝기 */
--success: oklch(0.7 0.15 140); /* 녹색 */
--warning: oklch(0.7 0.15 90); /* 노란색 */
--error: oklch(0.7 0.15 30); /* 빨간색 */브라우저 지원 및 마이그레이션
현재 지원
OKLCH는 모든 최신 브라우저에서 지원됩니다:
- • Chrome 111+ (2023년 3월)
- • Firefox 113+ (2023년 5월)
- • Safari 15.4+ (2022년 3월)
- • Edge 111+ (2023년 3월)
마이그레이션 전략
/* 구형 브라우저용 대체 제공 */
.element {
/* 구형 브라우저용 대체 */
background-color: rgb(0, 128, 255);
/* 최신 브라우저는 이것을 사용 */
background-color: oklch(0.65 0.2 240);
}
/* 또는 @supports 사용 */
@supports (color: oklch(0 0 0)) {
.element {
color: oklch(0.7 0.15 180);
}
}미래는 지각적으로 균일합니다
OKLCH는 웹에서 색상에 대해 생각하는 방식의 패러다임 전환을 나타냅니다. 장치 기능이 아닌 인간의 지각과 일치함으로써 다음을 가능하게 합니다:
- ✓ 더 직관적인 색상 선택 및 조작
- ✓ 예측 가능한 명도를 통한 더 나은 접근성
- ✓ 디스플레이 기술과 함께 확장되는 미래 보장 디자인
- ✓ 다양한 색상 간의 일관된 색상 관계
위의 색상 선택기로 오늘부터 OKLCH를 사용하기 시작하고 지각적 균일성이 디자인에 가져다주는 차이를 경험해보세요.
자주 묻는 질문
OKLCH: 자주 묻는 질문
OKLCH와 이 색상 선택기를 효과적으로 사용하는 방법에 대해 자세히 알아보세요.
1
OKLCH란 무엇이며 왜 사용해야 하나요?
OKLCH는 조화로운 색상 팔레트를 쉽게 만들 수 있는 지각적으로 균일한 색 공간입니다. RGB나 HSL과 달리 OKLCH에서 명도를 조정하면 모든 색상에서 지각된 밝기가 일관되게 유지됩니다.
2
P3 및 Rec2020 색 공간이란 무엇인가요?
P3 및 Rec2020은 표준 sRGB보다 더 생생한 색상을 표시할 수 있는 넓은 색역 색 공간입니다. P3는 최신 Apple 기기와 고급 디스플레이에서 일반적으로 지원됩니다.
3
왜 일부 색상이 '사용 불가'로 표시되나요?
고채도 색상을 선택하면 디스플레이가 표시할 수 있는 색상 범위를 벗어날 수 있습니다. 선택기는 디스플레이 기능 내에서 의도한 색상을 근사하는 대체 색상을 표시합니다.
4
CSS에서 OKLCH 색상을 어떻게 사용하나요?
현대 브라우저에서 CSS 구문으로 OKLCH 색상을 직접 사용할 수 있습니다: color: oklch(0.7 0.1 180). 구형 브라우저 지원을 위해 항상 RGB 또는 HEX 형식의 대체 색상을 제공하세요.
5
채도와 포화도의 차이점은 무엇인가요?
OKLCH의 채도는 지각적으로 균일한 방식으로 색상의 풍부함이나 강도를 나타냅니다. HSL 포화도와 달리 채도 값은 다른 명도 수준에서도 일관되게 유지됩니다.
6
특정 색상을 저장하거나 북마크할 수 있나요?
네! 모든 색상 선택은 자동으로 URL 해시를 업데이트합니다. 어떤 색상이든 북마크하거나 URL을 다른 사람과 공유하여 동일한 색상 구성을 로드할 수 있습니다.
7
'대체' 버튼은 무엇을 하나요?
디스플레이 기능을 벗어난 색상을 선택하면 선택기는 의도한 색상과 표시 가능한 대체 버전을 모두 표시합니다.
8
왜 때때로 두 개의 색상 미리보기 블록이 있나요?
sRGB 색 공간 밖의 색상을 선택하면 선택기는 두 개의 미리보기를 표시합니다: 왼쪽은 실제 색상(디스플레이가 지원하는 경우), 오른쪽은 sRGB 대체를 표시합니다.
9
투명한 색상을 어떻게 작업하나요?
알파 슬라이더를 사용하여 투명도를 제어합니다. 알파 채널은 체크무늬 배경 패턴에 표시됩니다.
10
슬라이더 대신 색상 값을 직접 입력할 수 있나요?
물론입니다! 형식 입력 필드에 어떤 형식(OKLCH, HEX, RGB 또는 HSL)의 색상이든 입력하거나 붙여넣을 수 있습니다.
11
내 디스플레이가 P3 또는 Rec2020을 지원하는지 어떻게 알 수 있나요?
선택기는 자동으로 디스플레이 기능을 감지합니다. '이 모니터에서는 P3를 사용할 수 없습니다'와 같은 메시지가 표시되면 디스플레이가 이러한 넓은 색역을 지원하지 않습니다.
12
접근 가능한 색상 팔레트를 만들기 위한 최선의 워크플로우는 무엇인가요?
원하는 색상을 설정한 다음 WCAG 대비 요구 사항을 충족하도록 명도를 조정하세요.