HEX 코드 앞의 # 기호는 꼭 붙여야 하나요?

이 변환기에서는 #을 넣어도 되고 빼도 인식합니다. 다만 CSS 등 실제 코드에서는 #6366F1처럼 # 기호를 붙여야 색상 값으로 해석됩니다. 또 FFF 같은 3자리 축약형도 지원하며, 이는 각 자리를 두 번 반복한 FFFFFF와 같은 색입니다.

HEX와 RGB는 무엇이 다른가요?

둘은 같은 색 정보를 진법만 바꿔 표기한 것입니다. HEX는 16진수 두 자리(00~FF)로, RGB는 10진수(0~255)로 각 채널을 적습니다. 예를 들어 #6366F1과 rgb(99, 102, 241)은 완전히 같은 색이며, 변환 과정에서 값이 손실되지 않습니다.

HSL은 왜 따로 쓰나요?

HSL은 색조·채도·명도를 나눠 다루기 때문에 색을 직관적으로 조정하기 좋습니다. 예를 들어 '조금 더 밝게'는 명도(L)만, '더 연하게'는 채도(S)만 낮추면 됩니다. RGB에서는 이런 조정을 하려면 세 값을 동시에 계산해야 해서 번거롭습니다.

R·G·B 값이 모두 같으면 무슨 색이 되나요?

빨강·초록·파랑 세 채널의 값이 서로 같으면 채도가 0이 되어 항상 무채색, 즉 검정·회색·흰색 계열이 됩니다. 예를 들어 #808080(rgb 128,128,128)은 중간 회색이고, 값이 클수록 밝은 회색, 0이면 검정, 255면 흰색입니다.

이 도구로 인쇄용 CMYK 색도 변환할 수 있나요?

아니요. HEX·RGB·HSL은 모두 화면 표시용 RGB 색 공간을 나타내는 표기법이라 인쇄용 CMYK는 지원하지 않습니다. 화면과 인쇄물은 색을 내는 원리(빛 vs 잉크)가 달라 같은 값이라도 결과가 다르게 보일 수 있으므로, 인쇄 색은 인쇄소의 CMYK 프로파일을 확인해야 합니다.

투명도(알파) 값도 넣을 수 있나요?

