HEX RGB HSL 색상 코드 변환기
색상 코드를 넣으면 HEX·RGB·HSL을 한 번에 바꿔 보여주고, 글자색과 배경색의 명도대비까지 바로 검사해요.
색상 코드 변환
예: #0E6E5C
색상 코드를 확인해 주세요. 예: #0E6E5C
RGB (0~255)
HSL (H° / S% / L%)
HSL 값은 소수점을 정수로 반올림하기 때문에 RGB로 되돌릴 때 1~2 정도 차이가 날 수 있어요.
웹 접근성 명도대비(WCAG) 검사
색상 코드를 확인해 주세요. 예: #0E6E5C
색상 코드를 확인해 주세요. 예: #FFFFFF
6.16 : 1
가나다 AaBb 123
가나다 AaBb 123
큰 텍스트는 18pt(약 24px) 이상 또는 14pt(약 18.66px) 굵은 글씨를 말해요.
WCAG 기준은 사람이 읽을 수 있는 최소선이에요. 실제 화면에서 직접 눈으로 확인하는 편이 가장 정확해요.
사용 방법
색상 코드 변환기 가이드
색상 코드 변환기는 HEX·RGB·HSL 세 가지 표기법을 한 화면에서 바로 바꿔주는 도구예요. HEX 칸에 코드를 입력하거나 색상 상자를 눌러 고르면 나머지 값이 동시에 바뀌고, 큰 미리보기 카드로 실제 색을 바로 확인할 수 있어요. 아래쪽에는 웹 접근성 명도대비 검사까지 함께 있어서, 색상 코드 변환기 하나로 디자인 작업의 색 선택과 접근성 점검을 같이 끝낼 수 있어요.
변환 원리와 공식
HEX·RGB·HSL은 같은 색을 적는 세 가지 방식일 뿐이에요. HEX는 #RRGGBB처럼 16진수 여섯 자리로, RGB는 rgb(r, g, b)처럼 빛의 삼원색(빨강·초록·파랑) 양으로, HSL은 hsl(h, s%, l%)처럼 색상·채도·밝기 세 값으로 색을 나타내요. 예를 들어 #0E6E5C를 RGB로 바꾸면, 앞 두 자리 0E는 0×16+14=14, 가운데 6E는 6×16+14=110, 마지막 5C는 5×16+12=92가 되어 rgb(14, 110, 92)가 돼요. RGB는 "빛의 양 3개"로 색을 다루는 방식이라면, HSL은 여기서 색상·선명함·밝기라는 감각적인 3개 축으로 관점을 바꾼 표기법이에요. 그래서 색을 그대로 두고 밝기만 살짝 조절하고 싶을 때는 HSL의 L 값만 바꾸면 되어 훨씬 편해요.
명도대비 4.5:1이 기준인 이유
WCAG(웹 콘텐츠 접근성 지침, Web Content Accessibility Guidelines)는 일반 텍스트는 4.5:1, 큰 텍스트는 3:1 이상의 명도대비를 AA 등급 기준으로, 더 엄격한 AAA 등급은 각각 7:1과 4.5:1을 요구해요. 이 숫자는 저시력자나 고령 사용자, 밝은 야외에서 화면을 보는 상황에서도 글자가 실제로 읽히는지를 기준으로 정해진 값이에요.
옅은 회색 글씨가 위험한 이유
흰 배경 위 연회색 글씨는 디자인상 세련돼 보여도 대비비가 3:1 아래로 쉽게 떨어져요. 이럴 때는 배경색을 살짝 어둡게 만드는 것보다 글자색을 진하게 만드는 편이 대비비를 훨씬 크게 끌어올려요.
HSL로 색을 다듬는 요령
같은 색 계열의 밝은 톤과 어두운 톤을 만들고 싶다면 H(색상) 값은 그대로 두고 L(밝기) 값만 10씩 늘리거나 줄여 보세요. 색감은 유지하면서 밝기만 자연스럽게 조절할 수 있어요.
HEX·RGB·HSL 표기법 한눈에 비교
어떤 표기법을 쓰는지는 작업 환경에 따라 달라져요. 아래 표를 참고해 상황에 맞는 형식을 고르세요.
| 표기법 | 형식 예시 | 주요 사용처 | 직관성 |
|---|---|---|---|
| HEX | #0E6E5C | 디자인 시안, 피그마, 스케치 | 낮음(16진수) |
| RGB | rgb(14,110,92) | CSS, 캔버스, 이미지 편집 | 중간 |
| HSL | hsl(168,77%,24%) | CSS 테마 변수, 색상 조절 | 높음(감각적) |
피그마(Figma)나 Zeplin처럼 디자인 툴에서 코드를 복사하면 보통 HEX 형식으로 나와요. CSS에서 어두운 버전·밝은 버전 색상을 유연하게 다루고 싶다면 HSL로 변환해 두면 L(밝기) 값 하나만 조절하면 되어 관리가 훨씬 편해요. 반대로 캔버스(Canvas) API나 WebGL처럼 픽셀 단위로 계산이 필요한 경우에는 RGB가 가장 적합하고, 백엔드에서 색상 데이터를 주고받을 때도 RGB 숫자 세 개가 가장 범용적으로 쓰여요.
자주 실수하는 2가지
실수 1 — HEX 6자리를 3자리로 잘못 축약하기
#AABBCC는 #ABC로 줄일 수 있지만, #A1B2C3은 줄일 수 없어요. 두 자리가 같은 문자여야만 3자리 축약이 가능해요. 잘못 줄이면 전혀 다른 색이 나타납니다.
실수 2 — HSL의 S·L 값을 0~1 범위로 넣기
CSS에서 HSL을 쓸 때 S(채도)와 L(밝기)은 퍼센트(%)로 표기해요. hsl(168, 0.77, 0.24)처럼 소수로 넣으면 의도한 색이 나오지 않아요. 반드시 hsl(168, 77%, 24%)처럼 % 기호를 붙여야 해요.
또 한 가지 자주 혼동하는 점은 알파(투명도) 채널이에요. 투명도가 필요하다면 rgba(14,110,92,0.5) 또는 hsla(168,77%,24%,0.5)처럼 a 값을 추가하거나, 최신 CSS에서는 rgb(14 110 92 / 50%) 구문도 사용할 수 있어요. 이 변환기에서 나온 코드에 투명도가 필요하다면 직접 a 값을 붙여 사용하세요.
자주 묻는 질문
HEX 코드와 RGB 값은 같은 색인가요?
네, 같은 색이에요. HEX는 16진수로, RGB는 10진수 숫자 세 개로 같은 색을 다르게 적는 방식일 뿐이라 색상 코드 변환기로 바꿔도 실제 색은 전혀 달라지지 않아요. 예를 들어 #0E6E5C와 rgb(14, 110, 92)는 완전히 동일한 색이에요.
색상 코드 앞의 #은 무슨 의미인가요?
뒤에 오는 숫자가 16진수라는 것을 알리는 표시예요. 각 자리가 같은 문자를 반복하면 #0f8처럼 3자리로 줄여 쓸 수 있고, 이 경우 #00ff88과 같은 색으로 해석돼요. 단, 두 자리가 동일한 문자일 때만 축약 가능하니 주의하세요.
HSL은 왜 따로 쓰이나요? RGB와 뭐가 다른가요?
RGB는 빛의 삼원색 양을 다루는 방식이라 사람이 직관적으로 조절하기 어려워요. HSL은 색상(Hue)·채도(Saturation)·밝기(Lightness)라는 사람이 이해하기 쉬운 좌표계라서, 같은 색을 더 밝게 또는 연하게 만들 때 편리해요. CSS 테마 작업이나 다크모드 구현 시 특히 유용해요.
웹사이트 글자색과 배경색의 대비 비율은 몇 대 1이어야 하나요?
WCAG AA 기준으로 일반 텍스트는 4.5:1 이상, 큰 텍스트(18pt 이상)는 3:1 이상이 필요해요. 더 엄격한 AAA 기준을 맞추려면 각각 7:1, 4.5:1 이상이 필요해요. 이 색상 코드 변환기 하단의 명도대비 검사 기능으로 바로 확인해 볼 수 있어요.
이 도구에서 확인한 색상 코드를 CSS에 바로 써도 되나요?
네, color: #0E6E5C; 또는 color: rgb(14,110,92);처럼 그대로 붙여 넣으면 돼요. HEX·RGB·HSL 세 표기법 모두 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 문제없이 동작해요.