색상 코드 변환

색을 입력하거나 고르면 모든 표기를 한 번에 보여 주고, 견본과 대비율도 함께 보여 줍니다.

입력값은 브라우저 밖으로 나가지 않음CSS Color 4 WCAG 2.2기준일 2026.10.03

대비

입력

이 도구는 JavaScript가 필요합니다. JavaScript를 켜면 이 자리에서 바로 쓸 수 있습니다. 아래 사용 방법과 자주 묻는 질문은 그대로 볼 수 있습니다.

색상 코드 변환 사용 방법

1#2F5BEA, rgb(47 91 234), rebeccapurple 같은 색을 입력하거나, 색 선택기로 고르거나, 「예시 넣기」를 누릅니다.
2견본과 표기별 값을 확인합니다. 대비를 켜면 WCAG 대비율이 나옵니다.
3필요한 줄의 「복사」 버튼을 누릅니다.

색상 코드 변환 옵션

입력: 표기는 자동으로 판별합니다. 3·4·6·8자리 HEX, rgb(), hsl(), hwb(), oklch(), oklab(), CSS 색 이름을 읽습니다. HEX는 앞의 #이 없어도 읽습니다.
대비: 흰색, 검은색, 직접 넣은 색과의 대비율과 WCAG AA·AAA 통과 여부(본문·큰 글자)를 보여 줍니다. 기본으로 켜져 있습니다.
색 선택기: 브라우저의 색 선택기로 고른 색을 HEX로 입력란에 넣습니다.

CSS Color 4 표기

결과는 CSS Color Module Level 4의 새 문법으로 적습니다. 값은 공백으로 나누고 알파는 rgb(47 91 234 / 0.5)처럼 빗금 뒤에 적습니다. 쉼표를 쓰는 예전 표기 rgb(47, 91, 234)와 rgba()도 입력으로는 읽습니다.

OKLCH는 Oklab 색 공간에서 밝기·채도·색상으로 색을 나타냅니다. 밝기를 같은 폭으로 바꾸면 눈에도 같은 폭으로 달라져 보여서 HSL보다 색 팔레트를 만들기 쉽습니다. sRGB 화면이 표현하지 못하는 색도 적을 수 있기 때문에, 어떤 OKLCH 입력에는 「sRGB 밖」 표시가 붙습니다.

대비율

대비율은 WCAG 2.2의 대비 식을 따릅니다. 밝은 색의 상대 휘도에 0.05를 더한 값을, 어두운 색의 상대 휘도에 0.05를 더한 값으로 나눕니다. 같은 색끼리는 1:1, 흰색과 검은색은 21:1입니다. 통과 여부는 반올림하기 전의 값으로 정합니다. 그래서 4.48:1인 색은 4.5:1에 가까워도 AA를 통과하지 못합니다.

색상 코드 변환 예시

HEX → RGB·HSL·OKLCH

입력

#2F5BEA

출력

rgb(47 91 234)
hsl(226 82% 55%)
oklch(53.3% 0.221 265.8)

알파가 있는 HEX
알파 바이트 80은 128/255 = 0.502입니다. 알파는 소수 둘째 자리까지 적으므로 0.5가 됩니다.
입력
```
#2F5BEA80
```
출력
```
rgb(47 91 234 / 0.5)
```
CSS 색 이름
입력
```
rebeccapurple
```
출력
```
#663399
```
색이 아닌 입력
G는 16진수 숫자가 아닙니다.
입력
```
#GGG
```
출력
```
색상으로 읽을 수 없습니다
```

예시는 이 도구를 검증하는 기준 사례의 값입니다.

색상 코드 변환 자주 묻는 질문

입력값이 서버로 전송되나요?

아니요. 입력과 결과는 이 브라우저 안에서만 처리되며 저장하지도 않습니다. 새로 고침하면 사라집니다.

값은 어떻게 반올림하나요?

RGB는 정수입니다. HSL과 HWB는 정수 각도와 정수 퍼센트입니다. OKLCH는 밝기 소수 첫째 자리, 채도 소수 셋째 자리, 색상 소수 첫째 자리까지 적습니다. 알파는 소수 둘째 자리까지입니다. 이렇게 반올림하기 때문에 변환한 값을 다시 넣으면 원래 값과 한두 단계 다를 수 있습니다.

sRGB로 표현할 수 없는 OKLCH 색은 어떻게 되나요?

「sRGB 밖」이라고 표시합니다. 밝기와 색상은 그대로 두고 채도를 sRGB 안에 들어올 때까지 줄여서, 가장 가까운 색을 모든 표기로 보여 줍니다.

AA와 AAA는 무슨 뜻인가요?

WCAG 2.2의 대비 등급입니다. AA는 본문 4.5:1 이상, 큰 글자 3:1 이상이어야 합니다. AAA는 각각 7:1과 4.5:1입니다. 큰 글자는 24px 이상이거나, 굵은 글씨로 18.66px 이상인 글자입니다.

CMYK 값을 인쇄에 써도 되나요?

아니요. 색상 프로파일 없이 단순한 식으로 구한 값이라 실제 인쇄 결과와 맞지 않습니다. 인쇄용은 디자인 프로그램에서 ICC 프로파일로 변환하세요.

처리 방식·표준

처리 위치: 이 브라우저 (내 기기). 전송하거나 저장하지 않습니다.
표준: CSS Color 4 · WCAG 2.2
엔진: culori 4.0.2 (MIT) · ZEKILO Dev 표기·대비 계산 (자체 구현)
HEX는 소문자로 적습니다.
rgb()·hsl()·hwb()의 범위를 벗어난 값은 브라우저처럼 범위 안으로 잘라 냅니다.
반투명한 색의 대비는 그 배경 위에 올렸을 때 보이는 색으로 잽니다.
기준일 2026.10.03
변경 이력: 2026.10.03 처음 공개

오픈소스 라이선스 →

결과가 이상한가요? 오류 신고하기(입력값은 첨부되지 않습니다)

입력