🎨 HEX↔RGB 변환
색상 코드를 입력하거나 컬러피커로 고르면 HEX·RGB·HSL 값이 동시에 표시됩니다.
사용 방법
- 컬러피커에서 색을 고르거나, 색상 코드(#4A88E4, 74,136,228 등)를 직접 입력합니다.
- HEX·RGB·HSL 세 가지 표기가 즉시 계산됩니다.
- 필요한 형식의 값을 복사해 CSS나 디자인 툴에 붙여넣습니다.
이럴 때 유용해요
- 디자인 시안의 HEX 코드를 CSS rgb() 값으로 옮길 때
- 포토샵 RGB 값을 웹용 헥스 코드로 바꿀 때
- 브랜드 컬러의 HSL 값을 확인해 밝기 변형 팔레트를 만들 때
알아두면 좋은 팁
- #F00처럼 3자리 축약형 HEX도 인식합니다(#FF0000과 동일).
- HSL은 색상(Hue)·채도(Saturation)·명도(Lightness) 표기라 같은 색의 밝은/어두운 변형을 만들 때 L값만 조절하면 되어 편리합니다.
자주 묻는 질문
HEX 코드 6자리는 각각 무엇을 뜻하나요?
앞에서부터 두 자리씩 빨강(R)·초록(G)·파랑(B)의 세기를 16진수(00~FF)로 나타냅니다. 예를 들어 #4A88E4는 R=74, G=136, B=228이라는 뜻으로, 10진수로 바꾼 값이 곧 RGB 표기입니다.
#FFF 같은 3자리 코드도 유효한가요?
네, 각 자리를 두 번 반복한 축약 표기입니다. #FFF는 #FFFFFF(흰색), #F00은 #FF0000(빨강)과 같습니다. 이 변환기에 3자리로 입력해도 자동으로 6자리로 풀어 계산합니다.
HSL은 언제 쓰는 게 좋나요?
HSL은 색상(0~360도)·채도(%)·명도(%)로 색을 표현해 사람이 직관적으로 조절하기 좋습니다. 버튼 hover 색을 살짝 어둡게 만들 때 RGB를 일일이 계산하는 대신 L값만 10% 낮추면 됩니다.
투명도(알파)가 있는 색상도 변환되나요?
이 도구는 불투명 색상(6자리 HEX) 기준입니다. 투명도가 필요하면 변환 결과에 알파값을 붙여 rgba(74,136,228,0.5)나 8자리 HEX(#4A88E480) 형태로 직접 표기하세요.
