현대 CSS 색상 가이드: OKLCH, color-mix() 및 웹 디자인의 미래
색상은 웹 디자인의 영혼이지만, 수십 년 동안 우리는 sRGB와 RGB, HSL과 같은 비지각적 색상 공간의 한계에 갇혀 있었습니다. 현대 CSS는 이러한 경계를 허물고 고화질, 지각적 균일성 및 동적 색상 시스템의 새로운 시대를 열었습니다.
이 가이드에서는 CSS에서 색상을 정의하고 조작하는 방식을 바꾸고 있는 혁신적인 색상 함수와 기능을 살펴보겠습니다.
2. color-mix()를 통한 동적 조작
CSS의 가장 강력한 새로운 추가 기능 중 하나는 color-mix() 함수입니다. 이 함수를 사용하면 스타일시트에서 직접 두 색상을 섞을 수 있으므로 복잡한 Sass 계산이나 JavaScript가 필요하지 않습니다.
구문: color-mix(in [색상 공간], [색상1] [백분율], [색상2] [백분율])
예: 즉각적인 호버 상태 만들기
.button {
background: var(--primary-color);
}
.button:hover {
/* 기본 색상에 흰색 20% 섞기 */
background: color-mix(in oklch, var(--primary-color), white 20%);
}
oklch 또는 oklab 공간에서 혼합하면 일반적으로 RGB에서 혼합하는 것보다 훨씬 자연스러운 결과를 얻을 수 있습니다.
3. LCH 및 LAB 마스터하기
OKLCH는 직관성 때문에 일반적으로 선호되지만, LCH와 LAB이 그 기초입니다.
- LAB: 좌표계를 사용합니다(밝기를 위한 L, 녹색-빨간색 축을 위한 a, 파란색-노란색 축을 위한 b).
- LCH: LAB의 극좌표 버전입니다(밝기, 채도, 색조).
이러한 공간은 장치 독립적이며 사람이 볼 수 있는 모든 색상을 나타낼 수 있습니다. 이는 현대 브라우저가 내부적으로 색상을 처리하는 "기본" 방식입니다.
4. color() 함수 및 Display-P3
color() 함수는 display-p3, a98-rgb 또는 prophoto-rgb와 같은 특정 색상 공간에 액세스하는 일반적인 방법입니다.
/* 광색역 P3 공간 액세스 */
.p3-green {
color: color(display-p3 0 1 0); /* 가장 순수한 P3 녹색 */
}
장치가 지정된 공간을 지원하지 않는 경우 CSS는 자동으로 가장 가까운 sRGB 해당 값으로 대체됩니다.
5. light-dark()로 테마에 적응하기
다크 모드가 표준 요구 사항이 됨에 따라 light-dark() 함수는 테마 전환을 단순화합니다. 사용자의 시스템 기본 설정에 따라 라이트 모드에는 첫 번째 값을, 다크 모드에는 두 번째 값을 자동으로 선택합니다.
body {
background-color: light-dark(#ffffff, #121212);
color: light-dark(#333333, #efefef);
}
6. 상대 색상 구문 (RCS)
상대 색상 구문(Relative Color Syntax)은 아마도 가장 발전된 색상 기능일 것입니다. 기존 색상을 "구조 분해"하여 구성 요소 중 하나를 수정하고 한 줄의 코드로 새로운 색상을 만들 수 있습니다.
/* 기존 색상을 가져와 투명도나 밝기 변경 */
.card {
--base-color: #3498db;
background: oklch(from var(--base-color) 80% c h); /* 밝기를 80%로 증가 */
border-color: oklch(from var(--base-color) l c h / 0.5); /* 색상은 유지하고 투명도 50% 추가 */
}
현대 CSS 색상 함수 요약
| 함수 | 최적 용도 | 지원 현황 |
|---|---|---|
| oklch() | 지각적으로 균일한 디자인, 접근 가능한 팔레트 | 최신 브라우저 |
| color-mix() | 색상 혼합(호버 상태, 오버레이) | 최신 브라우저 |
| light-dark() | 쉬운 다크 모드 지원 | 신규(지원 확인 중) |
| RCS | 변수에서 색상 파생 | 도입 중 |
결론
현대 CSS는 색상을 정적인 값에서 동적이고 프로그래밍 가능한 시스템으로 변화시켰습니다. 정밀도를 위해 OKLCH를, 유연성을 위해 **color-mix()**를 활용함으로써 더욱 아름다울 뿐만 아니라 접근성이 높고 성능이 뛰어난 웹 경험을 창출할 수 있습니다.
디자인을 업그레이드할 준비가 되셨나요? 당사의 색상 변환기를 사용하여 실험을 시작해 보세요. 곧 출시될 OKLCH 색상 선택기와 CSS 색상 혼합 생성기도 기대해 주세요!