컬러 팔레트 생성기

마지막 업데이트: 2026-06-25

한줄 요약

컬러 팔레트 생성기는 베이스 색 하나로 보색(180°)·유사색(±30°)·삼각(120°)·사색(90°)·단색(명도 변화) 등 조화로운 색 조합을 자동으로 만들어 줍니다.

색 칩을 클릭하면 HEX 코드가 복사되고, 전체 복사로 팔레트 전체를 한 번에 가져갈 수 있습니다.

베이스 색과 조화 규칙

색 조합은 HSL 색상환 기준 근사값입니다. 실제 사용 시 명도·채도를 미세 조정하면 더 자연스러운 팔레트가 됩니다.

조화로운 컬러 팔레트는 색상환(Color Wheel)에서 색들이 이루는 각도 관계로 설명됩니다. 이 도구는 베이스 색을 HSL(색상·채도·명도)로 변환한 뒤, 색상(Hue) 각도를 회전하거나 명도를 조절해 색 조합을 만듭니다.

웹 UI에서는 보통 주조색 1개, 보조색 1~2개, 강조색 1개로 구성합니다. 유사색은 안정적인 배경과 본문에, 보색은 버튼·링크 같은 강조 요소에 쓰면 위계가 분명해집니다. 팔레트를 글자색으로 쓸 때는 색 대비 검사기로 배경과의 대비를 함께 확인하세요.

보색·유사색·삼각 조화는 어떻게 다른가요?

보색은 색상환에서 180도 반대편 색으로 강한 대비를 만들고, 유사색은 기준색 양옆 30도 안팎의 비슷한 색으로 부드러운 통일감을 줍니다. 삼각(트라이어드)은 120도 간격의 세 색으로 균형 잡힌 생동감을 만듭니다.

생성된 팔레트는 어떻게 복사하나요?

각 색 칩을 클릭하면 해당 HEX 코드가 클립보드에 복사되고, 전체 복사 버튼을 누르면 팔레트의 모든 HEX 코드가 한 줄로 복사됩니다. 복사한 코드는 CSS, 디자인 툴, 코드 어디에나 붙여넣을 수 있습니다.

HEX 외에 RGB나 HSL 값도 보이나요?

각 색 칩에는 HEX 코드가 표시되며, 이 도구는 내부적으로 HSL 색상환을 기준으로 조화 색을 계산합니다. HEX 값을 CSS의 rgb()나 hsl()로 변환해 사용해도 동일한 색입니다.

팔레트 색이 본문 글자에 충분히 잘 보이나요?

팔레트 색을 글자색이나 배경색으로 쓸 때는 가독성을 위해 명도 대비를 확인하는 것이 좋습니다. 색 대비 검사기에서 선택한 색의 WCAG 대비비와 AA·AAA 통과 여부를 확인할 수 있습니다.