작업 경로 / 입력에서 결과까지
5색 색상 조화를 만드는 방법
- 01
시드 색상 설정하기
「시드 HEX」에 6자리 16진수 값을 입력하세요. # 접두사는 선택 사항입니다. 「시드 선택기」로 시각적으로 색을 고를 수도 있고, 두 필드는 동기화됩니다. 작업 공간은 시드 #5D4DF1로 열려요.
- 02
조화 규칙 선택하기
유사색, 보색, 분할 보색, 3색, 4색, 단색 중에서 고르세요. 엔진은 고정된 색상 오프셋을 적용한 뒤 가운데 스와치를 정확한 시드 색으로 고정해요. 다른 스와치가 이론상의 정확한 각도에 놓이지 않을 수도 있어요. 단색은 시드의 색상을 유지하면서 채도와 명도를 모두 바꿉니다.
- 03
대비 목표 설정하기
「텍스트 대비 목표」를 고르세요. 3:1은 큰 텍스트, 4.5:1은 AA 본문 텍스트, 7:1은 AAA 본문 텍스트용이고 기본값은 4.5:1입니다. 각 스와치는 검정과 흰색 중 더 잘 읽히는 쪽을 기준으로 측정됩니다.
- 04
팔레트 생성하기
「팔레트 생성」을 누르세요. 다섯 개의 스와치가 나타나고, 가울데 스와치는 항상 입력한 시드 그 자체입니다. 나머지 네 개는 제한된 범위 안에서 시드 주변의 색상, 채도, 명도를 이동시키므로, 램프가 네온이나 탁한 색으로 흐르지 않고 쓸 만하게 유지됩니다.
- 05
대비 배지 읽기
각 스와치에는 16진수 값, 대비율, 「통과」 또는 「목표 미달」 배지가 표시되고, 스와치 텍스트는 대비 비교에서 이긴 색(검정 또는 흰색)으로 렌더링됩니다. 「목표 미달」 배지는 텍스트용으로 더 어둡거나 밝은 이웃 색을 고르라는 뜻이지, 색이 잘못됐다는 뜻이 아니에요.
- 06
CSS 복사 또는 JSON 다운로드하기
「CSS 복사」는 커스텀 프로퍼티 --palette-1부터 --palette-5까지를 담은 주석 달린 :root 블록을 복사합니다. 「JSON 다운로드」는 toolars-palette.json을 저장하고, 시드, 조화, 대비 목표, 각 색의 대비 데이터와 함께 null로 설정된 aiModel 및 api 필드가 기록됩니다.