IT & 디지털 미디어

RGB HEX 색상 변환기

디자인용 RGB 색상 값을 HEX 코드 및 HSL 값으로 변환합니다.

한눈에 요약

RGB(0~255) 채널 값을 입력하면 웹 디자인용 16진수 HEX 코드(#RRGGBB)와 HSL(색상, 채도, 명도) 값으로 자동 변환됩니다.

실시간 자동 연산100% 브라우저 연산검토 완료

RGB HEX 색상 변환기

실시간 연산

계산 결과

수치를 입력하면 실시간으로 계산됩니다.

계산 공식 및 예시

공식HEX = # + Hex(R) + Hex(G) + Hex(B) / HSL: H(0~360°), S(0~100%), L(0~100%)

계산 예시RGB(255, 0, 0) -> #FF0000 / hsl(0, 100%, 50%), RGB(255, 99, 71) -> #FF6347 / hsl(9, 100%, 64%)

RGB HEX 색상 변환기 사용 안내

RGB HEX 색상 변환기는 웹 디자이너, UI/UX 디자이너 및 프론트엔드 개발자가 RGB(Red, Green, Blue) 10진수 값을 HEX 16진수 코드(#RRGGBB) 및 HSL(색상, 채도, 명도) 표기법으로 즉시 변환할 수 있는 표준 디자인 계산 도구입니다.

디자인 툴(Figma, Photoshop, Illustrator)이나 CSS 코드 작성 시 필요한 정확한 색상 코드 정보를 손쉽게 확인하세요.

RGB, HEX, HSL 색상 모델 비교

색상 표기법	형식	설명 및 특징	주요 활용처
RGB	`rgb(255, 99, 71)`	빛의 3원색(Red, Green, Blue)을 0~255 범위의 10진수로 표현	디지털 디스플레이, 그래픽 소프트웨어
HEX	`#FF6347`	RGB 각 채널을 2자리 16진수로 변환하여 총 6자리 코드로 표기	HTML/CSS 웹 표준 스타일링
HSL	`hsl(9, 100%, 64%)`	색상(Hue 0~360°), 채도(Saturation 0~100%), 명도(Lightness 0~100%)로 구성	CSS 다이나믹 테마 조절, 디자인 시스템

색상 코드 변환 원리

1. RGB에서 HEX로 변환하는 공식

RGB의 10진수 숫자(0~255)를 16진수(00~FF)로 1:1 변환합니다.

R = 255 -> FF
G = 99 -> 63
B = 71 -> 47
최종 HEX 코드: #FF6347

2. RGB에서 HSL로 변환하는 공식

RGB 값을 0~1 범위로 정규화합니다 (R' = R/255, G' = G/255, B' = B/255).
최대값(Cmax)과 최소값(Cmin)의 차이인 변위 delta = Cmax - Cmin을 계산합니다.
명도(Lightness) = (Cmax + Cmin) / 2
채도(Saturation) = delta / (1 - |2L - 1|)
색상(Hue)은 최대값을 가지는 채널 위치에 따라 각도를 산출합니다.

자주 사용하는 웹 디자인 대표 색상 표

색상 이름	RGB 값	HEX 코드	HSL 표기법
순수 빨강 (Red)	`rgb(255, 0, 0)`	`#FF0000`	`hsl(0, 100%, 50%)`
순수 초록 (Green)	`rgb(0, 255, 0)`	`#00FF00`	`hsl(120, 100%, 50%)`
순수 파랑 (Blue)	`rgb(0, 0, 255)`	`#0000FF`	`hsl(240, 100%, 50%)`
토마토 레드 (Tomato)	`rgb(255, 99, 71)`	`#FF6347`	`hsl(9, 100%, 64%)`
검정색 (Black)	`rgb(0, 0, 0)`	`#000000`	`hsl(0, 0%, 0%)`
흰색 (White)	`rgb(255, 255, 255)`	`#FFFFFF`	`hsl(0, 0%, 100%)`
회색 (Gray)	`rgb(128, 128, 128)`	`#808080`	`hsl(0, 0%, 50%)`

최종 내용 검토일: 2026-08-13

Q&A

자주 묻는 질문

RGB와 HEX 코드는 무엇인가요?

RGB는 빛의 3원색인 Red(빨강), Green(초록), Blue(파랑)를 0부터 255까지의 10진수로 표현한 모델입니다. HEX 코드는 이를 16진수 6자리(#RRGGBB)로 줄여 웹(HTML/CSS) 디자인의 표준 단위로 사용합니다.

HSL 표기법은 RGB와 어떻게 다른가요?

HSL은 Hue(색상 0~360°), Saturation(채도 0~100%), Lightness(명도 0~100%)로 색을 나타냅니다. 사람이 색상의 밝기와 선명도를 조절할 때 RGB보다 훨씬 직관적으로 다룰 수 있습니다.

RGB 값 0과 255는 각각 무엇을 의미하나요?

0은 해당 색상 채널의 빛이 전혀 없음을, 255는 해당 색상이 최대 밝기로 발광함을 의미합니다. (0,0,0)은 검정색(#000000), (255,255,255)는 흰색(#FFFFFF)입니다.