색상 팔레트 도구
색상 팔레트
선택한 색상 정보
접근성 정보
색맹 시뮬레이션
적색맹 (Protanopia)
녹색맹 (Deuteranopia)
청색맹 (Tritanopia)
흑백 (Grayscale)
※ 색상을 선택하고 팔레트 유형을 변경한 후 ‘팔레트 생성’ 버튼을 눌러보세요.
※ 팔레트의 색상을 클릭하면 해당 색상이 선택됩니다.
색상 팔레트 가이드
기준 색상 하나에서 팔레트와 대비를 같이 확인합니다
색상 팔레트 도구는 한 가지 기준 색을 HEX, RGB, 색상 선택기로 맞춘 뒤 여섯 색 팔레트와 대비, web-safe 참고값, 색각 시뮬레이션을 한 화면에서 보여줍니다. 브랜드 시안, 버튼 색, 차트 색처럼 “이 색을 써도 되는지”를 빠르게 살펴볼 때 입력과 결과를 오가며 확인할 수 있습니다.
색상을 정하면 팔레트와 대비 결과가 바로 따라옵니다
- 기준 색상을 먼저 맞춥니다. 색상 선택기, HEX 입력칸, RGB 세 칸은 같은 색을 가리킵니다. 한쪽 값을 바꾸면 나머지 값도 같은 기준 색상으로 정리됩니다.
- 팔레트 유형을 고릅니다. 단색, 유사색, 보색, 삼색, 사색, 분할 보색 중 하나를 고르면 기준 색을 중심으로 여섯 색 조합이 다시 보입니다.
- 결과 색을 눌러 기준을 바꿀 수 있습니다. 팔레트 안의 swatch를 클릭하면 그 색이 새 기준 색상이 되고, HEX와 RGB 값도 함께 갱신됩니다.
- 필요한 코드를 복사합니다. 개별 HEX 복사, 모든 색상 코드 복사, nearest web-safe 복사를 상황에 맞게 쓰고, 초기화는 기본값인 #595959로 돌아갈 때 사용합니다.
HEX와 RGB는 같은 색을 서로 다른 방식으로 적은 값입니다
HEX
#336699처럼 여섯 자리 16진수로 색을 적는 방식입니다. CSS, 디자인 토큰, 문서 공유에 짧게 남기기 좋습니다.
RGB
빨강, 초록, 파랑 값을 0부터 255 사이 숫자로 나누어 쓰는 방식입니다. 입력칸의 R, G, B를 바꾸면 같은 색의 HEX가 다시 계산됩니다.
팔레트 유형
보색은 색상환에서 반대쪽 계열을 함께 보고, 유사색은 가까운 색을 묶어 봅니다. 유형을 바꿔도 기준 색상 자체는 유지됩니다.
빠른 색상
자주 쓰는 색상과 랜덤 색상은 시작점을 빠르게 고를 때 쓰는 보조 버튼입니다. 원하는 색이 정해졌다면 직접 HEX나 RGB를 입력하면 됩니다.
팔레트는 내부 HSL 기준과 대비 계산을 함께 씁니다
HSL은 색을 hue, saturation, lightness로 나누어 생각하는 방식입니다. 화면에서는 HSL 입력칸을 따로 받지 않지만, 팔레트 유형을 만들 때는 기준 색상의 색상각과 밝기를 내부적으로 움직입니다. 대비 평가는 흰색 배경과 검은색 배경을 기준으로 각각 계산해, 텍스트 색으로 쓰기 쉬운 쪽을 먼저 가늠하게 해 줍니다.
#336699를 보색 팔레트로 보면 파란색과 갈색 계열이 함께 보입니다
이 예시는 파란 기준 색상과 반대편의 갈색 계열을 함께 보여줍니다. 결과 패널에는 여섯 swatch가 나오며, 각 swatch는 HEX와 RGB를 같이 표시합니다. 같은 색을 텍스트로 쓸 계획이라면 흰색 배경과 검은색 배경의 대비를 나란히 보고, 배경으로 쓸 계획이라면 팔레트 안의 이웃 색과 조합했을 때도 한 번 더 확인하는 편이 좋습니다.
색상 예시는 확정 시안이 아니라 출발점입니다
팔레트 결과는 조합 후보를 빠르게 좁히는 데 좋습니다. 실제 화면에서는 글자 굵기, 버튼 상태, 주변 여백, 이미지 위 텍스트처럼 색상값 밖의 요소가 함께 보이기 때문에 최종 적용 전에는 실제 컴포넌트 안에서 다시 봐야 합니다.
대비 결과는 배경색과 글자 크기까지 함께 봅니다
- AA나 AAA는 텍스트 대비를 판단할 때 쓰는 중요한 기준이지만, 모든 UI 상태를 자동으로 보증하지는 않습니다.
- 색각 시뮬레이션은 대략적인 참고값입니다. 색만으로 상태를 구분하지 말고 텍스트, 아이콘, 패턴을 함께 두는 편이 안전합니다.
- web-safe 값은 오래된 팔레트 기준에 가까운 색을 보여주는 보조 정보입니다. 현대 웹 화면에서 반드시 그 값으로 바꿀 필요는 없습니다.
- 랜덤 색상이나 빠른 색상으로 시작했다면 브랜드 색, 배경색, 텍스트 색을 실제 사용 맥락에 넣어 한 번 더 확인하세요.
결과를 공유할 때는 기준 색상과 팔레트 유형을 같이 적어 두는 편이 좋습니다. 같은 #336699라도 단색 팔레트와 보색 팔레트는 쓰임이 다르고, 어떤 유형으로 본 조합인지가 빠지면 다음 사람이 같은 화면을 재현하기 어렵습니다.
색상 팔레트 도구 FAQ
HEX와 RGB 중 무엇을 복사하면 되나요?
웹 CSS나 디자인 시스템 토큰에는 HEX가 간단하고, 이미지 편집기나 일부 개발 도구에서는 RGB가 더 익숙합니다. 두 값은 같은 색을 다른 방식으로 적은 것이므로 쓰는 곳에서 요구하는 형식을 고르면 됩니다.
팔레트 유형을 바꾸면 기준 색상도 바뀌나요?
아니요. 기준 색상은 그대로 두고, 보색이나 유사색 같은 팔레트 유형만 바뀝니다. 팔레트 안의 다른 색을 클릭하면 그 색이 새 기준 색상이 되어 다시 계산됩니다.
대비 등급이 AA로 나오면 바로 써도 되나요?
AA는 텍스트 대비를 볼 때 중요한 참고 기준이지만, 실제 화면에서는 글자 크기, 배경 이미지, hover 상태, 비활성 상태까지 함께 확인해야 합니다. 결과값은 색 조합을 고르는 첫 검토용으로 보는 편이 안전합니다.
web-safe 색상은 꼭 맞춰야 하나요?
대부분의 현대 화면에서는 꼭 맞출 필요가 없습니다. 다만 오래된 웹 팔레트와 가까운 색을 기록하거나, 색상값을 단순한 기준으로 정리하고 싶을 때 nearest web-safe 값을 참고할 수 있습니다.
색각 시뮬레이션은 접근성 검사를 대신하나요?
대신하지 않습니다. 이 도구의 색각 시뮬레이션은 색 조합이 헷갈릴 가능성을 빠르게 보는 참고값입니다. 실제 접근성 검토에서는 대비, 상태 표시, 아이콘과 텍스트 보조, 사용자 테스트를 함께 확인해야 합니다.