색조합 사이트, 4곳 비교표와 팔레트 7색 순서
색조합 사이트 네 곳을 팔레트 생성 · 이미지 추출 · 모음 · 대비 검사로 나눠 비교하고, 주색 1 · 보조색 2 · 중립색 3 · 강조색 1로 브랜드 팔레트를 만드는 순서를 정리했습니다. 웹 대비 기준과 계산 예, 인쇄 CMYK 변환, PPT 테마 색 넣는 법까지 담았습니다.
색조합 사이트는 하나로 끝내기보다 팔레트 생성 · 이미지 추출 · 대비 검사 사이트를 이어 쓰는 편이 빠릅니다. 이 순서로 주색 1 · 보조색 2 · 중립색 3 · 강조색 1, 모두 7색의 브랜드 팔레트를 한자리에서 만들 수 있습니다. 사이트 기능과 무료 범위는 2026년 10월 15일 각 사이트 안내 기준입니다.
색조합 사이트 — 무엇을 쓰나요
네 곳을 역할로 나누면 생성과 추출은 앞의 두 곳, 방향 잡기는 모음 사이트, 마지막 확인은 대비 검사 사이트입니다.
| 사이트 | 하는 일 | 무료로 되는 것 · 제한 | 받는 값 |
|---|---|---|---|
| Adobe Color(color.adobe.com) | 색상환에서 기준 색을 고르고 보색 · 유사색 · 삼각 · 단색 · 분할 보색 규칙으로 팔레트 생성, 이미지에서 색 · 그라데이션 추출, 색각 이상 시뮬레이션, 대비 검사 | 페이지에서 바로 생성하고 라이브러리에 저장. 디자인에 팔레트를 자동으로 입히는 기능은 Adobe Express 유료 요금제 | HEX · RGB 등 |
| Coolors | 팔레트 생성기, 이미지에서 색 고르기, 대비 검사, 팔레트를 화면 예시에 입혀 보기 | 무료: 광고 표시, 한 번에 5색까지 생성, 팔레트 10개 저장 / 유료: 10색 생성, 저장 무제한, 팔레트 전체 대비 확인, 고급 내보내기 | 색 코드 |
| Color Hunt | 디자이너용 팔레트 모음을 색 · 분위기 태그로 둘러보기 | 둘러보기 | 팔레트 색 값 |
| WebAIM Contrast Checker | 글자색 · 배경색 HEX를 넣으면 대비 값과 WCAG AA · AAA 통과 여부를 보여 줌 | 페이지에서 바로 사용 | 대비 값(예: 4.54:1) |
인쇄용 CMYK 값은 네 곳 모두 주된 출력이 아니므로 아래 인쇄 절에서 따로 정합니다. 로고 · 서체와 함께 색을 세트로 정하는 법은 BI 디자인 글에 있습니다.
브랜드 색은 몇 개로 정하나요
역할로 나눈 7색이면 웹 · PPT · 상세페이지에 필요한 자리를 채울 수 있습니다. 면적 비율은 예시로 가정한 값입니다.
| 역할 | 개수 | 쓰는 곳 | 화면 면적(예시) |
|---|---|---|---|
| 주색 | 1 | 로고, 대표 버튼, 표지 | 10~20% |
| 보조색 | 2 | 그래프, 섹션 배경, 아이콘 | 10~20% |
| 중립색 | 3 | 본문 글자(가장 진한 색), 바탕(가장 밝은 색), 선 · 표 테두리(중간 회색) | 60~70% |
| 강조색 | 1 | 할인 · 알림 · 주의 표시 | 5% 안쪽 |
강조색은 한 화면에 한두 군데만 씁니다. 여러 곳에 쓰면 강조가 아니라 배경이 됩니다.
색조합 사이트로 팔레트는 어떤 순서로 만드나요
- 주색 후보 뽑기 — 로고 원본이나 대표 제품 사진을 이미지 추출 기능에 올려 후보 색 3~5개를 받습니다.
- 주색 하나 정하기 — 흰 바탕과 어두운 바탕 양쪽에서 알아보기 쉬운 색을 고릅니다.
- 보조색 2개 — 색상환 조화 규칙으로 받습니다. 유사색은 차분하게, 보색은 대비를 강하게 만듭니다.
- 중립색 3개 — 순수한 검정 · 회색 대신 주색 기운을 조금 섞은 아주 어두운 색 · 아주 밝은 색 · 중간 회색으로 정합니다.
- 강조색 1개 — 주색과 색상환 반대쪽에서 고릅니다.
- 대비 검사 — 글자로 쓸 조합을 모두 대비 검사 사이트에 넣어 봅니다(다음 절).
- 값 정리 — 색마다 HEX · RGB · CMYK · 용도를 한 표에 적어, PPT · 웹 · 인쇄 담당자에게 같은 파일을 보냅니다.
글자와 배경 색 대비는 몇 이상이어야 하나요
웹 접근성 기준 WCAG 2.2는 AA 등급에서 아래 대비를 요구합니다. 대비 값은 두 색의 밝기 차이를 1:1(차이 없음)부터 21:1(흰색과 검정)까지로 나타낸 수치입니다.
| 대상 | AA 기준 | 참고 |
|---|---|---|
| 본문 글자 | 4.5:1 이상 | 7:1 이상이면 AAA |
| 큰 글자(18pt · 약 24px 이상, 굵게는 14pt · 약 18.5px 이상) | 3:1 이상 | AAA는 4.5:1 |
| 버튼 테두리 · 아이콘 · 그래프 같은 UI · 그래픽 | 맞닿은 색과 3:1 이상 | 비활성 요소 · 순수 장식은 제외 |
| 로고 · 브랜드 이름 글자 | 기준 없음 | 로고 안 글자는 대비 기준에서 빠짐 |
예를 들어 A 브랜드 주색을 청록 #14B8A6으로 정했다면, 흰 바탕 위 글자로 쓸 때 대비가 2.48:1이라 본문 글자 기준(4.5:1)에 못 미칩니다. 같은 계열을 어둡게 한 #0F766E는 5.47:1이라 글자에 쓸 수 있습니다. 그래서 팔레트에 「글자용 주색」을 한 칸 더 둡니다. 홈페이지 전체에서 먼저 고칠 접근성 항목은 웹 접근성 글에 정리돼 있습니다.
인쇄할 때 색이 달라지지 않게 하려면 어떻게 하나요
색조합 사이트에서 받는 값은 대부분 화면용 HEX · RGB입니다. 인쇄물은 CMYK 잉크나 별색(따로 조색한 잉크)으로 찍기 때문에, 화면에서 아주 선명한 형광 계열 색은 CMYK로 옮기면 탁해질 수 있습니다.
- CMYK 값은 일러스트레이터 같은 편집 프로그램에서 인쇄소가 알려 준 색 설정으로 바꿔 정하고, 화면 값과 따로 적습니다.
- 로고처럼 색이 정확해야 하는 곳은 별색 번호를 함께 정해 두면 인쇄소가 달라도 같은 잉크로 찍을 수 있습니다.
- 첫 인쇄 전에 교정쇄(시험 인쇄)로 색을 확인합니다.
화면용과 인쇄용 파일의 해상도 · 색 모드 차이는 인쇄용과 화면용 이미지 차이 글에 있습니다.
PPT 색조합은 어떻게 넣나요
파워포인트에서는 팔레트를 테마 색으로 넣어 둡니다. 테마 색은 텍스트 · 배경 4칸, 강조(악센트) 6칸, 하이퍼링크 2칸으로 되어 있습니다.
- 디자인 탭 → 변형 그룹의 아래쪽 화살표 → 색 → 색 사용자 지정을 엽니다.
- 새 테마 색 만들기 창에서 칸마다 색을 바꿉니다. 정확한 값은 다른 색의 사용자 지정 탭에 입력합니다.
- 이름을 적고 저장합니다. 저장한 색 조합은 색 목록에 나타납니다.
- 텍스트 · 배경 4칸 — 중립색 3개와 주색의 아주 어두운 색
- 강조 1 → 주색, 강조 2 · 3 → 보조색, 강조 4 → 강조색, 강조 5 · 6 → 중간 회색 · 글자용 주색
- 하이퍼링크 2칸 — 글자용 주색, 방문한 링크는 보조색
자주 묻는 질문
PPT 색조합은 몇 색이 적당한가요?
본문 글자 · 바탕 · 주색 · 강조색, 네 가지가 기본입니다. 그래프에 계열이 여럿이면 보조색 2개를 더하고, 그 밖에는 같은 색의 밝기만 바꿔 씁니다. 한 장에 쓰는 색이 늘수록 강조색이 눈에 덜 띕니다.
색각 이상이 있는 사람도 구분하게 하려면 어떻게 하나요?
색만으로 정보를 나누지 않습니다. 그래프는 색에 더해 무늬 · 글자 · 위치로 계열을 구분하고, 빨강 · 초록처럼 헷갈리기 쉬운 짝은 밝기 차이를 크게 둡니다. Adobe Color에는 팔레트가 색각 이상 유형별로 어떻게 보이는지 미리 보는 기능이 있습니다.
이미 쓰는 브랜드 색이 대비 기준에 못 미치면 바꿔야 하나요?
로고 안 글자는 대비 기준에서 빠지므로 로고는 그대로 둡니다. 웹 · PPT에서 그 색을 본문 글자나 버튼 글자로 쓸 때만 같은 계열의 어두운 색을 글자용으로 따로 정합니다. 위 예처럼 #14B8A6 대신 #0F766E를 글자에 쓰는 식입니다.
오늘 할 일
로고 원본 파일에서 주색 HEX 값을 뽑아 대비 검사 사이트에 흰 바탕(#FFFFFF)과 함께 넣어 보십시오. 4.5:1에 못 미치면 같은 계열의 글자용 색을 하나 더 정하는 것이 팔레트의 첫 칸입니다.
이어서 읽기 — 상업용 무료 폰트, 배포처별 사용 범위 비교표 · 무드보드 만들기, 12장 고르는 순서와 도구표 · 브랜드 가이드라인, 12장 목차와 금지 예시 8개
