사용 방법
- 1
조화 선택
유사색, 보색 등 색상 조화 규칙을 선택해 색상 간 관계를 정의하세요.
- 2
분위기 선택
분위기 선택기로 파스텔, 비비드, 다크 모드 중 브랜드 분위기에 맞게 설정하세요.
- 3
생성
생성 버튼을 눌러 팔레트를 만드세요. 마음에 드는 색상을 잠그고 나머지를 다시 생성할 수 있습니다.
- 4
내보내기
개별 Hex 코드를 복사하거나 내보내기로 Tailwind CSS 설정 전체를 가져오세요.
색상 이론 가이드
조화 이해하기
- 유사색
색상환에서 인접한 색상들로 구성됩니다. 차분하고 편안한 디자인을 만들어냅니다. 자연이나 조용한 테마에 잘 어울립니다.
- 보색
색상환에서 반대편에 위치한 색상들입니다. 강한 대비와 임팩트를 줍니다. 콜투액션이나 강조 요소에 적합합니다.
- 삼각 배색
색상환에서 균등하게 배치된 세 가지 색상입니다. 조화를 유지하면서도 높은 대비를 제공합니다.
- 분할 보색
보색 구성의 변형으로, 기준 색상과 보색에 인접한 두 색상을 사용합니다. 강한 대비지만 긴장감이 덜합니다.
- 단색
단일 색상의 명도와 채도 변형으로 구성됩니다. 깔끔하고 우아하며 차분한 느낌을 줍니다.
- 무작위
정해진 규칙 없이 완전히 무작위 색상을 사용합니다. 예상치 못한 영감이나 브레인스토밍에 좋습니다.
분위기 탐색
- 기본
균형 잡힌 채도와 밝기입니다. 일반적인 웹 디자인과 UI 컴포넌트에 적합합니다.
- 파스텔 드림
높은 밝기와 낮은 채도입니다. 부드럽고 편안하며 라이프스타일, 웨딩, 봄 테마에 완벽합니다.
- 네온 비비드
높은 채도와 중간 밝기입니다. 에너지 넘치고 눈길을 끄는 디자인에 어울립니다.
- 다크 모드
낮은 밝기와 탁한 톤입니다. 깊고 신비로우며 현대적인 느낌을 줍니다. OLED 화면 배터리 절약에도 효과적입니다.
- 빈티지 레트로
채도가 낮고 약간 따뜻한 톤입니다. 향수를 불러일으키는 클래식한 느낌으로 아티산 브랜드에 잘 맞습니다.
어울리는 색상 조합 고르기
소개
색상 선택은 디자인의 성패를 가릅니다. 무작위 색상 조합은 혼란스러워 보이고, 색상 이론에 기반한 의도적 팔레트는 의도적이고 전문적으로 느껴집니다. 본 도구는 기본 색상 하나에서 색상 이론 관계를 기반으로 조화로운 팔레트를 생성합니다: 보색(색상환 정반대), 유사색(인접), 삼색조(120° 간격), 사색조(4개). 또한 업로드 이미지에서 팔레트를 추출하고 CSS나 디자인 파일에 바로 쓸 수 있는 hex/RGB/HSL 값을 표시합니다.
작동 원리
색상 이론의 수학적 표현: HSL 색상에는 색조(0~360°), 채도, 명도. 보색 = 기본 색조 + 180°. 삼색조 = 기본 + 120°와 240°. 유사색 = 기본 ± 30°. 도구가 수학적으로 계산 + 결과 팔레트를 각 색의 클립보드 복사 기능과 함께 표시. 이미지 기반 팔레트는 색상 양자화(k-means 클러스터링)로 업로드 이미지의 가장 지배적 색상을 찾습니다.
언제 유용한가
웹사이트나 앱 UI 디자인(주요·보조·강조색), 브랜드 아이덴티티 색상 선택, 슬라이드 덱 시각 자료 조율, 방 페인트 색상 선택(한 벽에서 시작해 보색 마감), 데이터 시각화 색상 체계(범주형 또는 순차), 그래픽용 테마 생성 — 인스타그램 게시물·유튜브 썸네일·블로그 헤더.
자주 묻는 질문
보색과 유사색의 차이는?
보색은 색상환 정반대(파랑 + 주황) — 고대비, 시각적으로 강렬. 유사색은 인접(파랑 + 청록 + 초록) — 차분, 통일감. 보색은 강조에, 유사색은 배경에 사용.
디자인에 색상 몇 개를 써야 하나요?
60-30-10 규칙: 60% 지배색(배경), 30% 보조색, 10% 강조색. 대부분 전문 디자인이 총 3~5색 사용. 5개 초과부터는 명시적으로 활기찬 발랄한 느낌을 의도하지 않는 한 혼란스러워집니다.
WCAG 대비 요구사항은?
접근성을 위해 텍스트와 배경의 대비비가 4.5:1 이상(큰 텍스트는 3:1). 흰색 위 검정은 21:1. 밝은 회색 위 진한 회색은 종종 실패 — 출시 전 대비 도구로 확인하세요.
추천 도구
유용할 수 있는 엄선된 도구