컬러 스케일이란?

컬러 스케일은 한 색상의 명암을 순서대로 배열한 집합으로, 관례상 50부터 900까지 번호를 붙입니다. 단계가 시각적으로 고르게 보이고 특정 조합이 알려진 명도 대비를 충족하도록 설계되어, 임의의 16진수 대신 역할과 단계로 색을 고를 수 있습니다.

번호 규약

대부분의 체계는 스케일에 50(가장 밝음)부터 900 또는 950(가장 어두움)까지 100 단위로 번호를 붙입니다. 이 규약은 Material Design에서 왔고 Tailwind가 굳혔으며, 이제는 따를 만큼 보편적입니다.

--blue-50:  #EFF6FF
--blue-100: #DBEAFE
...
--blue-500: #3B82F6
...
--blue-900: #1E3A8A

공유된 규약의 가치는 "테두리에는 blue-600을 쓰세요"가 디자이너에게도, 개발자에게도, AI 어시스턴트에게도 같은 뜻이 된다는 점입니다.

지각적 균등함. 단계는 똑같이 떨어져 보여야 합니다. sRGB에서의 보간은 이를 달성하지 못합니다. 중간이 뭉치고 특정 색상에서는 탁해지는 스케일이 나옵니다. OKLCH 같은 지각적으로 균등한 공간에서 작업하면 눈에 띄게 나은 결과가 나옵니다.

예측 가능한 대비. 잘 만든 스케일에서는 특정 조합이 믿을 만합니다. 단계 50 위의 단계 600 이상은 본문에서 AA를 지키고, 500은 큰 글자에 쓸 수 있습니다. 이 관계가 성립하면 일상적인 조합에서 대비를 손으로 확인하는 일이 사라집니다.

일관된 색상. 명도를 단순하게 조절하면 양 끝에서 색상이 밀립니다. 파랑은 어두워질수록 보라로, 노랑은 초록으로 흘러갑니다. 지각되는 색상을 스케일 전체에서 안정적으로 유지하려면 의도적인 보정이 필요합니다.

열 단계(50부터 900)가 흔한 기본값이며 대부분의 제품에 충분합니다. 900 아래가 필요한 다크 테마를 위해 950을 더해 열한 단계를 쓰는 체계도 있습니다.

일곱 단계 아래로 내려가면 누군가에게 필요한 농도가 존재하지 않는 구멍이 생기기 쉽고, 바로 거기서 드리프트가 시작됩니다.

가장 공을 들일 가치가 있는 것은 뉴트럴 스케일입니다. 인터페이스의 대부분이 실제로 거기 머물기 때문입니다. 회색에 살짝 색조를, 따뜻하게 또는 차갑게 넣는 것이 공들인 인터페이스와 기본값 그대로의 인터페이스를 가르는 경우가 많습니다.

생성되는 체계에는 프라이머리·세컨더리·뉴트럴·시맨틱 색의 완전한 스케일이 포함됩니다. 지각적으로 균등한 공간에서 만들어지고, 라이트와 다크 변형을 가지며, 조합마다 대비가 확인됩니다.