한 가지 은청에서 밤까지
· 기법
이 사이트의 액센트는 은청 한 색이다. 밤 팔레트를 만들 때 색을 일곱 번 고르지 않았다. 그 한 색을 씨앗으로 두고 명도와 채도만 정해 식으로 뽑았다.
CSS 의 relative color 가 그 식이다. oklch(from var(--seed) 0.9 calc(c * 0.15) h) 는 씨앗의 색상(h)을 그대로 두고 명도(L)를 0.9 로, 채도(c)를 15 % 로 바꾼 색이다. 밤의 잉크가 이렇게 나온다. 지반·표면·보조 잉크·액센트도 같은 꼴이고, 다른 것은 두 숫자뿐이다.1
씨앗 은청에서 명도와 채도를 바꾸면 밤의 잉크가 어떻게 달라지는지 보여 주는 데모다. 지원하는 브라우저에서는 슬라이더 두 개와 결과 색·대비비가 여기 뜬다. 지금 쓰는 브라우저가 relative color 를 모르면 이 글만 남는다.
정본은 hex 가 아니라 이 두 숫자다. hex 는 식의 결과를 미리 계산해 둔 값이고 relative color 를 모르는 브라우저를 위한 대비책이다. 두 값이 어긋나지 않도록 테스트가 같은 식으로 계산해 채널당 ±1 안에서 대조한다.
대비도 같은 자리에서 잰다. 밤의 잉크와 지반, 보조 잉크와 표면 — 조합마다 4.5:1 아래로 내려가면 테스트가 실패하고 그 변경은 들어오지 못한다. 색을 고르는 일이 숫자 둘을 고르는 일이 되면, 지키는 일도 숫자가 한다.2