GUIDE · 색 조합
뻔한 보라색을 끊는 밤티 탈출 색 조합 사이트 모음
읽는 데 5분2026-09-25 공개
하루 6시간 만에AI 기초부터 나만의
서비스까지 완성
클로드에게 화면을 맡길 때마다 보라색 그라데이션이 나온다면, 색을 정해 주지 않고 시켰기 때문일 가능성이 큽니다. 이 자료는 색 조합을 고르는 사이트 다섯 곳과, 고른 색 코드를 클로드에 넣는 프롬프트를 담았습니다.
Quick Start
클로드는 색을 따로 정해 주지 않으면 가장 무난한 색으로 화면을 채웁니다. 쓸 색 코드 몇 개와 각 색의 역할(배경·글자·포인트)을 함께 주면 화면 전체가 그 기준을 따릅니다. 아래 다섯 곳은 모두 브라우저에서 바로 열 수 있고, 일부 기능은 가입이나 유료 플랜이 필요합니다.
- STEP 1에서 만들 화면에 맞는 사이트를 고릅니다.
- STEP 2에서 색 조합을 골라 색 코드(HEX)를 복사합니다.
- STEP 3에서 색 코드와 프롬프트를 클로드에 함께 넣습니다.
STEP 1 · 3분만들 화면에 맞는 사이트를 고른다
| 사이트 | 이럴 때 | 특징 |
|---|---|---|
| Coolors | 빠르게 여러 조합을 넘겨 보고 싶을 때 | 생성기에서 스페이스바를 누를 때마다 새 팔레트가 나옴. 이미지 색 추출·대비 검사 도구도 있음 |
| Color Hunt | 분위기부터 정하고 싶을 때 | 사람이 직접 고른 팔레트 모음. Pastel·Vintage·Retro 같은 태그로 골라 봄 |
| Khroma | 내 취향에 맞춘 조합이 필요할 때 | 좋아하는 색 50개를 고르면 AI가 취향을 학습해 조합을 만듦. 모바일에서는 데스크톱 접속을 안내함 |
| Huemint | 색을 어디에 쓸지 헷갈릴 때 | 머신러닝으로 배경·전경·포인트 역할에 맞춰 색을 생성. 웹사이트·브랜드 템플릿에 입혀 보여 줌 |
| Realtime Colors | 실제 화면에서 확인하고 싶을 때 | 고른 색과 폰트를 예시 웹사이트에 바로 적용. CSS·SCSS 등으로 내보내기 |
STEP 2 · 3분색 조합을 고르고 색 코드를 복사한다
이 단계에서는 색을 3~5개만 고릅니다. 밝은 배경색 하나, 진한 글자색 하나, 눈에 띄는 포인트색 하나가 기본입니다. 각 사이트에서 색을 누르면 #F28482 같은 HEX 코드를 복사할 수 있습니다. Huemint와 Realtime Colors는 역할이 이미 나뉘어 있어 그대로 옮기면 됩니다.
STEP 3 · 5분색 코드와 프롬프트를 함께 넣는다
아래 색만 써서 [우리 서비스 한 줄 설명]의 랜딩 페이지 첫 화면을 만들어줘. - 배경: #F7EDE2 - 글자: #2F3E3A - 포인트(버튼·강조): #F28482 - 보조: #84A59D, #F6BD60 이 목록에 없는 색, 그라데이션, 보라색 계열은 쓰지 마. 포인트색은 버튼과 핵심 강조에만 쓰고, 색 코드는 CSS 변수로 한곳에 모아줘.
성공하면 CSS 변수에 넣은 색 코드가 보이고, 화면에 그 색만 쓰입니다.
방금 화면에서 그라데이션, 이모지 아이콘, 색이 다른 카드 여러 개처럼 흔한 요소를 빼줘. 배경과 글자는 두 색만 쓰고, 포인트색은 한 화면에 한두 곳만 남겨서 다시 만들어줘.
알아 둘 한계
- 색 조합만 바꿔도 화면 인상은 크게 달라지지만, 여백·글자 크기 같은 구성은 따로 다듬어야 합니다.
- 글자색과 배경색의 대비가 낮으면 읽기 어렵습니다. Coolors·Khroma 등에서 대비(접근성) 정보를 함께 확인하세요.
- 사이트별 무료 범위와 유료 플랜 조건은 바뀔 수 있습니다. 이 글은 2026년 9월 25일 각 사이트를 직접 열어 본 내용 기준입니다.
공식 참고 자료
- Coolors 공식 — 팔레트 생성기
- Color Hunt 공식 — 직접 고른 팔레트 모음
- Khroma 공식 — 취향 학습 AI 색 조합
- Huemint 공식 — 역할별 색 생성
- Realtime Colors 공식 — 실제 화면에 색 입혀 보기