color-mix() 로 색을 파생시키기

디자인에 색을 많이 두면 유지가 어렵다. 기준 색 몇 개만 정하고, 흐린 텍스트나 옅은 경계선 같은 파생 색은 color-mix()로 그 자리에서 계산하는 편이 관리하기 좋다.

:root {
  --ink: #2b2b2b;
  --bg: #f9f4e8;
  /* 잉크를 배경에 15% 섞은 옅은 경계선 */
  --rule: color-mix(in srgb, var(--ink) 15%, transparent);
  /* 잉크를 배경과 섞은 흐린 본문 */
  --muted: color-mix(in srgb, var(--ink) 70%, var(--bg));
}

기준 색을 바꾸면 파생 색이 함께 따라온다. 색 하나를 조정하려고 여러 값을 손댈 일이 없어진다. 이 블로그도 실제로 배경·본문·강조 세 색만 정하고, 경계선과 흐린 글자는 전부 이렇게 만든다.

브라우저 지원도 이제 넉넉하다. 하드코딩한 회색 값들을 지울 때가 됐다.