색상 팔레트 생성기
보색, 유사색, 삼원색, 단색조 4가지 색상 조화 유형으로 팔레트를 자동 생성합니다. 색상 잠금, 랜덤 팔레트, 저장/불러오기, 이미지 다운로드 기능을 제공하는 무료 온라인 도구입니다.
색상 팔레트 생성기
생성된 팔레트
저장된 팔레트
0 / 20마음에 드는 팔레트를 저장해보세요.
색상 팔레트 생성기란?
색상 팔레트 생성기는 색상 이론(Color Theory)에 기반하여 조화로운 색상 조합을 자동으로 생성하는 도구입니다. 하나의 기준 색상을 선택하면, 선택한 조화 유형에 따라 어울리는 5가지 색상을 즉시 생성합니다.
웹 디자인, 브랜드 아이덴티티 구축, UI/UX 디자인, 인테리어 색상 선정 등 다양한 분야에서 전문적인 색상 조합을 빠르게 찾아볼 수 있습니다. 색상에 대한 전문 지식 없이도 시각적으로 아름다운 팔레트를 만들어낼 수 있습니다.
이런 분께 추천합니다
- 웹/앱 디자이너 – 사이트나 앱의 전체 색상 테마를 정할 때 조화로운 조합을 찾고 싶은 분
- 브랜드 기획자 – 로고, 명함, 마케팅 자료에 사용할 브랜드 컬러를 선정하는 분
- 일러스트레이터/아티스트 – 작품에 사용할 색상 팔레트를 찾는 창작자
- 프론트엔드 개발자 – CSS 변수나 디자인 토큰에 사용할 색상 값이 필요한 분
- 인테리어/패션 관계자 – 공간이나 의상의 색상 조합을 계획하는 분
- 소셜 미디어 운영자 – 일관된 피드 색감을 유지하고 싶은 콘텐츠 제작자
주요 기능
- 4가지 조화 유형 – 보색, 유사색, 삼원색, 단색조 등 색상 이론에 기반한 조화 유형을 지원합니다.
- 실시간 팔레트 생성 – 기준 색상이나 조화 유형을 변경하면 즉시 새로운 팔레트가 생성됩니다.
- 색상 잠금 – 마음에 드는 색상은 잠금하고 나머지만 재생성할 수 있습니다.
- 랜덤 팔레트 – 영감이 필요할 때 버튼 하나로 완전히 새로운 팔레트를 생성합니다.
- 팔레트 저장 – 최대 20개의 팔레트를 브라우저에 저장하고 언제든 불러올 수 있습니다.
- HEX 코드 복사 – 개별 색상 또는 전체 팔레트의 HEX 코드를 클립보드에 복사합니다.
- 이미지 다운로드 – 생성된 팔레트를 PNG 이미지로 저장하여 공유하거나 참고용으로 보관할 수 있습니다.
사용 방법
- 기준 색상 선택 – 색상 피커를 클릭하여 원하는 색상을 선택하거나, HEX 코드를 직접 입력합니다. 이 색상을 중심으로 팔레트가 생성됩니다.
- 조화 유형 선택 – 드롭다운에서 원하는 조화 유형을 선택합니다. 각 유형은 서로 다른 색상 관계를 기반으로 팔레트를 생성합니다.
- 팔레트 확인 및 조정 – 생성된 5가지 색상을 확인합니다. 특정 색상을 유지하고 싶다면 잠금 버튼을 눌러 고정하고 랜덤 버튼으로 나머지를 재생성합니다.
- 색상 활용 – 각 색상의 복사 버튼으로 HEX 코드를 복사하거나, 전체 복사 버튼으로 모든 색상을 한번에 복사합니다.
- 저장 및 내보내기 – 마음에 드는 팔레트는 저장 버튼으로 보관하고, 이미지 버튼으로 PNG 파일로 다운로드합니다.
조화 유형 상세 설명
보색 (Complementary)
색상환에서 정반대(180도)에 위치한 색상의 조합입니다. 강렬한 대비를 만들어 시선을 집중시키는 효과가 있어 CTA 버튼, 강조 요소, 스포츠 브랜드에 자주 사용됩니다. 빨강-초록, 파랑-주황이 대표적인 보색 관계입니다.
유사색 (Analogous)
색상환에서 서로 인접한 색상들의 조합입니다. 자연에서 흔히 볼 수 있는 부드럽고 조화로운 느낌을 줍니다. 자연 테마 디자인, 차분한 웹사이트, 배경 그라데이션에 적합합니다. 예: 파랑-청록-초록.
삼원색 (Triadic)
색상환에서 120도 간격으로 위치한 세 가지 색상의 조합입니다. 다양하면서도 균형 잡힌 느낌을 주어 어린이 브랜드, 게임 UI, 활기찬 마케팅 자료에 효과적입니다. 빨강-노랑-파랑이 기본 삼원색입니다.
단색조 (Monochromatic)
하나의 색상에서 명도와 채도만 변화시킨 조합입니다. 가장 안전하고 세련된 느낌을 주어 미니멀 디자인, 기업 브랜딩, 고급스러운 UI에 널리 사용됩니다. 통일감 있으면서도 깊이 있는 디자인이 가능합니다.
색상 이론의 기초
색상환(Color Wheel)이란?
색상환은 1666년 아이작 뉴턴이 처음 개발한 이후, 색상 간의 관계를 이해하고 조화로운 조합을 찾는 데 사용되는 기본 도구입니다. 원형으로 배열된 12가지 색상(기본색, 2차색, 3차색)으로 구성되며, 색상의 위치 관계에 따라 다양한 조화 유형이 정의됩니다.
HSL 색상 모델
이 도구는 내부적으로 HSL(Hue, Saturation, Lightness) 색상 모델을 사용하여 조화로운 색상을 계산합니다:
- 색상(Hue) – 0~360도의 각도로 표현되는 색의 종류 (빨강=0°, 초록=120°, 파랑=240°)
- 채도(Saturation) – 색의 선명함 정도 (0%=회색, 100%=순수한 색)
- 명도(Lightness) – 색의 밝기 (0%=검정, 100%=흰색)
좋은 색상 팔레트의 원칙
- 60-30-10 규칙 – 주색상 60%, 보조색상 30%, 강조색상 10%의 비율로 사용하면 균형 잡힌 디자인이 됩니다.
- 대비 고려 – 텍스트와 배경 간 충분한 명도 대비를 확보해야 가독성이 좋습니다.
- 문맥 적합성 – 색상은 감정과 메시지를 전달합니다. 브랜드나 목적에 맞는 색상을 선택하세요.
자주 묻는 질문
생성된 색상을 CSS에서 어떻게 사용하나요?
각 색상 카드의 복사 버튼을 클릭하면 HEX 코드(예: #D4AF37)가 클립보드에 복사됩니다. 이 값을 CSS에서 color: #D4AF37; 또는 background-color: #D4AF37; 형태로 직접 사용할 수 있습니다. CSS 변수로 정의해두면 관리가 더 편합니다: --primary-color: #D4AF37;
저장된 팔레트는 어디에 보관되나요?
팔레트는 브라우저의 로컬 스토리지(localStorage)에 저장됩니다. 같은 브라우저에서 다시 접속하면 저장된 팔레트를 확인할 수 있습니다. 단, 브라우저 캐시를 삭제하거나 다른 기기/브라우저에서는 저장된 팔레트가 표시되지 않으니 중요한 팔레트는 이미지로 다운로드해두세요.
특정 색상만 유지하고 나머지를 변경하고 싶어요.
각 색상 카드에 있는 자물쇠 버튼을 클릭하면 해당 색상이 잠금됩니다. 잠긴 색상은 랜덤 버튼을 눌러도 변경되지 않습니다. 여러 색상을 동시에 잠글 수도 있으며, 다시 클릭하면 잠금이 해제됩니다.
웹 접근성을 위한 색상 대비는 어떻게 확인하나요?
이 도구는 팔레트 생성에 초점을 맞추고 있습니다. 텍스트와 배경 간의 명암 대비율(WCAG 기준)을 확인하려면 별도의 명암 대비 검사기 도구를 사용하시기 바랍니다. 일반적으로 일반 텍스트는 4.5:1, 큰 텍스트는 3:1 이상의 대비율이 권장됩니다.
어떤 조화 유형을 선택해야 할지 모르겠어요.
목적에 따라 추천드립니다: 단색조는 가장 안전하고 세련된 느낌으로 초보자에게 추천합니다. 유사색은 자연스럽고 편안한 느낌을 원할 때 좋습니다. 보색은 강렬한 대비가 필요한 CTA나 강조 요소에 적합합니다. 삼원색은 활기차고 다양한 느낌을 원할 때 선택하세요.
브랜드 색상이 이미 정해져 있는데 어울리는 색을 찾고 싶어요.
기존 브랜드 색상의 HEX 코드를 입력란에 직접 입력하세요. 그 색상을 기준으로 각 조화 유형에 따른 팔레트가 생성됩니다. 보통 유사색이나 단색조를 선택하면 기존 브랜드 느낌을 유지하면서 확장된 팔레트를 얻을 수 있고, 보색을 선택하면 대비되는 강조색을 찾을 수 있습니다.