색상 팔레트 도구
색상 팔레트
선택한 색상 정보
접근성 정보
색맹 시뮬레이션
※ 색상을 선택하고 팔레트 유형을 변경한 후 ‘팔레트 생성’ 버튼을 눌러보세요.
※ 팔레트의 색상을 클릭하면 해당 색상이 선택됩니다.
색상 조합을 빠르게 확인하는 팔레트 가이드
기준 색상 하나로 HEX·RGB·HSL과 팔레트를 함께 확인하세요
색상 팔레트 도구는 기준 색상을 고르면 단색, 유사색, 보색, 삼색, 사색, 분할 보색 조합을 만들고 각 색상의 코드와 대비 정보를 함께 보여주는 도구입니다. 로고, 버튼, 배너, 문서 표지처럼 색 조합을 빠르게 비교해야 할 때 사용하면 좋습니다.
색상 팔레트 도구로 할 수 있는 일
색상 코드 입력
색상 선택기, HEX 코드, RGB 값, HSL 값을 서로 연결해 기준 색상을 빠르게 맞출 수 있습니다.
6가지 팔레트 생성
단색, 유사색, 보색, 삼색, 사색, 분할 보색 조합을 선택해 여섯 개 색상으로 비교합니다.
바로 복사와 재선택
생성된 색상을 클릭해 새 기준 색상으로 삼거나, HEX/RGB 값을 복사해 디자인 도구나 CSS에 옮길 수 있습니다.
대비와 표시 특성 확인
흰색·검은색 배경 대비, 색상 계열, web-safe 여부, 색각 시뮬레이션 참고값을 함께 확인합니다.
사용 방법
- 기준 색상 선택 — 색상 선택기를 누르거나 HEX, RGB, HSL 중 편한 형식으로 값을 입력합니다.
- 팔레트 유형 선택 — 단색, 유사색, 보색처럼 원하는 조합 방식을 고릅니다.
- 팔레트 생성 — 버튼을 누르거나 입력값을 바꾸면 기준 색상을 포함한 6색 조합이 표시됩니다.
- 색상 확인과 복사 — 필요한 색상의 HEX/RGB 값을 복사하고, 팔레트 색상을 클릭해 다시 기준 색상으로 비교합니다.
- 대비 확인 — 텍스트나 버튼에 사용할 색이라면 흰색·검은색 배경 대비와 색각 시뮬레이션을 함께 확인합니다.
팔레트가 만들어지는 방식
도구는 입력된 색상을 먼저 정상적인 HEX와 RGB 범위로 정리한 뒤 HSL 색상값으로 변환합니다. 그 다음 팔레트 유형에 따라 색상각을 이동하고 밝기를 조금 조정해 서로 다른 조합을 만듭니다.
3자리 HEX는 6자리로 확장하고, RGB 값은 0–255 범위 안으로 보정합니다.
색상각(H), 채도(S), 밝기(L)를 기준으로 색상 관계를 계산합니다.
같은 색이 반복되지 않도록 확인하고 부족한 경우 보조 변형 색을 채웁니다.
| 팔레트 유형 | 기준 | 활용 예 |
|---|---|---|
| 단색 | 같은 색상각에서 밝기 차이를 만듭니다. | 차분한 카드, 배경, 단계 표현 |
| 유사색 | 기준 색 주변의 가까운 색상각을 사용합니다. | 자연스럽고 부드러운 브랜드 톤 |
| 보색 | 색상환에서 반대편에 가까운 색을 함께 봅니다. | CTA, 강조 버튼, 대비가 필요한 배너 |
| 삼색·사색 | 색상환을 넓게 나누어 여러 축의 색을 만듭니다. | 일러스트, 인포그래픽, 구역 구분 |
| 분할 보색 | 보색 주변 두 방향의 색을 사용합니다. | 강조감은 유지하되 보색보다 부드러운 조합 |
대비와 접근성을 함께 확인하세요
글자색과 배경색의 대비가 낮으면 작은 글씨가 흐려 보일 수 있습니다.
강조 색을 선택할 때는 hover, focus, disabled 상태까지 같이 확인하는 것이 안전합니다.
색만으로 의미를 구분하지 말고 라벨, 아이콘, 패턴을 함께 쓰면 오해를 줄일 수 있습니다.
사용 전 알아둘 점
대비 수치는 참고 기준입니다. 실제 페이지에서는 글자 크기, 폰트 굵기, 배경 이미지, 주변 여백에 따라 읽기 쉬움이 달라질 수 있습니다.
색각 시뮬레이션은 근사값입니다. 최종 UI는 색상 외에도 텍스트, 아이콘, 형태, 상태 메시지를 함께 제공하는 방식으로 확인하는 것이 좋습니다.
web-safe 표시는 역사적 참고값입니다. 현대 브라우저에서는 대부분 필수 조건이 아니지만 제한된 팔레트나 오래된 기준을 맞출 때 참고할 수 있습니다.
자주 묻는 질문
HEX, RGB, HSL 중 어떤 값을 기준으로 써야 하나요?
작업 중인 도구에 맞추면 됩니다. 웹/CSS에 바로 넣을 때는 HEX가 간단하고, 채널 값을 조정해야 할 때는 RGB, 밝기나 색상각을 이해하며 팔레트를 만들 때는 HSL이 편합니다.
팔레트 유형을 바꾸면 색상이 왜 달라지나요?
도구는 기준 색상의 HSL 색상각을 이동해 유사색, 보색, 삼색, 사색, 분할 보색 조합을 만듭니다. 같은 기준 색이어도 색상각을 어떻게 돌리느냐에 따라 분위기가 달라집니다.
대비 비율만 통과하면 접근성이 충분한가요?
대비 비율은 중요한 출발점이지만 전부는 아닙니다. 글자 크기, 배경 패턴, 버튼 상태, 색각 이상 사용자의 구분 가능성까지 함께 확인하는 것이 좋습니다.
web-safe 색상은 꼭 사용해야 하나요?
현대 브라우저에서는 대부분 꼭 필요하지 않습니다. 다만 제한된 팔레트나 오래된 디자인 기준을 맞춰야 할 때 참고 정보로 활용할 수 있습니다.