색상 변환
HEX·RGB·HSL 색상 값을 서로 변환합니다. 각 값을 클릭 한 번으로 복사할 수 있습니다.
색상 변환 소개
HEX·RGB·HSL로 적힌 색상 값을 서로 바꿔 줍니다. 시안에는 HEX로 적혀 있는데 CSS에서는 HSL로 명도를 조절하고 싶을 때, 보고서에 RGB 숫자로 표기해야 할 때처럼 색은 그대로 두고 표기법만 갈아 끼우면 되는 순간에 씁니다. 값을 입력하는 즉시 세 형식이 모두 계산되고, 각 값은 클릭 한 번으로 복사됩니다.
색상 변환 사용 방법
색상 값 입력하기
#3b82f6, rgb(59,130,246), hsl(217,91%,60%) 중 어떤 표기로 적어도 됩니다. 옆의 색상 선택기로 직접 골라도 입력란에 반영됩니다.
변환 결과 보기
인식된 색이 큰 사각형으로 표시되고 그 아래에 HEX·RGB·HSL 값이 나란히 나옵니다.
필요한 값 복사하기
쓰려는 형식 옆의 복사 아이콘을 누르면 그 값만 클립보드에 담깁니다.
자주 묻는 질문
어떤 표기까지 알아듣나요?
여섯 자리 HEX와 #fff 같은 세 자리 축약형, rgb()와 rgba() 표기, hsl()과 hsla() 표기를 인식합니다. red나 skyblue 같은 색 이름, CMYK 값은 인식하지 못합니다. 알아보지 못한 입력에는 색상 형식을 인식할 수 없다는 안내가 대신 표시됩니다.
투명도(알파) 값은 어떻게 되나요?
무시됩니다. rgba(59, 130, 246, 0.5)처럼 네 번째 값을 넣어도 앞의 세 숫자만 읽어 불투명한 색으로 변환하고, 결과에도 알파 값은 나오지 않습니다. 투명도가 중요한 작업이라면 변환된 값에 원래 알파를 직접 다시 붙여 주셔야 합니다.
HSL로 바꿨다가 되돌리면 값이 조금 달라집니다.
HSL 결과를 정수로 반올림해 표시하기 때문입니다. 소수점 아래가 버려지므로 HEX에서 HSL로 갔다가 다시 HEX로 돌아오면 한두 단계 어긋날 수 있습니다. 색을 오래 보관하거나 그대로 전달해야 한다면 HEX나 RGB 표기를 기준으로 삼으시길 권합니다.