이 변환기는 불투명 색만 다루며 투명도(알파)는 지원하지 않습니다. 투명도가 필요하면 CSS에서 rgba(99, 102, 241, 0.5)나 8자리 HEX(#6366F180) 형식을 쓰면 되는데, 여기서 마지막 값이 불투명도를 나타냅니다.

색상 변환기 (HEX·RGB·HSL)

색상 변환기는 웹과 디자인에서 가장 널리 쓰이는 세 가지 색상 표기법인 HEX, RGB, HSL을 서로 자동으로 변환해 주는 도구입니다. HEX 코드를 붙여넣으면 곧바로 RGB 값과 HSL 값으로 바뀌고, RGB 슬라이더나 색조(Hue) 슬라이더를 움직이면 나머지 값도 실시간으로 함께 갱신됩니다. 위쪽 색상 미리보기 상자로 지금 값이 실제로 어떤 색인지 눈으로 바로 확인할 수 있습니다.

같은 색이라도 어디에 쓰느냐에 따라 표기법이 달라집니다. CSS와 그래픽 툴에서는 #6366F1 같은 HEX 코드를, 개발 코드나 디자인 스펙에서는 rgb(99, 102, 241)을, 색을 미세하게 조정할 때는 hsl(239, 84%, 67%)을 씁니다. 문제는 디자이너가 준 HEX 코드를 개발자가 RGB로 바꾸거나, 이미 있는 색을 조금 더 밝게·연하게 바꾸려면 사람이 직접 16진수를 계산해야 한다는 점입니다. 이 변환기는 그 과정을 즉시 처리합니다.

아래에서는 HEX·RGB·HSL 각각이 정확히 무엇을 뜻하는지, 색상 코드를 읽는 법과 서로 어떻게 변환되는지, 그리고 웹·디자인 작업에서 어떤 표기법을 언제 쓰면 좋은지를 정리했습니다. 색을 다루는 원리를 이해하면 도구 없이도 색 코드를 대략 짐작하고 조정할 수 있습니다.

사용 방법

이미 색상 코드가 있다면 HEX 입력란에 #6366F1처럼 붙여넣습니다. 앞의 # 기호는 있어도 되고 없어도 되며, #FFF 같은 3자리 축약형도 인식합니다.
값을 처음부터 만들고 싶다면 R·G·B 슬라이더를 각각 0~255 사이에서 움직입니다. 빨강·초록·파랑 세 빛의 세기를 조절하면 미리보기 상자의 색이 실시간으로 바뀝니다.
색조만 바꾸고 채도·명도는 유지하고 싶다면 아래쪽 색조(H) 슬라이더를 0~360° 범위에서 움직입니다. 빨강에서 노랑·초록·파랑을 거쳐 다시 빨강으로 색상환을 한 바퀴 돕니다.
하단 요약 칸에 RGB, HSL, HEX 값이 동시에 표시됩니다. 필요한 표기법의 값을 복사해 CSS·디자인 툴·코드에 그대로 붙여넣으면 됩니다.

HEX·RGB·HSL 세 가지 표기법 비교

세 표기법은 모두 화면에서 빛의 삼원색인 빨강(R)·초록(G)·파랑(B)을 섞어 색을 만든다는 점은 같습니다. 다만 그 값을 사람에게 보여 주는 방식이 다릅니다. HEX와 RGB는 사실상 같은 정보를 진법만 바꿔 표기한 것이고, HSL은 사람이 색을 인식하는 방식(색조·선명함·밝기)에 가깝게 재구성한 것입니다.

같은 색(인디고 계열)을 세 가지로 표기한 예
표기법	형식	예시	값의 범위
HEX	#RRGGBB	#6366F1	각 채널 00~FF (16진수)
RGB	rgb(R, G, B)	rgb(99, 102, 241)	각 채널 0~255 (10진수)
HSL	hsl(H, S%, L%)	hsl(239, 84%, 67%)	H 0~360°, S·L 0~100%

HEX와 RGB는 표기만 다른 쌍둥이

HEX의 각 두 자리(00~FF)는 RGB 채널 값(0~255)을 16진수로 적은 것입니다. 예를 들어 63(16진수)은 99(10진수)와 같아서 #63...은 rgb(99, ...)가 됩니다. 그래서 HEX ↔ RGB 변환은 손실이 전혀 없습니다.

HEX 색상 코드 읽는 법

HEX(16진수) 코드는 #으로 시작하고 여섯 자리로 이루어집니다. 앞에서부터 두 자리씩 끊어 각각 빨강·초록·파랑의 세기를 나타내며, 각 값은 00(전혀 없음)부터 FF(가장 강함)까지입니다. 16진수는 0~9 다음에 A·B·C·D·E·F를 써서 한 자리로 0~15까지 표현하므로, 두 자리로 0~255를 담을 수 있습니다.

#FF0000 → 빨강만 최대(255), 나머지 0 = 순수한 빨강
#00FF00 → 초록만 최대 = 순수한 초록, #0000FF → 파랑만 최대 = 순수한 파랑
#000000 → 세 채널 모두 0 = 검정, #FFFFFF → 세 채널 모두 255 = 흰색
#808080 → 세 채널이 같은 중간값(128) = 회색. R·G·B가 모두 같으면 항상 무채색(회색 계열)이 됩니다.
#FFF 같은 3자리 축약형은 각 자리를 두 번 반복한 것으로, #FFFFFF와 같습니다.

16진수 A~F가 헷갈릴 때

16진수 한 자리는 0,1,2,…,9,A,B,C,D,E,F 순서로 0부터 15까지입니다. 즉 A=10, F=15입니다. 두 자리 값을 10진수로 바꾸려면 '앞자리 × 16 + 뒷자리'로 계산합니다. 예를 들어 FF = 15 × 16 + 15 = 255, 63 = 6 × 16 + 3 = 99입니다.

RGB — 빛의 삼원색 더하기

RGB는 빨강·초록·파랑 세 빛을 각각 0~255 세기로 섞어 색을 만드는 가산혼합 방식입니다. 화면(모니터·스마트폰)이 색을 내는 원리 그대로이며, 세 빛을 모두 세게 켜면 흰색에 가까워지고 모두 끄면 검정이 됩니다. 이 변환기의 R·G·B 슬라이더가 바로 이 세 값을 직접 조절합니다.

물감을 섞을수록 어두워지는 감산혼합(인쇄용 CMYK)과 반대로, RGB는 빛을 더할수록 밝아진다는 점이 핵심입니다. 그래서 웹·앱·게임 등 화면에 표시되는 모든 색은 기본적으로 RGB로 다룹니다.

이 도구는 화면용 색(RGB 계열)만 다룹니다

HEX·RGB·HSL은 모두 화면 표시용 RGB 색 공간을 표현하는 표기법입니다. 인쇄에 쓰는 CMYK나 투명도를 담는 알파(RGBA) 값은 이 변환기에서 다루지 않으므로, 인쇄물 색은 인쇄소의 CMYK 프로파일을 별도로 확인해야 합니다.

HSL — 색조·채도·명도로 조절하기

HSL은 사람이 색을 떠올리는 방식에 가깝게 만든 표기법으로, 색조(Hue)·채도(Saturation)·명도(Lightness) 세 값으로 색을 나타냅니다. RGB처럼 세 빛을 따로 조절하는 대신 '어떤 색인지', '얼마나 선명한지', '얼마나 밝은지'를 나눠서 다루기 때문에, 색을 미세하게 조정할 때 훨씬 직관적입니다.

색조(H)는 색상환의 각도입니다. 0°(=360°) 빨강, 120° 초록, 240° 파랑을 기준점으로 삼으면 나머지 색을 짐작하기 쉽습니다.
채도(S)가 0%면 색조·명도와 상관없이 항상 회색이 됩니다.
명도(L)가 0%면 무조건 검정, 100%면 무조건 흰색입니다. 가장 선명한 원색은 명도 50% 부근에서 나옵니다.
이 변환기의 색조(H) 슬라이더를 움직이면 채도·명도는 유지한 채 색상만 바꿀 수 있어, 같은 톤의 다른 색을 찾을 때 편리합니다.

HSL 세 요소의 의미
요소	범위	뜻	값을 올리면
색조 H	0~360°	색상환에서의 각도	빨강→노랑→초록→파랑 순환
채도 S	0~100%	색의 선명함	0%는 회색, 100%는 가장 선명
명도 L	0~100%	색의 밝기	0%는 검정, 100%는 흰색

웹·디자인 작업에서 활용하기

표기법마다 잘 맞는 쓰임새가 다릅니다. 상황에 맞는 표기법을 고르면 색을 더 빠르고 정확하게 다룰 수 있습니다.

HEX: CSS·HTML·그래픽 툴에서 가장 흔한 형식입니다. 짧고 복사·공유가 편해 브랜드 컬러 전달이나 디자인 시안에 적합합니다.
RGB: 값이 10진수라 코드에서 계산·조작하기 쉽습니다. 색을 프로그래밍으로 생성하거나 조명·픽셀 값을 다룰 때 유용합니다.
HSL: 명도·채도만 바꿔 hover·active 같은 상태 색이나 밝기 단계(색 팔레트)를 만들 때 강력합니다. 색조를 고정하고 명도만 조절하면 통일감 있는 색 체계를 쉽게 얻습니다.
대비 확인: 배경과 글자의 명도(L) 차이가 충분해야 가독성이 확보됩니다. 접근성이 중요한 화면에서는 색 대비를 별도로 점검하세요.

팔레트를 만드는 손쉬운 방법

기준 색을 HSL로 바꾼 뒤 색조(H)는 그대로 두고 명도(L)만 10%씩 올리거나 내리면, 같은 계열의 밝고 어두운 색 세트를 손쉽게 만들 수 있습니다. 버튼·배경·테두리처럼 위계가 필요한 UI 색을 정할 때 자주 쓰는 방법입니다.

자주 묻는 질문

HEX 코드 앞의 # 기호는 꼭 붙여야 하나요?: 이 변환기에서는 #을 넣어도 되고 빼도 인식합니다. 다만 CSS 등 실제 코드에서는 #6366F1처럼 # 기호를 붙여야 색상 값으로 해석됩니다. 또 FFF 같은 3자리 축약형도 지원하며, 이는 각 자리를 두 번 반복한 FFFFFF와 같은 색입니다.
HEX와 RGB는 무엇이 다른가요?: 둘은 같은 색 정보를 진법만 바꿔 표기한 것입니다. HEX는 16진수 두 자리(00~FF)로, RGB는 10진수(0~255)로 각 채널을 적습니다. 예를 들어 #6366F1과 rgb(99, 102, 241)은 완전히 같은 색이며, 변환 과정에서 값이 손실되지 않습니다.
HSL은 왜 따로 쓰나요?: HSL은 색조·채도·명도를 나눠 다루기 때문에 색을 직관적으로 조정하기 좋습니다. 예를 들어 '조금 더 밝게'는 명도(L)만, '더 연하게'는 채도(S)만 낮추면 됩니다. RGB에서는 이런 조정을 하려면 세 값을 동시에 계산해야 해서 번거롭습니다.
R·G·B 값이 모두 같으면 무슨 색이 되나요?: 빨강·초록·파랑 세 채널의 값이 서로 같으면 채도가 0이 되어 항상 무채색, 즉 검정·회색·흰색 계열이 됩니다. 예를 들어 #808080(rgb 128,128,128)은 중간 회색이고, 값이 클수록 밝은 회색, 0이면 검정, 255면 흰색입니다.
이 도구로 인쇄용 CMYK 색도 변환할 수 있나요?: 아니요. HEX·RGB·HSL은 모두 화면 표시용 RGB 색 공간을 나타내는 표기법이라 인쇄용 CMYK는 지원하지 않습니다. 화면과 인쇄물은 색을 내는 원리(빛 vs 잉크)가 달라 같은 값이라도 결과가 다르게 보일 수 있으므로, 인쇄 색은 인쇄소의 CMYK 프로파일을 확인해야 합니다.
투명도(알파) 값도 넣을 수 있나요?: 이 변환기는 불투명 색만 다루며 투명도(알파)는 지원하지 않습니다. 투명도가 필요하면 CSS에서 rgba(99, 102, 241, 0.5)나 8자리 HEX(#6366F180) 형식을 쓰면 되는데, 여기서 마지막 값이 불투명도를 나타냅니다.

🎨 색상 변환기 (HEX·RGB·HSL)