색상 팔레트 생성기 - 조화로운 배색 자동 생성
기본 색상을 선택하기만 하면 색채 이론에 기반한 조화로운 색상 팔레트를 자동 생성해요. 보색, 유사색, 트라이어드, 테트라드, 분열 보색 중에서 선택하고 CSS 변수 형식으로 복사할 수 있어요.
#3398db
#db7633
:root {
--color-primary: #3398db;
--color-primary-light: #8ac4ea;
--color-primary-dark: #19608f;
--color-secondary: #db7633;
--color-secondary-light: #eab18a;
--color-secondary-dark: #8f4819;
}
팔레트 생성기이란?
색상 팔레트 생성기는 색채 이론(보색, 유사색, 트라이어드 등)을 사용하여 하나의 기본 색상에서 조화로운 배색을 자동으로 생성하는 도구예요. 웹 디자인과 UI 디자인의 배색 결정을 지원해요.
사용 방법
- 색상 선택기 또는 HEX 입력으로 기본 색상을 선택해요
- 하모니 유형(보색, 유사색, 트라이어드, 테트라드, 분열 보색)을 선택해요
- 생성된 팔레트의 색상을 클릭하여 HEX 값을 복사해요
- CSS 변수 복사 버튼으로 팔레트 전체를 복사해요
FAQ
- 하모니 유형은 어떻게 선택해야 하나요?
- 보색은 임팩트 있는 배색, 유사색은 온화한 배색, 트라이어드는 균형 잡힌 3색 배색에 적합해요.
- 명암 변형이란 무엇인가요?
- 각 색상의 밝기를 ±20% 변화시킨 밝은 버전과 어두운 버전이에요. 호버 상태와 그라데이션에 활용할 수 있어요.
- 이 도구는 어떻게 사용하나요?
- 색상 선택기로 기본 색상을 선택하고 하모니 유형을 선택하면 자동으로 팔레트가 생성돼요. 색상을 클릭하면 HEX 값을 복사해요.
- 데이터가 서버로 전송되나요?
- 아니요. 색상 처리는 브라우저에서만 이루어지며, 어떤 데이터도 서버로 전송되지 않아요.
- CSS 변수로 내보낼 수 있나요?
- 네. 'CSS 변수 복사' 버튼으로 팔레트 전체를 --color-1: #xxxxxx; 형식의 CSS 변수로 복사할 수 있어요.
관련 도구
업데이트 이력
최종 업데이트: 2026-02-20
- 2026-02-20 최초 출시