개발자 도구서버 전송 없음
색상 코드 변환 (HEX·RGB·HSL)
HEX·RGB·HSL 색상 코드를 양방향으로 변환합니다. 색상 선택기로 고르거나 세 형식(예: #2563eb, rgb(37, 99, 235), hsl(217, 83%, 53%)) 어느 칸에든 직접 입력하면 나머지가 자동으로 맞춰집니다. 입력값이 서버로 전송되지 않습니다.
자주 쓰는 변환
아래 HEX·RGB·HSL 칸 아무 곳이나 직접 입력하면 나머지가 같이 바뀝니다.
(입력 후 Enter 또는 칸 밖 클릭)
HEX
RGB
HSL
이렇게 쓰세요
- 1색상 선택기로 색을 고르거나, HEX·RGB·HSL 중 한 칸에 코드를 직접 입력합니다.
- 2Enter를 누르거나 칸 밖을 클릭하면 나머지 두 형식이 자동으로 바뀝니다.
- 3필요한 형식 옆의 복사 버튼으로 가져갑니다.
자주 묻는 질문
3자리 HEX(#abc)도 되나요?
네. #abc 같은 단축 표기도 6자리로 정규화해 변환합니다.
RGB나 HSL을 직접 입력할 수도 있나요?
네. HEX뿐 아니라 rgb(37, 99, 235), hsl(217, 83%, 53%) 형태로 RGB·HSL 칸에 직접 입력해도 됩니다. rgb()/hsl() 괄호 표기는 물론 '37, 99, 235'처럼 숫자만 넣어도 인식하고, 범위(0~255, 0~360, 0~100%)를 벗어나면 무시합니다.
HEX·RGB·HSL은 각각 언제 쓰나요?
HEX(#2563eb)는 웹·CSS에서 가장 널리 쓰이고, RGB는 화면 색을 더하는 방식이라 디자인 도구에서, HSL은 색상(H)·채도(S)·명도(L)를 따로 조절하기 좋아 색을 미세하게 바꿀 때 편합니다. 같은 색을 세 표기로 동시에 보여 줘 상황에 맞게 골라 쓰면 됩니다.
다른 도구
최종 업데이트: 2026-06-11