색상 팔레트 생성기
단일 기준 색상에서 보색, 유사색, 삼색, 분할 보색 및 단색 팔레트를 생성하며 HSL 계산이 자동으로 처리됩니다.
이용 방법
이 색상 팔레트 생성기는 하나의 기준 색상을 입력하면 보색, 유사색, 삼색, 분할 보색, 단색 등 이론에 기반한 5가지 팔레트 변형을 즉시 생성하여 직접 HSL 계산을 하지 않고도 조화로운 배색을 탐색할 수 있습니다.
- 기준 색상 설정
헥스 코드를 입력하거나 색상 견본 선택기를 사용하거나 무작위 색상을 클릭하세요.
- 팔레트 생성
5가지 조화 유형이 각각 5개의 색상 견본 행으로 표시됩니다.
- 필요한 내용 복사
색상 견본을 클릭하여 헥스 값을 확인하거나 모든 내용을 CSS 변수로 복사하세요.
5가지 조화 유형
각 팔레트는 기준 색상을 HSL(색상, 채도, 명도)로 변환한 후 컬러 휠에서 고정된 각도만큼 색상을 이동시켜 생성됩니다.
- 보색: 기준 색상의 정반대인 180도 위치에 있는 색상으로 가장 높은 대비를 제공합니다.
- 유사색: 기준 색상의 양옆 15도 및 30도 위치에 인접한 색상으로 차분하고 통일감 있는 느낌을 줍니다.
- 삼색: 120도 간격으로 배치된 세 가지 색상으로 균형 잡히고 생동감 있는 조합입니다.
- 분할 보색: 보색의 양옆 150도 및 210도 위치에 있는 두 가지 색상으로 강한 대비를 주면서도 긴장감이 덜합니다.
- 단색: 동일한 색상의 5가지 다른 명도 단계로 항상 안전하고 통일감 있는 선택입니다.
CSS에서 팔레트 사용
Hex 값을 복사하여 사용자 지정 속성으로 정의한 후, 스타일시트 전체에서 참조하세요.
--color-primary: #14b8a6; --color-accent: #b84e14;
HSL은 지각적으로 균일하지 않습니다.
이 팔레트들은 순수하게 HSL 수학으로 계산되며 OKLCH나 CIELAB 같은 색 공간과 달리 지각적 균일성을 고려하지 않습니다. 동일한 HSL 명도를 가진 두 색상도 밝기가 확연히 다르게 보일 수 있으므로, UI 팔레트를 최종 확정하기 전에 전용 접근성 검사기로 대비율을 확인하세요.
자주 묻는 질문
단일 hex 색상에서 컬러 팔레트를 생성하려면 어떻게 해야 하나요?
기본 색상 필드에 #14b8a6과 같은 hex 코드를 입력하고 팔레트 생성을 클릭하세요. 이 도구는 이를 HSL로 변환한 다음 보색, 유사색, 삼색, 분할 보색, 단색의 다섯 가지 조화 유형을 각각 5개의 스와치 행으로 계산합니다. 아무 스와치나 클릭하여 해당 hex 값을 클립보드로 복사하세요.
보색 팔레트와 분할 보색 팔레트의 차이점은 무엇인가요?
보색 팔레트는 기본 색조와 색상환에서 정반대인 180도 떨어진 색상을 짝지어 최대 대비를 만듭니다. 분할 보색 팔레트는 그 반대 지점 양옆의 150도와 210도에 있는 두 색조를 사용하여 비슷하게 생생하면서도 약간 더 부드러운 대비를 만들어내며, 이는 UI 디자인에서 균형을 맞추기 더 쉽습니다.
생성된 팔레트를 CSS에서 사용하려면 어떻게 해야 하나요?
견본에서 16진수 값을 복사하여 CSS 사용자 지정 속성으로 정의하세요(예: --color-primary: #14b8a6; --color-accent: #b84e14;). 스타일시트 전체에서 var(--color-primary)로 참조할 수 있습니다. '5개 팔레트 모두 복사' 버튼을 누르면 모든 조화 유형의 견본이 한 번에 복사되므로 :root 블록에 바로 붙여넣을 수 있습니다.
랜덤 색상으로 시작하여 팔레트 영감을 얻을 수 있나요?
네, 가능합니다. '랜덤 색상' 버튼을 클릭하면 랜덤 16진수 값이 생성되고 이를 기반으로 5가지 팔레트가 즉시 계산됩니다. 이는 미리 정해진 시작 색상이 없을 때 브랜드 탐색에 유용합니다.
브라우저 기반 팔레트 생성의 한계는 무엇인가요?
팔레트 계산은 순수하게 HSL 수학을 기반으로 하므로 OKLCH나 CIELAB 색 공간처럼 지각적 균일성을 고려하지 않습니다. 동일한 HSL 명도의 색상도 시각적으로 밝기가 다르게 보일 수 있으므로, UI 팔레트를 최종 확정하기 전에 전용 접근성 검사 도구로 대비율을 반드시 확인하세요.