CSS 색상 표기

개념 이해하기

rgb와 hsl의 현대 문법은 공백 구분과 / alpha를 지원합니다. currentColor는 현재 color 값을 테두리나 SVG에 재사용해 색상 관계를 단순하게 합니다.

hsl(147 62% 26%) 하나가 대상 요소의 글자색과 배경에 함께 쓰이고 배경 쪽에만 / 0.14가 붙어, 한 색에서 진한 글자와 옅은 바탕을 함께 얻습니다. 두 번째 상자는 color를 rgb(155 92 0)으로 바꾸기만 했는데도 currentColor로 그린 테두리가 따라서 갈색이 되고, 배경은 노란 rgb(242 184 75)의 24%만 칠해져 크림색으로 보입니다.

지금은 글자색과 배경에 같은 hsl 숫자를 두 번 적었지만, 배경을 color-mix(in srgb, currentColor 14%, transparent)로 쓰면 글자색 하나만 바꿔도 옅은 배경이 함께 따라옵니다. 색 변형을 만들 때 color 한 줄만 고치면 되므로 팔레트를 관리하기 쉬워집니다.