색상 코드 변환 (HEX · RGB · HSL)
#2F5BD3을 rgb()·hsl()로, 반대로도. 색 고르기와 흰·검은 글자 명암비까지.
- HEX
- #2F5BD3
- RGB
- rgb(47, 91, 211)
- HSL
- hsl(224, 65%, 51%)
색상 코드 변환 한눈에 보기
색상 코드 변환은 HEX(#2F5BD3), rgb(), hsl() 색상 코드를 서로 바꾸고, 그 색 위에 흰 글자·검은 글자를 올렸을 때 명암비가 충분한지 알려 주는 무료 웹 도구입니다.
| 읽는 형식 | #RGB·#RRGGBB·#RRGGBBAA, rgb()/rgba(), hsl()/hsla(), 255,0,0 |
|---|---|
| 바꾸는 형식 | HEX, RGB, HSL(투명도 있으면 rgba·hsla) |
| 명암비 | 흰 글자·검은 글자 대비 WCAG 2.x 명암비와 AA·AAA 통과 여부 |
| 색 고르기 | 브라우저 색 선택기로 바로 고르기 |
| 처리 위치 | 내 브라우저(서버 전송 없음) |
색상 코드 변환 쓰는 법
- 칸에 #2F5BD3, rgb(47, 91, 211), hsl(224, 64%, 51%) 중 아무 형식이나 넣으면 세 형식이 바로 나옵니다. # 없이 2F5BD3만 넣거나 47,91,211처럼 숫자만 넣어도 됩니다.
- 오른쪽 '고르기' 칸을 누르면 색 선택기가 열려 눈으로 색을 고를 수 있습니다. 고른 색은 HEX로 칸에 들어갑니다.
- 각 줄의 복사 버튼으로 필요한 형식만 복사하거나, '모두 복사'로 세 줄을 한 번에 가져갑니다.
- 아래에는 그 색을 배경으로 흰 글자·검은 글자를 올린 예와 명암비가 나옵니다. 버튼·배너 글자색을 정할 때 4.5:1 이상(AA)인 쪽을 고르세요.
기준과 계산 방식
HEX와 RGB는 어떻게 바뀌나요?
HEX는 빨강·초록·파랑 값(0~255)을 16진수 두 자리씩 이어 쓴 것입니다. #2F5BD3은 2F=47, 5B=91, D3=211이라 rgb(47, 91, 211)과 같은 색입니다. #F00처럼 세 자리는 각 자리를 두 번 쓴 #FF0000의 줄임이고, 여덟 자리의 마지막 두 자리는 투명도입니다.
HSL은 무엇인가요?
HSL은 색상(Hue, 0~360도), 채도(Saturation, %), 명도(Lightness, %)로 색을 적습니다. 같은 색상에서 명도만 바꿔 밝은·어두운 버전을 만들기 쉬워 디자인 토큰을 정할 때 자주 씁니다. 변환은 CSS Color 표준의 공식을 따르고 정수로 반올림해 보여 줍니다.
명암비는 어떻게 계산하나요?
WCAG 2.x 공식에 따라 두 색의 상대 휘도(L)를 구해 (밝은 L + 0.05) ÷ (어두운 L + 0.05)로 계산합니다. 1:1(같은 색)부터 21:1(흰색과 검은색)까지이며, 본문 글자는 4.5:1 이상이면 AA, 7:1 이상이면 AAA, 큰 글자(약 24px 이상)는 3:1 이상이면 AA입니다. 투명도는 빼고 불투명한 색으로 계산합니다.
자주 묻는 질문
#2F5BD3과 #2f5bd3은 다른 색인가요?
같은 색입니다. 16진수는 대소문자를 가리지 않습니다. 이 도구는 결과를 대문자로 보여 줍니다.
포토샵·피그마 색을 CSS로 옮기려면?
디자인 도구에서 HEX 값을 복사해 넣으면 rgb()·hsl()이 함께 나옵니다. 투명도가 있는 색이면 rgba()나 여덟 자리 HEX를 쓰세요.
명암비가 '부족'이면 어떻게 하나요?
배경색의 명도를 낮추거나(HSL의 L 값을 줄이기) 글자색을 반대쪽(흰색↔검은색)으로 바꿔 보세요. 숫자를 바꿀 때마다 명암비가 바로 다시 계산됩니다.
최종 갱신 · 작성 patrick(개인 개발자)
출처·참고: W3C — WCAG 2.2 명암비(최소) · W3C — CSS Color Module Level 4