1
색상 선택하기
색상 선택기를 사용하여 원하는 색상을 찾으세요. 세 가지 방법으로 색상을 선택할 수 있습니다:
- HSL 슬라이더: 색조(Hue), 채도(Saturation), 명도(Lightness) 값을 조절하여 정밀하게 색상을 선택합니다.
- HEX/RGB 입력: 원하는 HEX 코드(#RRGGBB) 또는 RGB 값을 직접 입력합니다.
- 시스템 색상 선택기: 브라우저 기본 색상 선택기를 사용하여 시각적으로 색상을 선택합니다.
팁: 각 색상 값 옆의 복사 버튼을 클릭하면 클립보드에 즉시 복사됩니다.
2
팔레트 생성하기
선택한 색상을 기반으로 다양한 색상 조화 규칙에 따라 팔레트를 자동 생성합니다.
- 모노크롬: 동일한 색조의 다양한 명도와 채도 조합
- 보색: 색상환의 반대편에 위치한 두 색상의 강렬한 대비
- 유사색: 인접한 색상의 부드럽고 조화로운 조합
- 트라이어딕: 세 가지 색상의 균형 잡힌 구성
- 테트라딕: 네 가지 색상의 가장 풍부한 조합
- 랜덤: 무작위 색상으로 창의적인 영감 얻기
팁: 팔레트의 각 색상 카드를 클릭하면 HEX 값이 클립보드에 복사됩니다.
3
대비 검사하기
WCAG(웹 콘텐츠 접근성 가이드라인) 기준에 따라 텍스트 색상과 배경 색상의 대비를 검사합니다.
- 텍스트 색상과 배경 색상을 각각 선택하세요.
- 대비 비율이 실시간으로 표시됩니다.
- AA(4.5:1) 및 AAA(7:1) 기준 통과 여부를 확인할 수 있습니다.
팁: 일반 텍스트는 AA(4.5:1) 이상을, 큰 텍스트는 AA(3:1) 이상을 목표로 하세요.
4
팔레트 저장 및 내보내기
마음에 드는 팔레트를 저장하고 다양한 형식으로 내보낼 수 있습니다.
- 팔레트 저장: 팔레트에 이름을 지정하여 브라우저에 저장합니다. 저장된 팔레트는 사이드바에서 확인할 수 있습니다.
- CSS 변수: 디자인 시스템에 바로 적용 가능한 CSS 사용자 정의 속성으로 내보냅니다.
- JSON 내보내기: HEX, HSL, RGB 값을 포함한 구조화된 JSON 데이터로 내보냅니다.
팁: 저장된 팔레트를 클릭하면 해당 팔레트의 첫 번째 색상이 선택기로 로드됩니다.
5
실전 활용 팁
- 브랜드 컬러를 입력하고 다양한 조화 규칙을 적용하여 브랜드 가이드라인을 확장하세요.
- 대비 검사기를 사용하여 모든 색상 조합이 접근성 기준을 충족하는지 확인하세요.
- CSS 변수 내보내기 기능으로 디자인 시스템에 색상을 즉시 적용하세요.
- 여러 팔레트를 저장하고 프로젝트별로 관리하여 색상 라이브러리를 구축하세요.