색 하나가 실은 예닐곱 개의 색이다
브랜드 색을 하나 정했다고 끝이 아니다. 버튼 기본색이 있으면 마우스를 올렸을 때 살짝 어두워지는 색, 눌렀을 때 더 어두운 색, 비활성 상태의 흐린 색, 그 색을 옅게 깐 배경색까지 줄줄이 따라온다. 지금까지 이 색들은 대부분 손으로 정했다. 디자인 툴에서 명도를 조금씩 낮춰 값을 뽑고, 그 여섯 자리 색 코드를 CSS에 하나하나 박아 넣었다. 브랜드 색이 한 번 바뀌면 그 파생색을 전부 다시 계산해야 했다.
color-mix()는 '두 색을 섞어라'는 한 줄이다
CSS color-mix() 함수는 말 그대로 두 색을 원하는 비율로 섞는다. 예를 들어 color-mix(in srgb, var(--brand) 85%, black) 은 브랜드 색에 검정을 15% 섞어 조금 어두운 색을 만든다. 흰색을 섞으면 밝아지고, 투명(transparent)을 섞으면 연해진다. 별도의 전처리기도, 자바스크립트도 필요 없다. 브라우저가 그 자리에서 색을 계산해 낸다.
브랜드 변수 하나에서 팔레트가 파생된다
핵심은 브랜드 색을 CSS 변수 하나로 두고, 나머지 색을 전부 그 변수에서 섞어 내는 것이다.
- 호버 색: 기본색에 검정을 10~15% 섞어 살짝 눌러 준다.
- 연한 배경: 기본색에 흰색을 90% 섞으면 은은한 톤의 배경색이 된다.
- 비활성 색: 회색을 섞어 채도를 죽이면 '지금은 누를 수 없다'는 신호가 된다.
이렇게 짜 두면 브랜드 색 변수 한 줄만 바꿔도 버튼·배경·테두리 색이 한꺼번에 따라 바뀐다. 색을 고정된 '값'이 아니라 서로 이어진 '관계'로 관리하는 셈이다.
다크 모드와 상태 색도 같은 규칙으로
이 방식은 다크 모드에서 특히 빛난다. 배경이 어두워질 때 카드나 텍스트 색을 배경색과 조금씩 섞어 두면, 테마가 바뀌어도 톤이 자연스럽게 따라온다. 성공·경고·오류 같은 상태 색도 기준색 하나에서 밝기만 조절해 뽑아내면 화면 전체의 색이 한 가족처럼 정돈된다.
지금 바로 써도 되나
color-mix()는 2023년 이후 크롬·사파리·파이어폭스 최신 버전에서 모두 지원되어 실무에 쓰기에 무리가 없다. 다만 아주 오래된 브라우저까지 배려해야 한다면, 먼저 평범한 색상값을 적어 두고 그 아래에 color-mix() 값을 덧쓰면 된다. 지원하지 않는 브라우저는 앞의 값을, 지원하는 브라우저는 뒤의 값을 쓴다.
색을 하나하나 손으로 찍던 시대에서, 브랜드 색 하나로 팔레트가 스스로 자라나는 시대로 넘어가는 중이다. CYAN은 작은 회사의 웹사이트를 만들 때도 색을 이렇게 '관계'로 설계해, 나중에 브랜드 색을 바꾸더라도 화면 전체가 흐트러지지 않도록 기초를 잡아 둔다.
