현대 색상 표기와 alpha를 조합해 일관된 팔레트를 만듭니다.
rgb와 hsl의 현대 문법은 공백 구분과 / alpha를 지원합니다. currentColor는 현재 color 값을 테두리나 SVG에 재사용해 색상 관계를 단순하게 합니다.
이번 예제의 출발점은 hsl(147 62% 26% / .2)입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 alpha만 .14에서 .35로 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
브랜드 색을 수십 곳에 직접 반복하면 변경과 테마 적용이 어렵습니다. 사용자 정의 속성을 고려하세요.
직접 바꿔보세요alpha만 .14에서 .35로 바꿔보세요.