색상 코드 변환기
시각적 색상 선택기와 대비 검사기로 RGB, HEX, HSL, HSV, CMYK 간 변환
색상 선택기
미리보기
색상 형식
색상 팔레트
대비 검사기
샘플 텍스트
이것은 가독성 테스트를 위한 작은 샘플 텍스트입니다.
이 도구 소개
컬러 코드 변환 도구는 RGB, HEX, HSL, HSV, CMYK 등 색 표현 형식을 상호 변환하는 디자이너·개발자용 무료 도구입니다. 컬러 피커로 직관적으로 색을 고르고, 보색과 유사색 등의 배색 팔레트를 자동 생성하며, 글자색과 배경색의 WCAG 명암비까지 확인할 수 있습니다. 웹사이트와 앱 디자인, 브랜드 컬러 관리, 접근성 검증에 유용합니다.
사용 방법
- 1 컬러 피커로 색을 고르거나 HEX 값을 직접 입력합니다.
- 2 RGB, HSL, HSV, CMYK 등 각 형식의 값이 동시에 표시됩니다.
- 3 자동 생성된 배색 팔레트에서 보색과 유사색을 확인합니다.
- 4 명암비 검사기로 글자색과 배경색의 가독성을 검증합니다.
원리 설명
RGB는 빨강·초록·파랑 빛을 0~255로 섞어 색을 만드는 방식으로 화면 표시의 기본입니다. HEX는 이 RGB를 채널마다 16진수 두 자리로 나열한 표기로, #FF8800은 빨강 255, 초록 136, 파랑 0을 뜻합니다. HSL은 색상(Hue 0~360도), 채도(Saturation), 명도(Lightness)로 색을 나타내어 사람의 감각에 가깝고 미세 조정이 쉽습니다. HSV는 명도 대신 명도값(Value)을 씁니다. CMYK는 사이안·마젠타·옐로·블랙 잉크 양으로 인쇄물용 방식입니다. 명암비는 두 색의 상대 휘도 비로 계산하며, WCAG는 일반 텍스트에서 AA 기준 4.5:1 이상, AAA 기준 7:1 이상을 권장합니다.
자주 묻는 질문
HEX와 RGB는 어떻게 다른가요?
담고 있는 색 정보는 같습니다. RGB는 빨강·초록·파랑을 0~255의 10진수로, HEX는 이를 16진수 두 자리씩으로 묶은 표기입니다. #FF0000과 rgb(255,0,0)은 같은 빨강입니다.
WCAG의 명암비 AA란 무엇인가요?
가독성 기준으로, 일반 크기 글자는 AA 기준에서 배경과의 비가 4.5:1 이상이어야 합니다. 큰 글자는 3:1 이상이면 허용됩니다.
HSL을 쓰는 이점은 무엇인가요?
색상을 유지한 채 채도나 명도만 바꿀 수 있어 같은 계열의 변형이나 호버 시 농담을 직관적으로 만들 수 있습니다.
CMYK와 RGB에서 색이 어긋나는 이유는 무엇인가요?
RGB는 빛의 가산 혼합, CMYK는 잉크의 감산 혼합으로 표현 범위가 다르기 때문입니다. 화면에서 선명한 색이 인쇄에서는 칙칙해질 수 있습니다.
보색과 유사색이란 무엇인가요?
보색은 색상환의 반대쪽에 있어 대비가 강하고, 유사색은 인접한 색으로 통일감 있는 배색이 됩니다. 본 도구가 자동으로 산출합니다.
관련 도구 및 용도
HEX의 원리를 깊이 이해하려면 진법 변환이 도움이 됩니다. 디자인 치수 계산에는 길이 단위 변환, 웹 구현에는 px·rem·em 변환도 함께 활용하세요.