색상 팔레트 생성기이란?
색상 구성표 생성기는 단 하나의 기본 색상에서 색채 이론 규칙을 적용해 완전한 색상 팔레트를 생성합니다. 단색, 보색, 분할 보색, 이중 분할, 삼색, 사색, 유사색 구성표 중 선택해 각 스와치를 세밀하게 조정하고, 공유 링크를 복사하거나 CSS 변수·Tailwind 설정으로 내보내거나 헥스 코드를 복사하세요.
원하는 기준 hex를 고르면 생성기가 색상환의 표준 회전을 적용합니다. 보색은 180도, 분할 보색은 보색의 양옆인 150도와 210도, 트라이어드(삼색)는 120도, 테트라드(사색)는 90도, 유사색은 양옆으로 작게 한 단계씩 이동합니다. 셰이드와 틴트는 같은 색조를 유지하면서 HSL 공간에서 명도만 일정한 간격으로 조정해, 각각 5단계의 깔끔한 그라데이션을 만듭니다. 모든 스와치는 HEX, rgb(), hsl(), oklch() 중 원하는 형식으로 복사할 수 있고, 명도 대비 패널은 각 색을 흰색·검정에 대해 WCAG AA·AAA 기준으로 평가하며, 시각 미리보기는 클릭 한 번으로 팔레트 전체를 적색맹·녹색맹·청색맹 필터로 다시 그려줍니다. 공유 링크를 복사하면 계정 없이도 팔레트를 즐겨찾기하거나 동료에게 전달할 수 있습니다.
사용 방법
- 색상 선택 도구로 기본 색상을 고르거나 헥스 코드를 입력하세요.
- 구성표 유형(단색, 보색, 분할 보색, 이중 분할, 삼색, 유사색, 사색)을 선택해 팔레트를 생성하세요.
- 개별 헥스 코드를 복사하거나, 전체 팔레트를 CSS 변수로 내보내거나, 이미지 스와치로 다운로드하세요.
사용 시기
- 브랜드 hex 한 가지를 새 웹사이트나 앱 테마용 풀 팔레트로 확장합니다.
- 굿즈를 인쇄하기 전에 로고 색에 깔끔한 보색이 있는지 확인합니다.
- Figma나 디자인 도구를 열지 않고 CSS 커스텀 변수만 빠르게 만듭니다.
결과
웹 개발자가 브랜드 주 색상을 선택하고 삼색 구성표를 생성하여 보완적인 주황색과 초록색을 얻은 뒤, 디자인 시스템에 사용할 CSS 커스텀 속성으로 팔레트를 내보냈습니다.
자주 묻는 질문
- 삼색조와 사색조는 어떻게 다른가요?
- 삼색조는 색상환에서 120도씩 떨어진 세 색을 써서 균형 잡힌 조합을 만듭니다. 사색조는 네 색이 사각형을 이루는 구성(보색 두 쌍)으로 변화는 많지만 시각적으로 균형을 잡기가 더 까다롭습니다.
- 음영과 틴트는 어떻게 구분해 쓰나요?
- 음영(더 어두운 버전)은 밝은 UI의 텍스트, 테두리, hover 상태에 잘 맞습니다. 틴트(더 밝은 버전)는 배경, 비활성 상태, 옅은 강조에 좋습니다. 대부분의 디자인 시스템은 두 그라데이션이 모두 필요합니다.
- 접근성 명도 대비도 함께 검사하나요?
- 고려합니다. 팔레트 아래 명도 대비 패널이 각 색의 흰색·검정 대비 WCAG 비율과 AA·AAA 통과 여부 배지를 보여줍니다. 본문 텍스트는 보통 4.5:1을 기준으로 삼으면 대부분의 UI 상황을 만족할 수 있고, 시각 미리보기를 적색맹·녹색맹·청색맹으로 바꾸면 색각 이상이 있는 사용자가 보는 모습까지 확인할 수 있습니다.
- 유사색 배색이 보색 배색보다 차분해 보이는 이유는?
- 유사색은 색상환에서 서로 이웃하며 같은 계열이라 시각적 긴장이 적습니다. 보색은 색상환 반대편에 있어 대비가 최대가 되고 활기차 보이지만, 큰 면적에 쓰면 눈이 쉽게 피로해집니다.
- Tailwind 설정으로 내보낼 수 있나요, 아니면 CSS 변수만 가능한가요?
- 둘 다 지원합니다. CSS 변수는 스타일시트의 :root 아래에 그대로 붙여 넣으면 됩니다. Tailwind 형식은 hex 값을 theme.extend.colors 객체로 감싸 tailwind.config.js에 그대로 붙여 넣을 수 있는 형태입니다.