사용법
- 색상 선택기나 HEX 입력으로 기준 색을 정합니다.
- 각 방향의 단계 수를 조절합니다.
- 밝은 색·기준 색·어두운 색 팔레트가 생성됩니다. 색 칸을 누르면 HEX가 복사됩니다.
활용 팁
- 디자인 토큰: 브랜드 색 하나로 50~900 단계 색상 토큰을 빠르게 만들 수 있습니다.
- 상태 색: 버튼의 기본·호버·눌림 상태에 같은 계열의 밝기만 다른 색을 쓰면 자연스럽습니다.
- 대비 확인: 글자색과 배경색을 고를 때 명암 대비가 충분한지는 색상 대비 검사로 점검하세요.
자주 묻는 질문
Q. 틴트와 셰이드가 무엇인가요?
틴트(tint)는 기준 색에 흰색을 섞어 밝게 만든 색이고, 셰이드(shade)는 검은색을 섞어 어둡게 만든 색입니다. 하나의 색에서 밝기만 다른 여러 변형을 만들 때 쓰며, 버튼의 기본·호버·비활성 상태처럼 같은 계열의 색이 여러 단계 필요할 때 유용합니다.
Q. 어디에 활용하나요?
디자인 시스템에서 한 가지 브랜드 색으로 50·100·200처럼 단계별 색상 토큰을 만들 때 활용합니다. 버튼의 평소·마우스 오버·눌림 상태, 배경과 글자의 명암 대비, 그래프의 같은 계열 색 구분 등에 자연스러운 색 변형을 빠르게 얻을 수 있습니다.
Q. HEX 코드는 어떻게 복사하나요?
생성된 색상 칸을 클릭하면 그 색의 HEX 코드가 클립보드에 복사됩니다. 기준 색은 색상 선택기나 HEX 입력으로 바꿀 수 있고, 단계 수도 조절할 수 있습니다. 모든 계산은 브라우저에서 이뤄지며 결과는 CSS나 디자인 도구에 바로 붙여넣어 쓰면 됩니다.
함께 보면 좋은 도구