HSL·RGB·HEX 색상 변환, 한 번에 끝내기
웹과 앱 디자인에서 같은 색을 표현하는 방법은 여러 가지입니다. CSS에서 가장 많이 쓰이는 세 가지가 바로 HEX(예: #4a90e2), RGB(예: rgb(74, 144, 226)), HSL(예: hsl(210, 73%, 59%))입니다. 이 색상 변환기는 셋 중 어떤 형식으로 입력하든 나머지 두 형식과 미리보기를 즉시 만들어 줍니다. rgb hsl 변환, hex hsl 변환을 따로따로 계산할 필요 없이 한 번에 처리할 수 있어, 디자인 시안과 코드 사이를 오갈 때 시간을 크게 줄여 줍니다.
HEX·RGB·HSL은 각각 무엇인가요
HEX는 빨강·초록·파랑을 각각 두 자리 16진수로 표기한 6자리 코드입니다. #4a90e2에서 4a는 빨강 74, 90은 초록 144, e2는 파랑 226을 뜻합니다. RGB는 이 세 값을 0~255 십진수로 그대로 적은 것이고, HSL은 사람이 색을 다루기 쉽게 색상(Hue, 0~360°), 채도(Saturation, 0~100%), 명도(Lightness, 0~100%)로 분해한 표현입니다. 색조를 유지한 채 더 밝거나 어둡게, 또는 더 선명하거나 회색에 가깝게 조정할 때는 HSL이 훨씬 직관적이라 디자이너들이 즐겨 사용합니다.
색상은 어떻게 상호 변환되나요
변환의 핵심은 RGB를 중심으로 한 다리 역할입니다. HEX는 단순히 16진수를 10진수로 바꾸면 RGB가 되고, 반대로 각 채널을 두 자리 16진수로 채우면 HEX가 됩니다. RGB를 HSL로 바꿀 때는 세 채널을 0~1로 정규화한 뒤 최댓값과 최솟값으로 명도와 채도를 구하고, 최대 채널이 무엇인지에 따라 색상 각도를 계산합니다. HSL을 다시 RGB로 되돌릴 때는 채도·명도로부터 중간 변수들을 계산해 색상 각도 구간별 공식을 적용합니다. 이 도구는 이러한 표준 공식을 그대로 구현했으므로, 같은 색을 어떤 형식으로 넣어도 일관된 결과가 나옵니다. 다만 부동소수 반올림 때문에 HSL ↔ RGB를 여러 번 왕복하면 ±1 정도의 미세한 차이가 생길 수 있는데, 이는 모든 변환기에서 동일하게 나타나는 정상적인 현상입니다.
이 도구 활용법
- 디자인 툴에서 받은 HEX 코드를 입력해 CSS에서 쓸 rgb·hsl 표기를 즉시 얻으세요.
- HSL로 색상 각도와 명도를 조절하며 컬러 팔레트를 설계할 때 변환값을 바로 확인할 수 있습니다.
- 3자리 단축 HEX(
#abc)도 6자리로 자동 확장해 정확한 RGB·HSL을 보여 줍니다. - 복사하기 버튼으로 HEX·RGB·HSL 세 표기를 한 번에 가져가 코드에 붙여넣을 수 있습니다.
입력값이 형식에 맞지 않으면 안내 토스트가 표시되므로, 잘못된 코드를 그대로 복사해 쓰는 실수를 줄일 수 있습니다. 모든 계산은 브라우저 안에서만 이루어지며 서버로 전송되지 않습니다.
자주 묻는 질문 (FAQ)
Q. HEX 색상을 HSL로 어떻게 변환하나요?
A. HEX를 RGB로 분해한 뒤 각 채널을 0~1로 정규화하고 최대·최소값으로 명도와 채도를, 최대 채널 위치로 색상 각도를 계산합니다. 입력만 하면 자동으로 계산됩니다.
Q. RGB와 HSL의 차이는 무엇인가요?
A. RGB는 빛의 세기를 0~255로 더하는 방식이고, HSL은 색상·채도·명도로 나눠 사람이 직관적으로 조절하기 쉬운 방식입니다. 같은 색을 서로 정확히 변환할 수 있습니다.
Q. HSL 입력은 어떤 형식으로 넣어야 하나요?
A. hsl(210, 73%, 59%) 또는 210 73 59처럼 숫자만 넣어도 됩니다. H는 0~360, S·L은 0~100 범위입니다.
Q. 변환 결과를 CSS에 바로 쓸 수 있나요?
A. 네. #RRGGBB, rgb(), hsl() 모두 표준 CSS 문법이라 복사해서 그대로 사용할 수 있습니다.