색상 팔레트 생성기
기준 색상을 고르면 색채 이론 배색(보색·유사색·삼색·사색·분할 보색·단색)을 라이브 스와치로 즉시 생성합니다. HEX, RGB, HSL, CSS 변수 또는 Tailwind 설정으로 복사할 수 있습니다.
보색
기준 색상과 색상환에서 그 반대편 색(색상 + 180°) — 대비가 가장 강한 조합.
유사색
색상환에서 기준 색상을 양옆 이웃 색이 감싸는 배색(색상 ± 30°) — 차분하고 통일감 있는 배색.
삼색
120°씩 고르게 떨어진 세 색(색상, +120°, +240°) — 선명하면서도 균형 잡혔습니다.
사색(직사각형)
색상환에서 직사각형을 이루는 네 색(색상, +90°, +180°, +270°) — 두 쌍의 보색.
분할 보색
기준 색상에 그 보색의 양옆 두 색을 더한 것(색상 +150°와 +210°) — 대비가 강하면서도 균형을 잡기 더 쉽습니다.
단색
하나의 색상을 밝은 것에서 어두운 것으로 명도 단계로 펼친 것 — 손쉽게 조화로운 계열.
팔레트 내보내기
선택한 배색을 바로 붙여넣을 수 있는 CSS 사용자 지정 속성 또는 Tailwind 색상 설정으로 복사하세요.
:root {
--color-1: #3498DB;
--color-2: #DB7633;
}색상 팔레트 생성기 소개
색상 팔레트 생성기는 색상환의 기하학을 이용해 하나의 기준 색상을 서로 잘 어울리는 색의 집합으로 바꿔 줍니다. 색채 이론의 배색이란 색상들 사이의 정해진 관계일 뿐입니다. 즉 서로 마주 보는 색, 나란히 있는 색, 또는 색상환에 고르게 배치된 색을 말합니다. 이 도구는 기준 색상을 받아 그 색상(hue)·채도·명도(HSL)를 읽고, 색상을 정해진 각도만큼 회전시켜 여섯 가지 고전적인 배색을 만듭니다 — 보색(색상 + 180°), 유사색(색상 ± 30°), 삼색(120° 간격), 사색 또는 직사각형(90° 간격), 분할 보색(보색의 양옆), 단색(하나의 색상, 명도 변화)입니다. 각 팔레트는 라이브 스와치로 표시되어 숫자만 읽는 대신 관계를 눈으로 볼 수 있고, 모든 색에는 복사할 수 있는 HEX·RGB·HSL 값이 함께 제공됩니다. 마음에 드는 배색이 완성되면 CSS 사용자 지정 속성이나 Tailwind 색상 설정으로 내보내 프로젝트에 바로 넣을 수 있습니다. 디자이너, 개발자, 일러스트레이터, 그리고 웹사이트·브랜드·차트·슬라이드·인테리어의 색을 고르는 누구나를 위해 만들어졌으며, 마음에 든 하나의 색에서 균형 잡힌 팔레트 전체로 빠르게 나아가는 방법입니다.
이 생성기 사용법
- 1 스와치 선택기로 기준 색상을 고르거나, 아무 hex 값(예: #3498DB 또는 #39F)을 입력란에 입력하세요.
- 2 여섯 개의 배색 섹션 — 보색·유사색·삼색·사색·분할 보색·단색 — 을 각각 라이브 색상 스와치로 살펴보세요.
- 3 각 스와치의 버튼으로 어떤 색이든 HEX로 하나씩 복사하세요. 각 스와치에는 그에 맞는 RGB와 HSL 값도 함께 표시됩니다.
- 4 내보내기 상자에서 팔레트와 형식을 골라 CSS 사용자 지정 속성이나 Tailwind 색상 설정을 복사한 뒤 프로젝트에 붙여넣으세요.
색 배색의 원리(색상환)
모든 배색은 채도와 명도는 그대로 두고 기준 색상의 색상(hue)을 360° 색상환을 따라 회전시킨 것입니다. HSL(색상·채도·명도)로 다루면 간단해서 색상만 바뀝니다. 보색 — 색상 + 180°. 두 색이 정면으로 마주 보아 가장 강한 대비를 만듭니다. 유사색 — 색상 − 30°, 색상, 색상 + 30°. 부드럽게 어우러지고 조화롭게 느껴지는 이웃한 색들. 삼색 — 색상, 색상 + 120°, 색상 + 240°. 정삼각형 꼭짓점에 놓인 세 색으로, 선명하면서도 균형이 잡혀 있습니다. 사색(직사각형) — 색상, 색상 + 90°, 색상 + 180°, 색상 + 270°. 두 쌍의 보색으로 풍부한 네 색 배색을 이룹니다. 분할 보색 — 색상, 색상 + 150°, 색상 + 210°. 보색의 양옆에 있는 두 색상을 더한 기준 색상 — 보색에 가까운 대비이면서 더 부드럽습니다. 단색 — 하나의 색상을 밝은 틴트부터 어두운 셰이드까지 여러 명도 단계로 펼친 것. 예를 들어 기준 색상 #3498DB의 색상은 약 204°입니다. 그 보색은 204° + 180° = 24°(주황), 삼색 파트너는 324°와 84°, 분할 보색은 354°와 54°입니다. 계산은 HSL에서 수행하고 각 스와치마다 HEX로 다시 변환합니다.
자주 묻는 질문
보색이란 무엇인가요?
보색은 색상환에서 다른 색의 바로 맞은편에 있는 색으로, 색상을 180° 회전한 것입니다. 파랑과 주황, 빨강과 초록, 노랑과 보라가 보색 쌍입니다. 나란히 두면 가능한 한 가장 강한 대비가 생겨 각 색이 더 강렬해 보이므로, 보색 쌍은 클릭 유도(CTA), 강조, 눈에 띄어야 하는 요소에 자주 쓰입니다. 이 생성기는 기준 색상의 색상에 180°를 더해 보색을 찾습니다.
색상 팔레트는 어떻게 만드나요?
마음에 드는 기준 색상 하나에서 시작해, 추측하는 대신 색채 이론의 관계로 나머지를 이끌어 내세요. 분위기에 맞는 배색을 고르세요. 유사색이나 단색 배색은 차분하고 통일감 있게 느껴지고, 보색·삼색·분할 보색 배색은 대비와 활기를 더합니다. 색들이 하나의 세트처럼 보이도록 채도와 명도를 일관되게 유지하고, 색은 몇 가지에 무채색을 더하는 선에서 절제하세요. 이 도구는 그 과정을 자동화합니다 — 기준 색상을 입력하면 HEX·RGB·HSL·CSS 변수·Tailwind 설정으로 복사할 수 있는 여섯 개의 완성된 팔레트를 생성합니다.
삼색 배색이란 무엇인가요?
삼색 배색은 색상환에 고르게, 120° 간격으로 떨어진 세 색을 사용합니다 — 예를 들어 빨강, 파랑, 노랑입니다. 세 색상이 서로 같은 거리에 있어 삼색 팔레트는 선명하고 대비가 풍부하면서도 균형 잡힌 느낌을 줍니다. 흔한 방법은 한 색을 주역으로 삼고 나머지 두 색을 강조로 쓰는 것입니다. 이 생성기에서 삼색 팔레트는 기준 색상에 +120°와 +240° 색상을 더한 것입니다.
유사색 배색이란 무엇인가요?
유사색 배색은 색상환에서 서로 이웃한 색, 보통 기준 색상에서 약 30° 이내의 색을 사용합니다 — 파랑, 청록, 초록처럼요. 색상이 매우 가깝기 때문에 유사색 팔레트는 부드럽고 자연스러우며 조화롭게 보이고, 그래서 자연(노을, 나뭇잎, 바다)에 자주 나타납니다. 보색 배색보다 대비가 약하므로 한 색을 주역으로 정하면 좋습니다. 이 도구는 −30°, 기준 색상, +30° 색상으로 유사색 팔레트를 구성합니다.
관련 디자인·색상 도구
팔레트 생성기는 어떤 스와치든 HEX·RGB·HSL·HSV·CMYK 사이로 변환하는 색상 변환기, 고른 색이 읽기 쉽고 WCAG에 맞는지 확인하는 대비 검사기, 팔레트 색을 부드러운 배경으로 섞어 주는 CSS 그라데이션 생성기, 그리고 나머지 디자인 작업을 위한 화면 비율 계산기와 자연스럽게 어울립니다.