HEX · RGB · HSL 변환기 사용 방법
3·6자리 HEX 또는 rgb() 값과 알파값을 입력합니다.
결과에서 확인할 내용
HEX, RGB, HSL, RGBA 값을 동시에 변환해 보여줍니다.
이 도구가 필요한 상황
HEX 또는 RGB 색을 입력해 다른 CSS 색 표현과 알파값이 적용된 미리보기를 확인합니다.
실제 사용 예시
#4f46e5는 rgb(79, 70, 229)입니다. RGBA의 알파 0.5는 색을 절반 밝게 만드는 값이 아니라 배경이 절반 비쳐 보이게 하는 불투명도입니다.
결과를 정확히 읽는 방법
- 세 자리 HEX는 각 자리를 두 번 반복해 여섯 자리로 확장합니다.
- RGB의 각 채널은 0~255 범위여야 합니다.
- HSL 수치는 반올림되므로 왕복 변환 시 작은 값 차이가 날 수 있습니다.
계산 방식
HEX #RRGGBB는 빨강·초록·파랑을 각각 두 자리 16진수(00~FF)로 쓴 것이고, RGB는 같은 값을 0~255의 10진수로 쓴 것입니다. HSL은 색상(0~360°), 채도, 명도로 색을 표현해 “조금 어둡게”처럼 직관적으로 조정할 수 있습니다. 알파값은 0(투명)~1(불투명)이며 8자리 HEX에서는 마지막 두 자리가 알파입니다.
상황별 계산 사례
- #4f46e5는 rgb(79, 70, 229)이고 HSL로는 대략 hsl(243, 75%, 59%)입니다.
- 이 색은 흰 배경에서 대비율이 약 6.29:1로 일반 본문 글자의 WCAG AA 기준(4.5:1)을 넘습니다.
- 회색 #777777은 흰 배경에서 약 4.48:1로 AA 기준에 아주 조금 못 미치고, #999999는 약 2.85:1로 본문에는 부족합니다.
- 8자리 HEX에서 알파 80(16진수)은 128/255로 약 50% 불투명입니다.
자주 하는 실수
- 세 자리 HEX(#fff)와 여섯 자리를 혼동하는 실수.
- RGBA 알파를 “밝기”로 이해하는 실수: 알파는 불투명도입니다.
- 디자인 도구의 색상 프로필 차이로 화면과 인쇄 색이 같을 것이라고 가정하는 실수.
- 색만으로 상태(오류=빨강)를 구분해 색각 이상 사용자를 배려하지 않는 실수.
자주 묻는 질문
HSL 변환을 두 번 하면 값이 달라지나요?
반올림 때문에 한두 단위 차이가 날 수 있습니다. 원본 HEX를 기준으로 보관하세요.
WCAG 대비 기준은 어떻게 되나요?
일반 텍스트는 4.5:1, 큰 글자(약 24px 이상 또는 굵은 18.66px 이상)는 3:1이 AA 기준입니다.
CSS 이름 색(red, tomato)도 쓸 수 있나요?
CSS는 이름 색을 지원하지만 브랜드 색은 HEX나 RGB로 고정해 일관성을 지키는 것이 좋습니다.
완료 전 확인
브랜드 색이나 접근성 기준이 중요한 화면은 실제 배경 위에서 대비를 다시 확인하세요.
사용 전 꼭 확인하세요
알파값은 0부터 1까지이며 접근성 검토에는 실제 배경색도 함께 고려해야 합니다.
도구 설명 최종 수정: 2026년 10월 28일