색상 팔레트

사용 방법

1. 불투명한 기준색을 입력하거나 선택기에서 고릅니다.
2. 팔레트 방식과 3~12개 색상 수를 선택합니다.
3. 색을 눌러 복사하고 결과 파일 또는 CSS 팔레트를 저장합니다.

같은 색상의 일곱 명도 단계

입력·설정

#4F46E5 · 명도 단계 · 색상 7개

결과

같은 HSL 색상각·채도를 쓰는 7개 HEX 후보와 CSS 변수

가운데 단계가 입력 기준색과 정확히 같다는 의미는 아닙니다. 명도 범위를 고르게 나눕니다.

색 조합 방식의 차이

명도 단계는 같은 색상각·채도를 유지하고 HSL 명도를 8~92% 사이에서 나눕니다. 유사색은 기준 색상각 주변을 이동하고 보색은 반대쪽 색상각을 번갈아 사용하며 밝기 차이도 더합니다.

삼각 조합은 색상환에서 120도 간격의 세 방향을 사용하고, 단색 조합은 같은 색상각에서 채도와 명도를 바꿉니다. 무채색처럼 채도가 0이면 색상각을 바꾸어도 서로 같은 색이 생길 수 있습니다.

CSS 저장과 실제 디자인 검토

CSS 팔레트 저장은 --palette-1부터 시작하는 사용자 정의 속성을 만듭니다. 변수 이름은 프로젝트에서 의미 있는 역할 이름으로 바꾸고 텍스트·배경에 적용할 조합을 따로 선택하세요.

HSL의 같은 명도 차이가 사람 눈에 같은 밝기 차이로 보인다는 보장은 없습니다. 팔레트는 후보 생성 도구이며 브랜드 적합성이나 읽기 쉬움을 자동 보증하지 않습니다. 중요한 조합은 대비 검사와 실제 화면에서 확인하세요.

자주 묻는 질문