CSS는 여러 색상 형식을 제공합니다. 같은 색을 만들어내며 — 선택은 가독성과 투명도 필요 여부에 관한 것입니다.
css
{ : red; }
{ : ; }
{ : ; }
{ : ( ); }
{ : ( / ); }
{ : ( ); }
{ : ( / ); }
HSL은 색을 Hue(색상환의 0–360°), Saturation(채도), Lightness(명도)로 표현하는데, 이는 인간이 색을 생각하는 방식과 일치해 변형을 직관적으로 만듭니다.
:root { --brand-h: 220; }
.primary { background: hsl(var(--brand-h) 80% 50%); }
.primary-light { background: hsl(var(--brand-h) 80% 70%); } /* lightness만 올리면 됨 */
.primary-dark { background: hsl(var(--brand-h) 80% 30%); } /* 그냥 낮추면 됨 */
더 밝거나 어두운 음영을 만드는 것이 간단합니다 — 숫자 하나만 바꾸면 됩니다. hex나 rgb로 같은 작업을 하려면 모든 채널을 다시 계산해야 합니다.
background: rgb(0 0 0 / 0.5); /* 50% 투명한 검정 — 오버레이용 */
/ alpha 문법(0 = 투명, 1 = 불투명)은 반투명 색을 만드는 방법으로 오버레이와 그림자에 유용합니다. (참고: 요소의 opacity는 자식을 포함한 전체 요소를 흐리게 하지만, alpha 색은 그 색만 흐리게 합니다.)
color: oklch(70% 0.15 220); /* 지각적으로 균일함; 색상 시스템에 더 적합 */
형식을 알면 적절한 도구를 고를 수 있습니다. 일회성 색상에는 hex/rgb, 디자인 시스템에는 HSL/OKLCH(쉽고 직관적인 음영 변형), 투명도에는 / alpha 문법을 사용하세요.
특히 HSL은 일관되고 테마화 가능한 색상 팔레트 구축을 훨씬 쉽게 만듭니다.