도구 가이드
디자인 시스템에서 색은 하나만 있으면 부족합니다. 기본 색 하나에 더 밝은 단계와 더 어두운 단계가 갖춰져 있어야 배경, 테두리, 호버 상태, 비활성 상태를 일관되게 표현할 수 있습니다.
손으로 색을 하나씩 고르면 단계 간 간격이 들쭉날쭉해지고 계열이 어긋나기 쉽습니다. 이 도구는 기준 색에서 명도를 규칙적으로 조절해 밝은 톤부터 어두운 톤까지의 팔레트를 자동으로 만들어 줍니다.
생성된 각 단계는 HEX 코드로 제공되어 CSS 변수나 디자인 토큰에 그대로 넣을 수 있습니다.
사용 방법
- 기준이 될 색상 코드를 입력합니다.
- 생성된 밝은 단계와 어두운 단계를 확인합니다.
- 필요한 단계의 HEX 코드를 복사합니다.
- CSS 변수나 디자인 토큰으로 등록합니다.
이럴 때 유용해요
- 브랜드 색에서 디자인 시스템 색 단계를 만들 때
- 버튼의 기본·호버·눌림 상태 색을 정할 때
- 배경과 테두리에 쓸 옅은 톤을 뽑을 때
- 다크 모드용 색 단계를 준비할 때
사용 팁
- 본문 배경으로 쓸 옅은 단계는 대비 검사를 함께 하세요. 밝은 단계에 흰 글자를 올리면 읽기 어렵습니다.
- 단계 이름을 50·100·200처럼 숫자로 정해 두면 팀 내에서 소통하기 편합니다.
- 채도가 매우 높은 색은 어두운 단계에서 탁해 보일 수 있습니다. 필요하면 채도를 함께 조정하세요.