색상 변환기
HEX, RGB, HSL 색상 코드를 변환합니다.
색상 코드
HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
R59
G130
B246
H (색상)217°
S (채도)91%
L (명도)60%
개요
HEX, RGB, HSL 등 다양한 색상 코드 형식을 상호 변환하는 도구입니다. 웹 디자인, 앱 개발, 그래픽 작업 시 필요한 색상 값을 빠르게 변환할 수 있습니다.
계산 공식
HEX→RGB: 16진수 각 2자리를 10진수로 변환 (예: #FF8800 → R=255, G=136, B=0). RGB→HSL: R,G,B를 0~1로 정규화한 뒤 max, min 값을 구하고, H = 색상 각도(0~360), S = (max-min)/(1-|2L-1|), L = (max+min)/2로 계산합니다. HSL→RGB: H를 60도 단위 섹터로 나누어 C = (1-|2L-1|)×S, X = C×(1-|H/60 mod 2 - 1|) 값으로 RGB 매핑 후 m = L - C/2를 더합니다.
사용 방법
- 1변환할 색상 형식(HEX, RGB, HSL)을 선택합니다.
- 2색상 값을 입력합니다 (예: #3498DB 또는 R:52 G:152 B:219).
- 3자동으로 나머지 형식의 색상 값이 표시됩니다.
- 4필요한 색상 코드를 복사하여 사용합니다.
활용 팁
- ✔HEX 코드는 '#' 기호를 포함해 6자리 또는 3자리 축약형을 사용할 수 있습니다.
- ✔RGB 값은 각각 0~255 범위입니다.
- ✔HSL의 H(색조)는 0~360도, S(채도)와 L(명도)는 0~100% 범위입니다.
- ✔CSS에서는 rgba()를 사용하면 투명도(alpha)도 지정할 수 있습니다.
- ✔디자인 시스템을 구축할 때 HSL을 사용하면 밝기와 채도 조절이 직관적입니다.
자주 묻는 질문
Q. HEX와 RGB의 차이점은 무엇인가요?
HEX는 16진수 표기법(예: #FF0000)이고, RGB는 10진수 표기법(예: 255,0,0)입니다. 두 형식 모두 빨강, 초록, 파랑 채널의 강도를 나타내며 표현 범위가 동일합니다.
Q. HSL 색상 모델의 장점은 무엇인가요?
HSL은 색조(Hue), 채도(Saturation), 명도(Lightness)로 구성되어 인간의 색상 인지 방식과 유사합니다. 같은 색조에서 밝기나 채도만 변경하기 쉬워 일관된 팔레트를 만들기 편리합니다.
Q. 색상 변환 시 정밀도 손실이 있나요?
HEX와 RGB 간 변환은 손실이 없습니다. 그러나 HSL 변환 시 소수점 반올림으로 미세한 차이가 발생할 수 있습니다. 대부분의 경우 육안으로 구분할 수 없는 수준입니다.