색상 명도·채도 변형 생성기

브랜드 색 하나에서 디자이너는 대개 한 벌의 단계가 필요합니다. 호버 상태와 배경을 위한 밝은 색조, 글자와 활성 상태를 위한 어두운 색조입니다. 이 툴은 기준 색을 흰색 쪽(틴트), 검정 쪽(셰이드), 회색 쪽(톤)으로 고른 간격으로 섞습니다. 개수(2~20), 출력 형식(HEX, RGB, HSL)을 고르고 아무 견본이나 눌러 복사할 수 있습니다. 테일윈드 방식의 색 단계(50~900), 버튼 상태, 접근성 있는 UI 팔레트를 만들 때 씁니다.

섞는 비율에서 고른 간격이 눈에도 고른 간격은 아닙니다. 단계를 그대로 쓰기 전에 알아야 할 핵심이 그것입니다. 흰색 쪽으로 섞으면 빠르게 압축됩니다. 처음 몇 단계는 색이 많이 바뀌고 마지막 몇 단계는 거의 차이가 없는데, 지각되는 밝기가 관여하는 빛의 대략 세제곱근 함수이기 때문입니다. 이렇게 만든 단계는 서로 비슷해 보이는 옅은 단계가 너무 많고 쓸 만한 중간 톤이 너무 적어지기 쉬워서, 디자이너들은 대개 가운데를 손으로 밀어 조정하게 됩니다.

틴트와 셰이드와 톤은 밝기뿐 아니라 채도에도 서로 다른 일을 합니다. 흰색을 더하면 밝기가 오르고 채도가 내려가는데, 그래서 선명한 브랜드 색의 틴트는 옅기보다 파스텔로 읽힙니다. 검정을 더하면 둘 다 내려가고 밝은 색상이 탁해질 수 있습니다. 회색을 더하면 밝기는 대체로 그대로 두고 채도만 내려가는데, 같은 계열에 속하면서도 차분한 변형을 원할 때 필요한 것이 그것입니다.

번호가 붙은 단계는 측정값이 아니라 관례입니다. 테일윈드의 50에서 900까지는 단계 위의 위치이지 밝기 값이 아니며, 같은 번호를 쓰는 두 팔레트가 같은 단계에서 상당히 다를 수 있습니다. 번호는 그 색이 형제들 사이에서 어디쯤 있는지를 말할 뿐, 글자와 얼마나 대비될지에 대해서는 아무것도 말하지 않습니다.

이 툴이 대신해 줄 수 없는 확인이 대비입니다. 단계는 색의 집합이고, 그중 어느 짝이 WCAG 문턱을 넘는지는 휘도에 대한 별개의 계산입니다. 지난 프로젝트가 그랬다는 이유로 100 위의 글자에 600을 고르는 것이, 팔레트가 정확히 한 조합에서 감사에 떨어지는 경로입니다.