색상 변환 hex rgb hsl

이 도구가 하는 일

웹에서 색을 지정하는 방법은 여러 가지입니다. HEX는 #22c55e처럼 빨강, 초록, 파랑 값을 16진수로 표기하며 디자인 도구와 CSS에서 가장 널리 쓰입니다. RGB는 각 채널을 0에서 255 사이의 십진수로 표기해 코드에서 계산하기 편합니다. HSL은 색상(hue), 채도(saturation), 명도(lightness)로 표현하는데, 같은 색 계열에서 밝기만 조정하거나 색상환에서 보색을 찾는 작업이 훨씬 직관적입니다.

이 도구는 한 형식으로 입력하면 나머지 형식의 값을 함께 보여주고 실제 색상을 미리보기로 표시합니다. 디자이너에게 받은 HEX 값을 코드에서 투명도와 함께 쓰기 위해 RGB로 바꾸거나, 버튼의 hover 상태 색을 만들기 위해 HSL로 바꿔 명도만 조정하는 작업에 사용합니다.

언제 사용하나요

디자인 시안의 HEX 색을 CSS의 rgba로 옮길 때, 기존 색상보다 조금 밝거나 어두운 변형을 만들 때, 테마 색상 팔레트를 정리할 때, 로그나 코드에 남은 색상 값이 실제로 어떤 색인지 확인할 때 사용합니다.

입력과 출력 예시

주의사항

변환 과정에서 반올림이 일어나 원본과 미세하게 다른 값이 나올 수 있습니다. HEX와 RGB는 정수 단위로 대응되지만 HSL은 실수 계산을 거치기 때문에, HEX에서 HSL로 바꾼 뒤 다시 HEX로 되돌리면 마지막 자리가 달라질 수 있습니다. 또한 화면에 보이는 색은 모니터의 색 프로필과 밝기 설정에 따라 달라지므로, 정확한 색이 중요한 작업에서는 실제 기기에서 확인해야 합니다. 접근성 기준을 맞춰야 한다면 색상 대비도 별도로 검토하십시오.

자주 묻는 질문