← 메인으로 돌아가기

IT, 테크 및 디자인

색상 코드 변환기 (HEX·RGB·HSL·CMYK)

HEX, RGB, HSL 색상 값을 서로 변환하고 인쇄용 CMYK 근사값과 흰색·검정 배경 대비까지 함께 보여 줍니다.

#2563EB

입력한 CSS 색상을 HEX, RGB, HSL 표기로 변환했습니다.

HEX: #2563EB
RGB: 37, 99, 235
CSS RGB: rgb(37 99 235)
HSL: 221deg 83% 53%
CSS HSL: hsl(221 83% 53%)
CMYK(인쇄 근사값): 84%, 58%, 0%, 8%
흰색 대비: 5.17 : 1
검정 대비: 3.43 : 1

입력 항목 1개

색상 값

최종 검토 2026.09.27

sRGB 기준 HEX ↔ RGB ↔ HSL ↔ CMYK 변환(CMYK는 ICC 프로파일 없는 단순 변환)

계산 방법과 기준

CSS Color 문법은 HEX, rgb(), hsl() 등 여러 색상 표기를 허용합니다. 이 도구는 입력 색상을 HEX 기준으로 정규화한 뒤 RGB, HSL, 대비 비율을 함께 보여줍니다.

계산식과 처리 기준

HEX -> RGB: 16진수 채널을 0~255 정수로 변환
RGB -> HSL: max/min 채널 차이로 hue, saturation, lightness 계산
대비율 = (밝은 상대 휘도 + 0.05) / (어두운 상대 휘도 + 0.05)

계산 예시

#2563EB를 RGB·HSL·CMYK로 바꾸면?

색상 값: “#2563EB”

결과#2563EB

입력한 CSS 색상을 HEX, RGB, HSL 표기로 변환했습니다.

rgb(16, 185, 129)는 HEX로?

색상 값: “rgb(16, 185, 129)”

결과#10B981

입력한 CSS 색상을 HEX, RGB, HSL 표기로 변환했습니다.

CSS 색상 표기 비교

표기	예시	용도
HEX	#2563EB	디자인 토큰, 빠른 복사
RGB	rgb(37 99 235)	채널 기반 조정, 투명도 조합
HSL	hsl(221 83% 53%)	색상환 기반 팔레트 조정

주의사항

인쇄용 CMYK는 용지·잉크 프로파일(예: Japan Color, FOGRA)에 따라 달라집니다. 인쇄소에 교정쇄를 요청하세요.

어떤 색상 표기를 변환하나요?

HEX·RGB·HSL 등 색상 표기를 상호 변환합니다.

#2563EB, #36F, rgb(37 99 235), hsl(221 83% 53%) 형식을 지원합니다.
대비 비율은 WCAG 상대 휘도 공식 기준으로 계산합니다.
alpha 채널은 색상 변환 결과에서 제외하고 불투명 색상으로 계산합니다.

근거·출처

W3C CSS Color Module Level 4

계산 결과는 입력값과 공개된 기준을 바탕으로 한 참고용 추정치이며, 세무·법률·의료 판단을 대신하지 않습니다. 기준은 2026.09.27 검토 시점입니다. 면책 고지

계산 뒤에 있는 원리