사용법
- HEX → RGB: 왼쪽 입력창에 #df4324 또는 df4324 형식으로 HEX 코드를 입력하면 RGB 값과 색상 미리보기가 자동으로 표시됩니다.
- RGB → HEX: 오른쪽 입력창에 "223, 67, 36"처럼 쉼표로 구분된 숫자 세 개를 입력하면 HEX 코드가 자동으로 계산됩니다.
- 색상 미리보기 박스에서 변환 결과 색상을 즉시 확인하세요.
- 필요한 코드를 복사해 CSS나 디자인 툴에 바로 붙여넣습니다.
활용 팁
- 디자인-개발 간 색상 전달: 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 세 자리)만 지원합니다. 투명도 채널이 필요하면 변환 결과에 알파 값을 직접 추가해 사용하세요.