KO

색상 코드 변환: HEX, RGB, HSL, HSV, CMYK

이 색상 코드 변환기에는 #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%), cmyk(76%, 47%, 0%, 4%) 등 어떤 형식으로 색을 넣어도 됩니다. 형식을 자동으로 알아보고 같은 색을 다른 모든 표기로 바꿔 보여 줍니다. 디자인 시안의 HEX 코드를 CSS의 rgba로 옮길 때처럼 자주 하는 변환을 바로 끝낼 수 있습니다.

출처: CSS Color 4, § 5.2, W3C – CSS Color Module Level 4: RGB hex notation. 업데이트: .

HEX, rgb(), hsl(), hsv()/hsb(), hwb(), 퍼센트로 쓴 cmyk(), 또는 「59, 130, 246」 같은 숫자 세 개
나의 도구함입력한 값은 이 브라우저에만 저장됩니다.

색 미리 보기

#3B82F6

결과

HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217.2, 91.2%, 59.8%)
HSV / HSB
hsv(217.2, 76%, 96.5%)
HWB
hwb(217.2 23.1% 3.5%)
CMYK (근삿값)
cmyk(76%, 47%, 0%, 4%)
알아본 입력 형식
HEX
CMYK는 근삿값입니다. ICC 색 프로파일 없이 간단한 공식으로 계산했습니다. 인쇄용 정확한 값은 인쇄소가 쓰는 색 프로파일에 따라 정해지므로, 인쇄소에 변환을 맡기거나 그 프로파일로 디자인 프로그램에서 변환하세요.

계산 방법

색상 코드 변환 원리

모든 형식은 모니터와 웹의 표준인 sRGB 색 공간의 같은 색을 나타냅니다. 계산의 출발점은 0~255 세 채널로 이루어진 RGB 값입니다.

예: #3B82F6 R = 59/255 = 0.231, G = 0.510, B = 0.965. 최댓값은 0.965, 최솟값은 0.231입니다. 밝기 L = (0.965 + 0.231) ÷ 2 = 59.8%, 채도 S = (0.965 − 0.231) ÷ (1 − |2 × 0.598 − 1|) = 91.2%, 색상 H = 217.2°. 결과는 hsl(217.2, 91.2%, 59.8%)입니다. 같은 색을 CMYK로 바꾸면 약 cmyk(76%, 47%, 0%, 4%)가 됩니다.

HEX를 RGB로 직접 바꾸는 법

HEX 코드는 앞에서부터 두 자리씩 빨강, 초록, 파랑입니다. 16진수 두 자리는 「앞자리 × 16 + 뒷자리」로 계산하고, A~F는 10~15로 읽습니다. #FF8800이라면 FF = 15 × 16 + 15 = 255, 88 = 8 × 16 + 8 = 136, 00 = 0이므로 rgb(255, 136, 0)입니다. 16진수 계산이 낯설다면 진법 변환기로 한 자리씩 확인할 수 있습니다.

CMYK가 근삿값인 이유

인쇄 잉크는 빛과 다르게 섞입니다. 화면의 색에 가장 가까운 CMYK 값은 종이, 인쇄 방식, 잉크 양에 따라 달라지며, 그 특성을 담은 것이 ICC 색 프로파일입니다. 여기서 쓰는 공식은 프로파일을 반영하지 않으므로, 예를 들어 순수한 파랑은 cmyk(100%, 100%, 0%, 0%)로 나오지만 실제로 인쇄하면 꽤 보랏빛이 돕니다. 명함이나 전단처럼 인쇄물을 만들 때는 인쇄소가 알려 주는 값을 쓰거나, 디자인 프로그램에서 인쇄소의 프로파일로 변환하세요.

반올림

RGB와 HEX는 정수라서 정확합니다. HSL, HSV, HWB는 소수점 아래 한 자리, CMYK는 정수 퍼센트로 보여 줍니다. 소수점은 마침표이므로 그대로 CSS에 붙여 넣을 수 있습니다. 글자색과 배경색이 잘 읽히는지 확인하려면 명도 대비 체크, 어울리는 색 조합이 필요하면 색상 팔레트 만들기를 쓰세요.

자주 묻는 질문

HEX 색상 코드를 RGB로 바꾸려면?

두 자리씩이 16진수로 한 채널을 나타냅니다. #3B82F6이라면 3B = 3 × 16 + 11 = 59, 82 = 8 × 16 + 2 = 130, F6 = 15 × 16 + 6 = 246이므로 rgb(59, 130, 246)입니다.

HEX 색상 코드란 무엇인가요?

색의 빨강, 초록, 파랑 채널을 16진수로 적은 코드입니다. # 뒤에 채널마다 두 자리씩 이어집니다. #FF0000은 순수한 빨강, #FFFFFF는 흰색, #000000은 검은색입니다. 웹사이트와 디자인 프로그램에서 가장 많이 쓰는 표기입니다.

RGB 값은 무엇을 뜻하나요?

빛의 삼원색인 빨강(R), 초록(G), 파랑(B)의 세기를 각각 0~255의 숫자로 나타낸 것입니다. rgb(255, 0, 0)은 빨강, rgb(0, 0, 0)은 검은색입니다. HEX는 이 세 숫자를 16진수로 쓴 것입니다.

CMYK 값을 그대로 인쇄에 써도 되나요?

대략적인 기준으로만 쓰세요. 변환은 ICC 색 프로파일 없이 이루어집니다. 기준은 인쇄소의 프로파일이므로 정확한 CMYK 값은 인쇄소에 확인하거나 디자인 프로그램에서 인쇄용 프로파일로 변환하세요.

HSL과 HSV는 무엇이 다른가요?

둘 다 같은 색상 값을 씁니다. HSL에서는 밝기 100%가 항상 흰색이고 50%가 순색입니다. HSV에서는 명도 100%가 그 색의 가장 밝은 상태이며, 흰색을 만들려면 채도를 0%로 내립니다. 디자인 프로그램에서는 HSV를 HSB라고 부르기도 합니다.

어떤 형식을 넣을 수 있나요?

3·4·6·8자리 HEX(# 있어도 없어도 됨), 퍼센트를 포함한 rgb()/rgba(), deg·turn·rad·grad로 쓴 hsl()/hsla(), hsv()/hsb(), hwb(), 퍼센트로 쓴 cmyk(), RGB로 읽는 숫자 세 개입니다. 쉼표 구분과 띄어쓰기 구분(CSS Color 4) 모두 됩니다.

출처 및 근거

업데이트: · 편집 원칙

관련 도구