CSS 색상 함수 가이드 요약
CSS에서 색상을 설정하고 조작하는 다양한 방법을 소개하는 글입니다.
주요 색상 공간 (Color Space)
1. sRGB 색상 공간
- 1996년부터 웹 표준으로 사용된 전통적인 색상 공간
rgb(),hsl(),hwb()함수 지원- 현대 디스플레이의 전체 색상 영역을 표현하기엔 한계가 있음
2. CIELAB 색상 공간
- 인간의 눈이 인식하는 색상에 더 가까운 넓은 색상 영역 제공
lab(),lch()함수 사용
3. OkLab 색상 공간
- CIELAB의 한계를 개선한 색상 공간
- 색상 전환이 더 부드럽고 균일함
oklab(),oklch()함수 제공
주요 색상 함수
color() 함수
- 9개의 다른 색상 공간에 접근 가능
- 예:
color(display-p3 0.8 0.2 0.5)
color-mix() 함수
- 두 색상을 특정 비율로 혼합
- 예:
color-mix(in oklab, blue 70%, red 30%)
상대 색상 구문 (Relative Color Syntax)
- 기존 색상을 다른 색상 함수로 변환
- 예:
lab(from rgb(255 210 01) l a b)
색상을 지원하는 CSS 속성들
color, background-color, border-color, box-shadow, text-shadow, accent-color 등 다양한 속성에서 색상값 사용 가능
이 가이드는 현대적인 CSS 색상 시스템의 강력한 기능들을 활용하여 더 풍부하고 정확한 색상 표현을 가능하게 하는 방법을 제시합니다.