UI 상태 색상 팔레트 생성기

UI 상태 색상 팔레트 생성기 사용 가이드

UI 상태 색상 팔레트 생성기는 기본 색상에서 hover, active, disabled, focus, danger, success 같은 상태 색상 후보를 만들고 디자인 토큰으로 정리하는 도구입니다.

기본 색상에서 hover, active, disabled, focus 상태 색상 후보를 만듭니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다.

사용 방법

1. 1UI 상태 색상 팔레트 생성기 화면에서 필요한 입력값이나 파일을 선택합니다.
2. 2조건과 선택 옵션을 확인한 뒤 실행 버튼을 누릅니다.
3. 3UI 상태 색상 팔레트 생성기에서 크기, 색상 또는 CSS 값을 프로젝트에서 쓰는 단위에 맞춰 입력합니다.
4. 4UI 상태 색상 팔레트 생성기에서 값을 하나씩 조정하며 미리보기와 생성 코드를 확인합니다.

실제 사용 사례

• 기본 색상에서 hover, active, disabled, focus 상태 색상 후보를 만듭니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다.
• UI 상태 색상 팔레트 생성기로 UI에 적용하기 전 시각 값을 빠르게 미리보기
• UI 상태 색상 팔레트 생성기 결과를 디자인 컬러 토큰 생성기 작업 전후에 비교하며 디자인 시스템에 넣을 토큰이나 CSS를 정리하기

문제가 생겼을 때

활용 팁

• UI 상태 색상 팔레트 생성기 사용 시 프로젝트에 적용하기 전 작은 화면, 키보드 포커스와 기존 CSS 충돌을 확인하세요.
• UI 상태 색상 팔레트 생성기 결과가 도구 설명과 맞는지 원본 입력과 나란히 비교하세요.
• UI 상태 색상 팔레트 생성기에서 조건 하나만 바꿔 이전 결과와 비교하면 차이가 생긴 원인을 찾기 쉽습니다.