색상환보다 사용자의 결정을 먼저 적으세요
색을 고르기 전에 어디에 쓰일지 적습니다. 읽기 앱에는 오래 봐도 되는 캔버스와 본문 조합이 필요하고 캠페인 포스터는 먼 거리에서 읽혀야 합니다. 데이터 제품에는 순서형과 범주형 색이 필요합니다. 같은 파랑도 한 맥락에서는 적합하고 다른 곳에서는 부족합니다.
페이지 바탕, 떠 있는 표면, 본문, 보조 글자, 테두리, 상호작용, 포커스, 의미 상태처럼 필요한 역할을 나열합니다. 역할마다 고유 색이 필요하지는 않습니다. 토큰을 공유하면 시스템이 차분해질 수 있지만 각 역할의 후보와 검증된 관계는 있어야 합니다.
- 대상 사용자와 보는 환경
- 화면·인쇄·프로젝션 여부
- 글자 크기와 UI 상태
- 움직일 수 없는 브랜드 색
- 과업을 돕는 정서적 분위기
기준색 하나를 고른 뒤 명도부터 통제하세요
가장 강한 제약이 있는 색에서 시작합니다. 이미 정해진 브랜드 값, 사진의 핵심 포인트, 주제에 맞는 색 중 하나입니다. 다섯 색을 독립적으로 고르지 마세요. 기준 하나가 있어야 나머지 변형이 같은 시스템에 속할 이유가 생깁니다.
다음으로 명도 범위를 분명히 만듭니다. 보통 매우 밝은 표면 하나와 실제로 어두운 본문 또는 캔버스 색 하나가 필요합니다. 중간값은 테두리, 보조 표면, 그림을 맡습니다. 모든 색이 중간 근처에 있으면 팔레트 자체는 세련돼 보여도 정보 위계를 만들지 못합니다.
빠른 검사: 팔레트를 흑백으로 바꾸세요. 다섯 칩이 거의 같은 회색이면 역할 차이가 부족합니다.
명도 구조가 생긴 다음 색상 조화를 더하세요
유사색은 색상환에서 가까워 마찰이 적습니다. 보색과 삼각 배색은 뚜렷한 강조를 만듭니다. 하지만 배색 공식은 보증서가 아닙니다. 명도가 같은 보색은 눈이 떨리듯 보이면서 글자로는 미달할 수 있습니다.
프로젝트에 필요한 최소한의 색상 계열만 더하세요. 제품 UI는 한 브랜드 색, 중립색, 의미 상태만으로 충분한 경우가 많습니다. 일러스트는 더 많은 색이 필요해도 조작부는 절제할 수 있습니다. 제품 기능과 장식 표현을 분리하면 모든 화면이 색상 쇼케이스가 되는 일을 막습니다.
- 유사색: 차분하고 연속적인 흐름
- 보색: 분명한 강조와 긴장
- 삼각 배색: 표현적인 시스템의 뚜렷한 계열
- 중립색 중심 + 강조 하나: 오래 쓰는 UI 위계
색의 역할과 차지할 비율을 배정하세요
토큰 이름은 외형보다 목적으로 붙입니다. “action-primary”는 “blue-500”보다 브랜드가 바뀌어도 살아남습니다. 아래에는 원시 색상값을 두되 구성요소는 의미 역할을 요청하게 합니다. 그러면 한 색이 “클릭”과 “위험”을 동시에 뜻하는 문제도 드러납니다.
실제 비율로 시험하세요. 가장 넓은 표면은 화면의 60~90%를 덮고 가장 강한 강조색은 5%도 안 될 수 있습니다. 작은 칩으로 즐거운 색이 전체 페이지에서는 피곤할 수 있습니다. 확정 전에 대표 화면이나 포스터 하나를 만들어 보세요.
대비, 상태, 어려운 콘텐츠를 검사하세요
실제 글자색과 배경색을 WCAG 계산으로 확인합니다. 일반 글자의 AA는 보통 4.5:1, 큰 글자와 의미 있는 UI 경계는 보통 3:1입니다. 기본 버튼에서 멈추지 마세요. hover, 포커스, 눌림, 선택, 비활성, 오류, 성공 상태가 모두 구분돼야 합니다.
그다음 긴 번역 라벨, 품질이 낮은 사무용 모니터, 밝은 야외의 휴대폰, 흑백 스크린샷, 사진 위 글자처럼 어려운 콘텐츠를 넣습니다. 색은 한 층일 뿐입니다. 색상을 구분하지 못해도 아이콘, 라벨, 패턴, 간격, 글자 굵기가 의미를 지켜야 합니다.
팔레트가 흐트러지지 않도록 결정 이유를 기록하세요
각 값, 역할, 허용 조합, 금지 용도, 존재 이유를 기록합니다. 원본 색공간과 검토일도 포함하세요. 작은 프로젝트라면 CSS 변수 옆의 한 표면 충분하고 큰 시스템은 검증된 구성요소와 토큰을 연결할 수 있습니다.
무드보드 승인이 팔레트의 끝은 아닙니다. 새 콘텐츠, 테마, 상태, 접근성 문제가 생기면 다시 봅니다. 기반값을 최소한으로 바꾸고 전체 조합 행렬을 다시 검사해 한곳의 수정이 먼 곳의 실패를 만들지 않게 하세요.
팔레트 검수 체크리스트
- 모든 색에 이름 붙은 역할이 있습니다.
- 밝음에서 어두움까지 쓸 수 있는 범위가 있습니다.
- 본문 조합은 반올림 없이 목표 대비를 통과합니다.
- 포커스·hover·선택·오류·비활성 상태가 구분됩니다.
- 색상 하나에만 의미를 의존하지 않습니다.
- 실제 비율과 모바일 화면에서 확인했습니다.
- HEX 또는 OKLCH와 허용 조합을 문서화했습니다.
자주 묻는 질문
팔레트에는 몇 색이 적당한가요?
숫자보다 역할에서 시작하세요. 다섯 색은 탐색에 유용하지만 실제 시스템은 소수의 색상 계열, 여러 명도 단계, 의미 상태를 가질 수 있습니다.
HSL과 OKLCH 중 무엇으로 색을 골라야 하나요?
HSL은 대략적인 색상 수정에 익숙합니다. 지각적 밝기와 채도를 통제하려면 OKLCH가 더 적합한 경우가 많습니다. 체계적인 단계는 OKLCH로 만들고 HEX를 호환·전달값으로 기록할 수 있습니다.
팔레트 생성기가 디자이너를 대신할 수 있나요?
후보를 만들고 반복 속도를 높일 수 있습니다. 대상 사용자, 브랜드 제약, 구성요소 상태, 콘텐츠, 인쇄 방식, 사용자 테스트 결과까지 알 수는 없습니다.