- 색상 선택기나 HEX 입력으로 기준 색을 정합니다.
- 각 방향의 단계 수를 조절합니다.
- 밝은 색·기준 색·어두운 색 팔레트가 생성됩니다. 색 칸을 누르면 HEX가 복사됩니다.
UI를 만들 때는 한 가지 색의 밝고 어두운 변형이 여러 개 필요합니다. 기준 색에 흰색·검은색을 섞어 단계를 만드는 것이 틴트·셰이드입니다.
- 틴트(밝게): 기준 색 + 흰색. 배경·비활성 상태에 씁니다.
- 셰이드(어둡게): 기준 색 + 검은색. 호버·강조·테두리에 씁니다.
- 토큰화: 50·100·…·900처럼 단계를 매기면 디자인 시스템에서 일관되게 쓸 수 있습니다.
같은 계열의 밝기만 다른 색을 쓰면 화면이 정돈돼 보입니다. 배색 원리는 배색 기초 가이드를 참고하세요.
- 디자인 토큰: 브랜드 색 하나로 50~900 단계 색상 토큰을 빠르게 만들 수 있습니다.
- 상태 색: 버튼의 기본·호버·눌림 상태에 같은 계열의 밝기만 다른 색을 쓰면 자연스럽습니다.
- 대비 확인: 글자색과 배경색을 고를 때 명암 대비가 충분한지는 색상 대비 검사로 점검하세요.
틴트(tint)는 기준 색에 흰색을 섞어 밝게 만든 색이고, 셰이드(shade)는 검은색을 섞어 어둡게 만든 색입니다. 하나의 색에서 밝기만 다른 여러 변형을 만들 때 쓰며, 버튼의 기본·호버·비활성 상태처럼 같은 계열의 색이 여러 단계 필요할 때 유용합니다.
디자인 시스템에서 한 가지 브랜드 색으로 50·100·200처럼 단계별 색상 토큰을 만들 때 활용합니다. 버튼의 평소·마우스 오버·눌림 상태, 배경과 글자의 명암 대비, 그래프의 같은 계열 색 구분 등에 자연스러운 색 변형을 빠르게 얻을 수 있습니다.
생성된 색상 칸을 클릭하면 그 색의 HEX 코드가 클립보드에 복사됩니다. 기준 색은 색상 선택기나 HEX 입력으로 바꿀 수 있고, 단계 수도 조절할 수 있습니다. 모든 계산은 브라우저에서 이뤄지며 결과는 CSS나 디자인 도구에 바로 붙여넣어 쓰면 됩니다.
디자인 시스템에서는 보통 한 색을 9~10단계(50~900)로 나눕니다. 작은 프로젝트라면 밝게 2~3단계, 어둡게 2~3단계 정도면 버튼 상태와 배경·강조를 충분히 표현할 수 있습니다. 필요한 만큼 단계 수를 조절해 쓰세요.
비슷하지만 다릅니다. 흰색·검은색을 섞는 방식과 HSL 명도만 조절하는 방식은 결과 색이 약간 다를 수 있습니다. 채도가 높은 색은 명도만 낮추면 탁해 보일 수 있어, 자연스러운 단계가 필요하면 생성된 색을 미리보기로 확인하며 고르는 것이 좋습니다.