유사색 생성기
기준 색상과 색상 간격을 선택하세요. 도구는 기준 색상과 선택한 각도만큼 양옆으로 떨어진 이웃 색상을 보여 줍니다. 가운데 세 색이 고전적인 유사색 조합입니다. 여기에 두 배 각도에 있는 바깥쪽 두 색을 더해 폭넓게 활용할 수 있는 5색 팔레트도 함께 제시합니다. 유사색 팔레트는 가까운 색상끼리 지배적인 기조를 공유하므로 고전적인 배색 중에서도 조화롭습니다. 그래서 자연(노을, 숲)과 에디토리얼 디자인에서 자주 볼 수 있습니다.
유사색 팔레트를 만드는 방법
-
1
기준 색상 선택
hex 코드, RGB 삼원색 값 또는 HSL 값을 붙여넣으세요. 채도가 있는 중간 톤 색상이 가장 풍부한 유사색 세트를 만듭니다.
-
2
오프셋 각도 선택
30°는 고전적인 유사색 간격입니다. 15°는 더 촘촘해 거의 단색에 가깝고, 45°는 분할 보색에 가까워지기 시작합니다.
-
3
명도 변화 조정
필요하면 세 색상 사이의 명도를 달리해 평평한 팔레트를 피하세요. 양쪽 색상을 밝게 하면 더 부드럽고 에디토리얼한 느낌이 납니다.
-
4
색상 내보내기
hex, RGB 또는 HSL을 복사하세요. CSS 변수, Figma 스타일, 인쇄 사양서에 유용합니다.
고전 배색과 유사색
| 배색 | 각도 관계 | 특징 |
|---|---|---|
| 단색 | 0°(같은 색상, 명도·채도 변화) | 차분하고 통일감 있음 |
| 유사색 | 양쪽으로 30° | 조화롭고 자연스러움 |
| 보색 | 180° 떨어짐 | 강한 대비, 긴장감 |
| 분할 보색 | 기준색 + 보색 양옆 두 색 | 대비와 미묘함 |
| 삼색 배색 | 120° 떨어짐 | 균형 있고 생동감 있음 |
| 사색 배색 | 보색 두 쌍 | 풍부하고 복잡함 |
자연에서 볼 수 있는 유사색 팔레트 예시
- 노을: 노랑 → 주황 → 빨강주황(따뜻한 쪽으로 30°씩 이동).
- 숲: 연두 → 초록 → 청록.
- 바다: 청록 → 파랑 → 청보라.
- 가을: 빨강주황 → 주황 → 노랑주황.
유사색 세트로 디자인하기
- 한 색을 주조색으로 정해 면적의 60%에 쓰고, 두 번째 색은 강조색(30%), 세 번째 색은 포인트색(10%)으로 사용하세요. 이른바 “60-30-10” 규칙입니다.
- 본문 텍스트와 UI 외곽 요소에는 유사색을 중립색(흰색, 검정, 따뜻한 회색)과 함께 사용하세요.
- 큰 영역에 채도가 같은 유사색 세 가지를 똑같이 쓰는 것은 피하세요. 탁해 보입니다. 양쪽 색상과 기준 색상 사이의 명도나 채도를 달리하세요.
색 공간과 각도 계산
30° 오프셋은 HSL 또는 HSV 색상 공간에서 계산합니다. 두 공간 모두 색상을 각도(0-360°)로 다룹니다. RGB에서 색상환 연산은 동작하지 않습니다. HSL로 변환하고, 색상을 회전한 뒤 다시 변환해야 합니다. 이 도구가 내부에서 하는 일이 바로 그것입니다. CSS, 디자인 도구, 인쇄 워크플로가 선호하는 형식이 다르기 때문에 세 가지 표기법 모두로 출력합니다.
자주 묻는 질문
단색은 하나의 색상에 서로 다른 명도와 채도를 적용합니다(남색, 파랑, 하늘색). 유사색은 색상환에서 이웃한 서로 다른 세 색상을 사용합니다(청록, 파랑, 청보라). 유사색이 시각적 다양성이 더 큽니다.
유사색은 CMYK 잉크 조합이 서로 겹칠 수 있어 인쇄에서 대비가 줄어듭니다. 소프트 프루핑 버전을 확인하고, 인쇄 작업에서는 간격을 30°에서 40°로 늘리는 것도 고려하세요.
예. 다만 세 색 중 하나를 지배적인 브랜드 색상으로 두고 나머지 둘은 보조 역할(배지, 강조)에 두세요. 세 색을 모두 주요 UI 동작에 사용하면 사용자가 어떤 색을 주요 행동 유도(CTA)와 연결해야 할지 혼란스러워합니다.
가운데 세 색은 기준 색상과 선택한 각도만큼 양옆으로 떨어진 이웃 색상으로 이루어진 고전적인 유사색 조합입니다. 바깥쪽 두 색은 그 두 배 각도에 있으며 팔레트를 넓혀 쓰고 싶을 때 선택할 수 있는 추가 색상입니다. 기본 간격이 30°이므로 가운데 조합은 ±30°, 바깥쪽 두 색은 ±60°에 놓입니다.
관련 도구
불 대수 간소화 도구
Karnaugh map과 Quine-McCluskey 알고리즘으로 불 대수 식을 간소화합니다. 모든 최소화 단계와 최종 SOP/POS 형태를 보여줍니다.
랜덤 색상 팔레트 생성기
2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.
랜덤 영어 글자 생성기
A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.
Base64 → Hex 변환기
Base64 문자열을 실제 바이트로 디코딩한 뒤 16진수로 표현합니다. 토큰, 키, 인증서, JWT를 살펴볼 때 유용합니다.
2진수 8진수 변환기
비트를 세 개씩 묶어 2진수를 8진수로 변환합니다. Unix 권한, 레거시 시스템, 간결한 숫자 표시에 유용합니다.
BBCode → HTML 변환기
BBCode(게시판 마크업)를 깔끔한 HTML로 변환합니다. 서식 태그, 목록, 인용, 코드, 이미지, 링크, 표를 처리합니다.