컬러 팔레트 생성기란?
컬러 팔레트 생성기는 기준이 되는 색 하나만 고르면 그와 어울리는 색 조합(컬러 하모니)을 자동으로 추천해 주는 무료 온라인 도구입니다. '색조합이 막막할 때', '보색이 뭔지 모를 때', '브랜드 색에 맞는 보조색을 찾을 때' 색상환(HSL) 이론에 기반해 보색·유사색·삼각·사각·단색 배색을 즉시 만들어 줍니다. Coolors나 Adobe Color 같은 해외 색조합 사이트를 한국어 UI로, 가입이나 설치 없이 브라우저에서 그대로 대체할 수 있습니다.
단순히 색 코드를 변환하는 도구와 달리, 이 도구는 '여러 색이 함께 보일 때의 조화'에 초점을 맞춥니다. 생성된 각 색은 HEX·RGB·HSL 코드로 한 번에 복사할 수 있고, 밝기·채도를 단계별로 조절한 음영(shades·tints)도 제공합니다. WCAG 명암 대비 체크로 글자가 잘 읽히는지 확인하고, CSS 변수·Tailwind·SCSS·JSON으로 내보내거나 PNG·URL로 공유할 수 있어 디자이너와 개발자 모두에게 실무용 도구가 됩니다.
주요 기능
5가지 배색 자동 생성
보색·유사색·삼각·사각·단색 하모니를 색상환 회전으로 즉시 계산해 어울리는 색 조합을 만들어 줍니다.
HEX·RGB·HSL 즉시 복사 & 내보내기
색상 칩 클릭 한 번으로 원하는 형식의 코드를 복사하고, CSS 변수·Tailwind·SCSS·JSON으로 팔레트 전체를 일괄 내보냅니다.
잠금 + 랜덤 탐색
마음에 드는 색은 고정하고 스페이스바나 랜덤 버튼으로 나머지만 새로 탐색하며 조합을 완성합니다.
음영 단계 & WCAG 대비 체크
각 색의 명도·채도 10단계 음영을 제공하고, 흰/검 글자 대비비를 계산해 AA·AAA 접근성 충족 여부를 알려줍니다.
사용 방법
- 기준 색 선택 — 컬러 피커, HEX 입력칸, 또는 스포이드(EyeDropper)로 기준이 될 색 하나를 고릅니다.
- 배색 방식 선택 — 보색·유사색·삼각·사각·단색 중 하나를 선택하면 어울리는 색 조합이 자동으로 생성됩니다.
- 잠금 후 탐색 — 마음에 드는 색은 자물쇠로 고정하고, 랜덤 버튼이나 스페이스바로 나머지 색을 새로 탐색합니다.
- 코드 복사 — 복사 형식(HEX/RGB/HSL)을 고르고 색상 칩을 클릭해 클립보드에 복사합니다. 음영 단계도 클릭해 복사할 수 있습니다.
- 내보내기·공유 — CSS·Tailwind·SCSS·JSON으로 일괄 내보내거나 PNG 이미지로 저장하고, URL로 팔레트를 공유합니다.
이럴 때 활용하세요
웹·앱 디자인 배색
주조색을 정하고 보색·유사색으로 버튼·강조·배경색을 잡아 일관된 UI 컬러 시스템을 빠르게 구성합니다.
브랜드·로고 컬러
브랜드 메인 컬러에서 어울리는 보조 색을 도출해 명함·패키지·SNS 톤앤매너를 통일합니다.
프론트엔드 색 토큰
음영 10단계를 CSS 변수·Tailwind 색상으로 내보내 디자인 시스템의 50~900 색 토큰으로 바로 적용합니다.
발표자료·인테리어 배색
PPT·포스터·공간 배색 등 비전공자도 보색·삼각 배색 규칙으로 안정적인 색 조합을 손쉽게 만듭니다.
자주 묻는 질문
컬러 팔레트 생성기는 어떤 도구인가요?
기준 색 하나만 고르면 색상환(HSL) 이론에 따라 보색·유사색·삼각·사각·단색 5가지 배색을 자동으로 추천하는 무료 온라인 도구입니다. 단순히 색 코드를 변환하는 도구가 아니라 '서로 어울리는 여러 색의 조합'을 찾아줍니다.
색상 코드 변환기와 무엇이 다른가요?
색상 코드 변환기는 한 가지 색을 HEX↔RGB↔HSL로 포맷만 바꿔줍니다. 반면 이 도구는 색상환 회전을 이용해 보색·유사색 등 '여러 색의 배색'을 추천하고, CSS/Tailwind 내보내기와 WCAG 대비 체크까지 제공합니다. '어울리는 색 찾기'가 목적이라면 이 도구가 맞습니다.
만든 팔레트를 코드로 가져갈 수 있나요?
네. CSS 사용자 정의 속성(:root 변수), Tailwind config 색상, SCSS 변수, JSON 네 가지 형식으로 한 번에 내보낼 수 있고, 색상 칩을 클릭하면 HEX·RGB·HSL 중 원하는 형식으로 개별 복사됩니다. PNG 이미지로 저장하거나 URL로 공유할 수도 있습니다.
색상 잠금(lock)과 랜덤은 어떻게 쓰나요?
마음에 드는 색의 자물쇠 버튼을 누르면 해당 색이 고정됩니다. 이후 랜덤 버튼을 누르거나 스페이스바를 치면 잠그지 않은 색만 새로 바뀝니다. 원하는 색을 하나씩 확정해 나가며 조합을 완성할 수 있습니다.
WCAG 대비 체크는 무엇인가요?
선택한 색 위에 흰색·검은색 글자를 올렸을 때의 명암 대비비(contrast ratio)를 계산해 접근성 기준(AA 4.5:1, AAA 7:1) 충족 여부를 알려줍니다. 웹·앱에서 글자가 잘 읽히는 색 조합인지 미리 확인할 수 있습니다.
입력한 색이 서버로 전송되나요?
아니요. 모든 색 계산과 팔레트 생성은 브라우저에서만 처리되며 서버로 어떤 데이터도 전송되지 않습니다. 최근 팔레트도 사용자 기기의 localStorage에만 저장됩니다.
개인정보 안내
이 도구의 모든 색 계산과 팔레트 생성은 사용자의 브라우저 안에서만 이루어집니다. 입력한 색이나 만든 팔레트는 서버로 전송되지 않으며, 최근 팔레트 기록은 오직 사용자 기기의 localStorage에만 저장됩니다. 따라서 개인정보 유출 걱정 없이 안심하고 사용할 수 있습니다.
댓글과 질문