디자인
색상 변환기
HEX · RGB · HSL · CMYK 색상 코드를 실시간으로 변환합니다.
가장 가까운 색상
Cornflower Blue
White: 3.83:1 · AA LargeBlack: 5.49:1 · AA
#6C72FF
HEX
#
RGB
R
G
B
HSL
H°
S%
L%
CMYK인쇄용 참고값
C
58%
M
55%
Y
0%
K
0%
Tailwind 쉐이드
WCAG 접근성 대비율
Aa텍스트 가독성
흰 글자
3.83:1AA Large
Aa텍스트 가독성
검은 글자
5.49:1AA
AA = 4.5:1 · AA Large = 3:1 · AAA = 7:1 이상
사용 방법
- HEX, RGB, HSL 중 아무 칸이나 수정하면 다른 모든 형식이 즉시 업데이트됩니다.
- 스포이드(🖌) 아이콘으로 브라우저 색상 피커를 열거나, 🔀로 랜덤 색상을 생성합니다.
- Tailwind 쉐이드를 클릭하면 해당 색상으로 전환됩니다.
- CMYK는 인쇄용 참고값입니다. 모니터 색상과 실제 인쇄물은 차이가 있을 수 있습니다.
- WCAG 기준: AA(일반 텍스트 4.5:1), AA Large(큰 텍스트 3:1), AAA(7:1 이상).
이 도구로 한 번에 끝내는 작업
색상 코드 변환기를 다른 도구와 연결해 한 흐름으로 처리해 보세요.
색상 변환기 자세히 알아보기
HEX·RGB·HSL·CMYK 색상 코드를 실시간으로 상호 변환하면서 가장 가까운 색상 이름, Tailwind CSS 11단계 쉐이드(50~950), WCAG 접근성 대비율(흰 글자/검은 글자 기준)까지 한 화면에 보여주는 도구입니다. 어느 칸이든 수정하면 다른 모든 형식이 즉시 동기화되고, 브라우저 색상 피커·랜덤 색상·최근 사용 색상 16개 히스토리까지 지원합니다. "HEX RGB 변환", "색상 코드 변환기", "Tailwind 색상 추출"이 대표 검색어입니다.
더 알아보기접기
CMYK는 인쇄용 참고값이고 모니터(RGB)와 실제 인쇄물(잉크)은 색역이 달라 정확히 일치하지 않습니다. WCAG 대비율은 일반 텍스트 4.5:1(AA)·큰 텍스트 3:1(AA Large)·강화 7:1(AAA)을 기준으로 통과/탈락을 표시하며, 디자인이 접근성 기준을 충족하는지 즉시 검증할 수 있도록 만들었습니다.
이럴 때 사용하세요
- •디자이너의 시안에서 받은 HEX 코드를 RGB·HSL로 바꿔 CSS·Figma·앱에 적용할 때
- •Tailwind CSS 프로젝트에서 임의 색상의 50~950 쉐이드를 한 번에 뽑아 디자인 토큰으로 만들 때
- •버튼·텍스트의 색상이 WCAG AA 기준을 통과하는지 흰/검 배경 대비율을 즉석 검증할 때
- •인쇄물 작업에서 화면 색상을 CMYK 근사값으로 참고할 때
- •HSL의 채도·밝기를 조절해 같은 계열의 라이트/다크 변형을 만들 때
색상 변환기 자주 묻는 질문
HEX와 RGB는 같은 색을 다른 방식으로 적은 것 아닌가요?
맞습니다. 둘 다 빨강·초록·파랑 0~255 값을 표현하지만, HEX는 16진수 6자리(예: 6C72FF)로 짧게, RGB는 십진수 3개(예: rgb(108, 114, 255))로 적습니다. CSS·디자인 툴에서 거의 동일하게 인식됩니다.
CMYK가 실제 인쇄와 같다고 보장되나요?
아닙니다. 본 도구의 CMYK는 RGB→CMYK 단순 수식 변환이라 인쇄용 ICC 프로파일·종이 종류·잉크 흡수율을 반영하지 않습니다. 정확한 인쇄 색상은 인쇄소의 색상 견본(컬러칩)과 시험 인쇄가 필요합니다.
WCAG 대비율은 정확히 어떻게 계산되나요?
각 색의 상대 휘도(L1, L2)를 구해 (L밝은 + 0.05) ÷ (L어두운 + 0.05) 비율로 산출합니다. 4.5:1 이상이면 일반 텍스트 AA 통과, 7:1 이상이면 AAA, 3:1 이상이면 큰 텍스트(18pt 이상)에 한해 AA Large로 판정됩니다.
HSL의 H, S, L은 무엇인가요?
H(Hue)는 색상환의 각도(0~360°), S(Saturation)는 채도(0~100%), L(Lightness)는 밝기(0~100%)입니다. RGB보다 "같은 색을 더 밝게/연하게 변형"하기에 직관적이라 디자이너가 자주 사용합니다.
최근 사용한 색상은 어디에 저장되나요?
사용자의 브라우저 localStorage에만 저장되며 외부 서버로 전송되지 않습니다. 같은 브라우저에서 다음에 들어와도 최대 16개까지 유지되며, "지우기" 버튼으로 언제든 비울 수 있습니다.