1. 입력값 정리
16진수 입력값은 공백이 제거되고 정규화되며 필요한 경우 확장됩니다. 잘못된 입력은 페이지를 중단시키지 않으며, 입력이 수정될 때까지 마지막으로 유효했던 팔레트가 계속 표시됩니다.
팔레트 생성하기
기본 색상을 사용하고 팔레트의 색조, 채도, 명도가 얼마나 변할지 조정하세요. 생성기는 값을 안전하게 고정하고, 색조를 360도로 순환시키며, 내보내기 값을 정수 RGB 및 소수점 첫째 자리 HSL 백분율로 반올림합니다.
결과
미리보기 스트립은 팔레트를 왼쪽에서 오른쪽 순서로 보여줍니다. 각 스와치에는 해당 색상에 대한 전경 텍스트 대비 권장 사항이 포함되어 있습니다.
내보내기
형식 선택기를 사용하여 CSS 사용자 정의 속성과 JSON 간을 전환하세요. 복사 기능은 브라우저 클립보드 API를 사용할 수 없는 경우에만 비활성화됩니다.
HEX
RGB
HSL
CSS
JSON
작동 원리
생성기는 기본 16진수 색상을 HSL로 변환하고 선택한 조화 규칙에 따라 색조 간격을 적용한 다음, 변화 범위 값에 따라 팔레트 전체의 채도와 명도를 조정합니다.
2. 팔레트 계산
색조 값은 색상환을 따라 순환합니다. 채도와 명도는 잘못된 색상 출력을 방지하기 위해 0에서 100 사이로 고정됩니다.
3. 프로덕션용 내보내기
내보내기 결과에는 명명 규칙, 반올림된 값 및 안정적인 순서가 포함되어 있으므로 디자인 토큰, 프로토타입 또는 스타일 시트에 직접 적용할 수 있습니다.
색상은 디스플레이, 브라우저 및 운영 체제에 따라 다르게 보일 수 있습니다. 이 도구를 빠른 팔레트 시작점으로 활용하고, 최종 선택 사항은 대상 환경 및 접근성 워크플로우에서 확인하세요.