색상 팔레트 생성기
클릭 한 번이면 어울리는 5색 조합을 바로 만들어 드려요.
색상 칩을 클릭하면 HEX 코드가 복사돼요
마음에 드는 조합은 ‘보관함에 저장’으로 담아 두면 이 브라우저에서 다시 열어볼 수 있어요.
제목 텍스트
본문 텍스트가 이 팔레트로 어떻게 보이는지 확인하세요.
설명
버튼을 누르거나 스페이스바를 누르면 어울리는 5색 팔레트가 새로 만들어집니다. 색상 칩을 클릭하면 HEX 코드가 복사되고, 그리드 아래 ‘선택 색상’ 영역에서 같은 색의 RGB·HSL 값도 복사할 수 있습니다. 팔레트 전체는 CSS 변수나 PNG 이미지로 가져갈 수 있습니다.
관련 도구
색상 팔레트 도구는 디자인 작업에서 서로 잘 어울리는 색상 조합을 빠르게 찾을 수 있도록 도와줍니다. 웹사이트, 포스터, 브랜드 아이덴티티 등 시각 결과물을 만들 때 색상 선택에서 막히는 경우가 많은데, 이 도구는 버튼 한 번으로 색상환에서 30°씩 회전시킨 유사색 계열 5색을 명도가 밝아지는 순서로 만들어 보여 줍니다. 색채 이론 지식이 없어도 마음에 드는 조합이 나올 때까지 가볍게 넘겨 보며 고를 수 있습니다.
사용 방법
‘새 팔레트 생성’ 버튼을 누르거나 스페이스바를 누르면 5색 팔레트가 새로 만들어집니다. 색상 칩을 클릭하면 HEX 코드가 바로 복사되고, 그리드 아래 ‘선택 색상’ 영역에서 같은 색의 RGB·HSL 값도 각각 복사할 수 있습니다. ‘5색 한번에 복사’와 ‘CSS 변수로 복사’는 팔레트 전체를 한 번에 가져갈 때 쓰고, ‘이미지로 저장’은 5색과 HEX 코드가 담긴 PNG 카드를 내려받습니다. 마음에 드는 조합은 ‘보관함에 저장’으로 이 브라우저에 담아 두거나 ‘링크 공유’로 같은 팔레트가 열리는 주소를 만들어 전달하세요.
이럴 때 유용해요
브랜드 색을 정한 뒤 배경색이나 강조색의 방향을 잡을 때 참고 자료로 쓰기 좋습니다. 웹 UI 설계 시 주 색상(Primary), 보조 색상(Secondary), 액센트 색상을 일관성 있게 잡아야 하는 상황에도 활용도가 높은데, 명도 순으로 정렬된 5색을 그대로 단계별 색으로 옮겨 쓸 수 있기 때문입니다. 마케팅 배너나 SNS 카드뉴스처럼 단발성 디자인 작업에서 색상을 빠르게 결정해야 할 때도 시간을 크게 아낄 수 있습니다. Figma나 포토샵 같은 툴을 열기 전에 배색 방향을 먼저 확정해 두면 작업 흐름이 훨씬 매끄러워집니다.
알아두면 좋은 점
배색 방식 중 ‘보색(Complementary)’은 대비가 강해 시선을 끄는 데 효과적이지만 두 색을 동등한 비율로 쓰면 눈이 피로해집니다. 보통 주 색상 60%, 보조 색상 30%, 강조 색상 10% 비율로 사용하는 ‘60-30-10 법칙’을 함께 적용하면 안정적인 결과를 얻을 수 있습니다. 이 도구가 만드는 조합은 유사색 계열이라 톤이 부드러운 편이므로, 강한 대비가 필요하다면 팔레트의 양 끝 색(가장 어두운 색과 가장 밝은 색)을 짝지어 쓰는 것이 좋습니다.
자주 묻는 질문
HEX 코드가 무엇인가요?
보색과 유사색의 차이가 뭔가요?
팔레트에서 생성된 색상은 어떻게 복사하나요?
회원가입 없이 팔레트를 저장할 수 있나요?
웹 접근성(WCAG)을 고려한 색상 선택은 어떻게 해야 하나요?
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 보관함에 저장한 팔레트는 이 브라우저에만 보관됩니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
색상 팔레트 생성기 사용법
버튼을 누르거나 스페이스바를 누를 때마다 무작위 기준 색에서 30°씩 회전한 5색이 명도가 밝아지는 순서로 만들어집니다. 색상 칩을 클릭하면 HEX 코드가 복사되고, 그리드 아래 ‘선택 색상’ 영역에서 같은 색의 RGB·HSL 값을 각각 복사할 수 있습니다. 팔레트 전체는 ‘5색 한번에 복사’·‘CSS 변수로 복사’로 가져가거나 ‘이미지로 저장’으로 PNG 카드를 내려받을 수 있고, ‘오늘의 팔레트’는 날짜를 기준으로 하루 동안 같은 한 벌이 나옵니다. 마음에 드는 조합은 보관함에 저장해 두었다가 다시 불러오세요.
배색 조합의 작동 원리
이 도구는 색을 색상환(Hue)·채도(Saturation)·명도(Lightness)로 나누는 HSL 모델로 계산합니다. 무작위로 고른 기준 색상에서 색상환을 30°씩 회전시켜 5개의 색을 뽑고, 채도는 65%로 고정한 채 명도만 35%에서 67%까지 8%씩 높입니다. 그래서 결과는 늘 ‘유사색(Analogous) 계열 + 명도 단계’ 조합이 되어 서로 부딪히지 않습니다. 아래 표는 색채 이론에서 자주 쓰이는 배색 규칙을 정리한 참고 자료입니다.
| 배색 규칙 | 색상환 각도 | 느낌 |
|---|---|---|
| 보색(Complementary) | +180° | 강한 대비, 주목도 높음 |
| 유사색(Analogous) | ±30° | 부드럽고 통일감 |
| 삼각(Triadic) | +120°·+240° | 균형 잡힌 다채로움 |
| 단색(Monochrome) | 0°, 명도만 변화 | 차분한 톤온톤 |
이 중 이 도구가 사용하는 방식은 유사색(30°씩 회전)에 명도 단계를 더한 형태입니다. 보색·삼각 배색이 필요하다면 여기서 얻은 색 하나를 기준으로 다른 색상 도구에서 각도를 직접 계산해 쓰면 됩니다.
이럴 때 활용하세요
블로그·PPT의 강조색을 정할 때 팔레트에서 가장 진한 색을 제목에, 가장 밝은 색을 배경에 쓰면 어색하지 않게 정리됩니다. 쇼핑몰 상세페이지나 배너를 만들 때는 명도 차가 가장 큰 양 끝 색을 버튼·할인 문구에 배치해 눈에 띄게 할 수 있습니다. UI 디자인이라면 5색의 명도 단계를 배경·카드·구분선·본문 텍스트 순으로 그대로 옮겨 쓰기 좋습니다. 뽑아낸 HEX 값은 CSS 변수 형태로 한 번에 복사해 피그마 스타일이나 스타일시트에 붙여넣으면 작업 시간이 줄어듭니다.
실전 팁
세 가지 색을 모두 같은 비중으로 쓰기보다 주색 60%·보조색 30%·강조색 10% 비율을 기준으로 삼으면 안정적입니다. 배경에 텍스트를 올릴 때는 두 색의 명도 차이를 충분히 두어야 읽기 편합니다. 채도가 높은 색만 넓게 쓰면 눈이 피로하니, 밝은 쪽 색을 여백 역할로 크게 배치하는 것이 좋습니다. 마음에 드는 조합은 ‘보관함에 저장’으로 담아 두면 여러 시안을 나란히 비교하기 쉽습니다.
자주 묻는 질문
HEX와 RGB 중 어떤 값을 복사해야 하나요?
웹·CSS 작업이면 HEX(#RRGGBB)가 간편하고, 일부 디자인 툴이나 영상 편집기는 RGB 값을 요구합니다. 두 값은 같은 색을 다르게 표기한 것뿐이라 결과 색은 동일하며, 칩을 클릭한 뒤 ‘선택 색상’ 영역에서 원하는 형식을 골라 복사하면 됩니다.
만든 팔레트가 다음에 접속해도 남아 있나요?
‘보관함에 저장’을 누른 팔레트는 브라우저의 로컬 저장소에 보관되므로 같은 기기·같은 브라우저에서 다시 볼 수 있습니다. 다른 기기로 옮기려면 ‘링크 공유’로 만든 주소를 보내거나 HEX 코드를 따로 메모해 두는 것이 안전합니다.
배색 규칙대로 뽑으면 무조건 예쁜 조합이 나오나요?
색상환 각도 기반 규칙은 조화로운 출발점을 제시할 뿐 정답은 아닙니다. 마음에 드는 결과가 나올 때까지 여러 번 새로 생성해 보고, 최종 채도·명도 조정은 디자인 툴에서 다듬는 과정이 필요합니다.
인쇄물에도 이 색을 그대로 쓸 수 있나요?
이 도구의 색은 화면용 RGB 기준입니다. 인쇄는 CMYK로 변환되면서 색이 달라질 수 있으니, 인쇄가 목적이라면 실제 출력 색상표로 최종 확인하는 것이 좋습니다.