색상 코드 변환
HEX, RGB, HSL 색상 코드를 변환.
파일은 사용자 기기에만 남습니다
이 도구는 모든 처리를 브라우저 안에서 수행합니다. 서버로 업로드되는 내용은 없습니다.
📝 색상 코드 변환 소개
색상 코드 변환 도구는 HEX 색상 코드를 입력하면 같은 색을 RGB와 HSL 값으로 즉시 보여 주며, 각 값마다 복사 버튼이 있습니다. 텍스트 칸에 #ff3a73처럼 여섯 자리 코드를 직접 입력하거나, 색상 선택기로 원하는 색을 눈으로 고를 수 있고 결과는 바로 갱신됩니다.
세 가지 형식은 같은 색을 서로 다른 방식으로 표현합니다. HEX는 빨강, 초록, 파랑 값을 짧은 문자열로 묶은 형식으로 CSS와 디자인 도구에서 가장 많이 쓰입니다. RGB는 세 채널을 0부터 255까지의 숫자로 나타내어 코드 작성이나 이미지 편집에 편리합니다. HSL은 색상을 0~360도의 각도로, 채도와 명도를 백분율로 표현하므로 숫자 하나만 조절해 브랜드 색상의 밝은 버전, 어두운 버전, 차분한 버전을 만들기 쉽습니다.
텍스트 칸에는 여섯 자리 HEX 코드를 입력해야 하며, #f00 같은 세 자리 축약형은 #ff0000처럼 풀어서 입력해 주세요. HSL 값은 정수로 반올림되어 표시됩니다. 모든 변환은 브라우저 안에서 계산됩니다.
📘 사용법
- 1
색상 입력 또는 선택
텍스트 칸에 여섯 자리 HEX 코드를 입력하거나 색상 견본을 눌러 색을 고릅니다.
- 2
변환 결과 확인
HEX, RGB, HSL 줄에 같은 색이 각 형식으로 자동 표시됩니다.
- 3
값 복사
필요한 형식 옆의 복사 버튼을 눌러 CSS나 디자인 도구에 붙여넣습니다.
❓ 자주 묻는 질문
#fff 같은 세 자리 HEX 코드도 입력할 수 있나요?
이 도구는 여섯 자리 코드를 기준으로 하므로 각 자리를 두 번씩 써서 #fff는 #ffffff처럼 입력해 주세요.
투명도(알파) 값도 지원하나요?
아니요. 불투명한 색상만 변환하므로 알파가 포함된 여덟 자리 HEX, RGBA, HSLA는 지원하지 않습니다.
# 기호를 꼭 붙여야 하나요?
아니요. # 없이 입력해도 RGB와 HSL 결과가 정상적으로 표시됩니다.
RGB보다 HSL이 더 유용한 경우는 언제인가요?
명도를 올려 더 밝게 만들거나 색상 각도를 고정한 채 팔레트를 만드는 등 색을 직관적으로 조절하고 싶을 때 HSL이 편리합니다.