사용법
- HEX → RGB: 왼쪽 입력창에 #df4324 또는 df4324 형식으로 HEX 코드를 입력하면 RGB 값과 색상 미리보기가 자동으로 표시됩니다.
- RGB → HEX: 오른쪽 입력창에 "223, 67, 36"처럼 쉼표로 구분된 숫자 세 개를 입력하면 HEX 코드가 자동으로 계산됩니다.
- 색상 미리보기 박스에서 변환 결과 색상을 즉시 확인하세요.
- 필요한 코드를 복사해 CSS나 디자인 툴에 바로 붙여넣습니다.
HEX와 RGB는 같은 색의 두 표기
HEX와 RGB는 똑같은 빛의 삼원색(빨강·초록·파랑)을 다르게 적은 것뿐입니다. 표현 방식만 다를 뿐 같은 색을 가리킵니다.
- RGB: 각 색을 0~255 십진수로. rgb(223, 67, 36)처럼 사람이 값을 가늠하기 쉽습니다.
- HEX: 같은 값을 16진수 두 자리씩 이어 붙인 것. #df4324 = df(223)·43(67)·24(36).
- 3자리 단축: #f30처럼 각 자리를 한 번씩만 쓰면 #ff3300으로 확장됩니다.
즉 HEX 한 쌍(예: df)을 십진수로 바꾸면 RGB 한 채널 값이 됩니다. 코드의 의미가 궁금하면 색상 코드 읽는 법 가이드를 참고하세요.
활용 팁
- 디자인-개발 간 색상 전달: Figma·Adobe XD는 HEX 코드를 주로 사용하고, 개발 코드에서는 rgb() 함수도 많이 씁니다. 두 환경을 오갈 때 이 변환기로 빠르게 맞출 수 있습니다.
- 3자리 단축 HEX 지원: #f30처럼 3자리 단축 HEX를 입력하면 내부적으로 #ff3300으로 확장 처리합니다. CSS에서 단축형을 쓴 경우도 문제없습니다.
- rgba() 활용: 투명도가 필요하면 변환된 RGB 값에 알파 값을 추가해 rgba(223, 67, 36, 0.5)처럼 사용하세요. 이 도구에서 RGB 값을 얻고 직접 rgba()를 조합하면 됩니다.
자주 묻는 질문
Q. HEX 코드 앞에 '#' 없이 입력해도 되나요?
네, df4324처럼 샵 없이 입력해도 정상 변환됩니다. #df4324 형식도 물론 지원합니다.
Q. RGB 값이 0~255 범위를 벗어나면 어떻게 되나요?
255를 초과하는 값이 있으면 오류 메시지가 표시됩니다. 각 채널(R·G·B)은 0~255 사이 정수여야 합니다.
Q. RGBA나 HSLA처럼 투명도가 포함된 형식도 지원하나요?
현재 6자리 HEX와 RGB(0~255 세 자리)만 지원합니다. 투명도 채널이 필요하면 변환 결과에 알파 값을 직접 추가해 사용하세요.
Q. HEX 한 자리는 어떻게 십진수로 바꾸나요?
16진수는 0~9 다음 a~f로 10~15를 나타냅니다. 두 자리 HEX는 '앞자리 × 16 + 뒷자리'로 계산합니다. 예를 들어 df는 13 × 16 + 15 = 223입니다. 이 도구가 자동으로 변환해 주므로 직접 계산할 필요는 없습니다.
Q. 같은 색인데 HEX와 RGB 결과가 다르게 보일 수 있나요?
정수 RGB와 6자리 HEX는 1:1로 정확히 대응하므로 같은 색이면 결과도 같습니다. 다만 HSL이나 소수점이 있는 값에서 변환·반올림을 거치면 1 정도 오차가 생길 수 있습니다. 이 도구의 HEX↔RGB 변환은 정수 기준이라 오차가 없습니다.
함께 쓰면 좋은 도구