HEX 코드와 RGB 값은 같은 색인가요?

네, 같은 색이에요. HEX는 16진수로, RGB는 10진수 숫자 세 개로 같은 색을 다르게 적는 방식일 뿐이라 색상 코드 변환기로 바꿔도 실제 색은 전혀 달라지지 않아요.

색상 코드 앞의 #은 무슨 의미인가요?

뒤에 오는 숫자가 16진수라는 것을 알리는 표시예요. 각 자리가 같은 문자를 반복하면 3자리로 줄여 쓸 수 있고, 이 경우 6자리 코드와 같은 색으로 해석돼요.

HSL은 왜 따로 쓰이나요? RGB와 뭐가 다른가요?

RGB는 빛의 삼원색 양을 다루는 방식이라 사람이 직관적으로 조절하기 어려워요. HSL은 색상, 채도, 밝기라는 사람이 이해하기 쉬운 좌표계라서 같은 색을 더 밝게 또는 연하게 만들 때 편리해요.

웹사이트 글자색과 배경색의 대비 비율은 몇 대 1이어야 하나요?

WCAG AA 기준으로 일반 텍스트는 4.5대 1 이상, 큰 텍스트는 3대 1 이상이 필요해요. 더 엄격한 AAA 기준을 맞추려면 각각 7대 1, 4.5대 1 이상이 필요해요.

이 도구에서 확인한 색상 코드를 CSS에 바로 써도 되나요?

네, color 속성 값으로 그대로 붙여 넣으면 돼요. HEX, RGB, HSL 세 표기법 모두 최신 브라우저에서 문제없이 동작해요.

HEX RGB HSL 색상 코드 변환기

색상 코드를 넣으면 HEX·RGB·HSL을 한 번에 바꿔 보여주고, 글자색과 배경색의 명도대비까지 바로 검사해요.

색상 코드 변환

HEX 코드

예: #0E6E5C

색상 코드를 확인해 주세요. 예: #0E6E5C

#0E6E5C

rgb(14, 110, 92)

hsl(169, 77%, 24%)

RGB (0~255)

HSL (H° / S% / L%)

H°

HSL 값은 소수점을 정수로 반올림하기 때문에 RGB로 되돌릴 때 1~2 정도 차이가 날 수 있어요.

최근 사용 색상

웹 접근성 명도대비(WCAG) 검사

글자색(전경)

색상 코드를 확인해 주세요. 예: #0E6E5C

배경색

색상 코드를 확인해 주세요. 예: #FFFFFF

6.16 : 1

AA 일반 텍스트 (4.5:1)-

AA 큰 텍스트 (3:1)-

AAA 일반 텍스트 (7:1)-

AAA 큰 텍스트 (4.5:1)-

가나다 AaBb 123

큰 텍스트는 18pt(약 24px) 이상 또는 14pt(약 18.66px) 굵은 글씨를 말해요.
WCAG 기준은 사람이 읽을 수 있는 최소선이에요. 실제 화면에서 직접 눈으로 확인하는 편이 가장 정확해요.

사용 방법

1💧 색상 코드를 넣어요 — HEX 칸에 붙여넣거나 색상 상자를 눌러 골라요.

2🔤 세 가지 코드를 한 번에 확인해요 — HEX·RGB·HSL이 동시에 바뀌고, 복사 버튼으로 바로 가져가요.

3✅ 대비를 검사해요 — 글자색과 배경색을 넣으면 WCAG 통과 여부가 배지로 나와요.

HEX RGB HSL 색상 코드 변환기

사용 방법

색상 코드 변환기 가이드

변환 원리와 공식

명도대비 4.5:1이 기준인 이유

옅은 회색 글씨가 위험한 이유

HSL로 색을 다듬는 요령

자주 묻는 질문

HEX 코드와 RGB 값은 같은 색인가요?

색상 코드 앞의 #은 무슨 의미인가요?

HSL은 왜 따로 쓰이나요? RGB와 뭐가 다른가요?

웹사이트 글자색과 배경색의 대비 비율은 몇 대 1이어야 하나요?

이 도구에서 확인한 색상 코드를 CSS에 바로 써도 되나요?

관련 도구