전체 도구›색상 코드 변환

색상 코드 변환

HEX·RGB·HSL 색상 코드를 서로 변환하고 CMYK 근사값과 흰·검정 배경 명도 대비 표시

HEX, RGB, HSL 가운데 한 형식으로 색을 넣으면 나머지 형식과 CMYK 근사값으로 바꾸고, 흰색·검은색 배경과의 명도 대비를 계산합니다. 웹·앱 디자인과 문서 색을 맞출 때 씁니다.

값 입력

HEX는 # 없이도 됩니다(3자리 가능). RGB·HSL은 숫자 세 개를 쉼표로 구분해 넣으세요.

계산 결과

HEX#1E90FF
RGBrgb(30, 144, 255)
HSLhsl(209.6, 100.0%, 55.9%)
CMYK (단순 근사)C 88% M 44% Y 0% K 0%
흰 배경과 명도 대비3.24 : 1
검정 배경과 명도 대비6.49 : 1
이 색 위의 글자색검정 글자가 더 잘 보임
CMYK는 색 관리 없이 계산한 근사값입니다. 인쇄용 색은 인쇄소의 색 프로파일로 변환하세요. 본문 글자는 명도 대비 4.5 : 1 이상이 WCAG 권장 기준입니다.
참고용 추정치입니다. 실제 신고·납부 전에는 관계 기관이나 전문가에게 확인하세요.

1계산 방법

  • HEX는 빨강·초록·파랑을 16진수 두 자리씩(00~FF) 적은 것이라 그대로 RGB 0~255로 바뀝니다.
  • HSL은 색상(0~360°), 채도(%), 명도(%)로 나타낸 값으로, CSS 표준 변환식으로 RGB와 서로 바꿉니다.
  • 명도 대비는 WCAG 2.x의 상대 휘도 공식으로 (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05)를 계산합니다.

2결과 읽는 법

  • HEX·RGB·HSL은 같은 색을 다르게 적은 것입니다. CSS에 어느 것을 써도 같은 색이 나옵니다.
  • 명도 대비가 4.5 : 1 이상이면 본문 글자, 3 : 1 이상이면 큰 글자에 쓰기 적당한 수준입니다(WCAG AA).
  • HSL을 넣으면 RGB 정수로 반올림하므로, 다시 계산한 HSL은 입력값과 소수점에서 조금 다를 수 있습니다.

3알아두면 좋은 점

  • HEX 3자리(#39F)는 각 자리를 두 번 쓴 6자리(#3399FF)와 같습니다.
  • 브랜드 색을 인쇄할 때는 CMYK 근사값보다 인쇄소가 제시하는 별색·프로파일 값을 따르세요.
  • 같은 색상에서 명도(L)만 바꾸면 버튼의 누름·비활성 색을 만들기 쉽습니다.

4자주 묻는 질문

#1E90FF는 RGB로?
rgb(30, 144, 255)입니다.
명도 대비 기준은 어디서 나왔나요?
W3C의 웹 콘텐츠 접근성 지침(WCAG) 2.x 기준입니다. 국내 한국형 웹 콘텐츠 접근성 지침도 같은 4.5 : 1을 씁니다.
CMYK 값이 인쇄 결과와 다른 이유는?
화면(RGB)과 인쇄(CMYK)는 표현 범위가 달라 색 프로파일 없이 단순 변환하면 차이가 납니다.

5이런 경우가 있었습니다

눈으로만 고른 경우

쇼핑몰을 새로 연 사장 석하람 씨는 연한 민트색 배경에 흰 글씨로 할인 안내를 넣었습니다. 모니터에서는 괜찮아 보였지만 휴대폰 햇빛 아래서는 글씨가 거의 안 보인다는 문의가 이어졌습니다.

대비를 계산한 경우

공공기관 누리집을 고치던 웹 개발자 길태오 씨는 기관 색상의 HEX 값을 넣어 흰 글자와의 대비를 확인했습니다. 기준에 모자라는 조합을 미리 찾아 명도만 조금 낮춘 색으로 바꿔 접근성 점검을 한 번에 통과했습니다.

당신이 고른 글자색, 배경 위에서 충분히 잘 보일까요?

위 두 이야기는 이해를 돕기 위해 가상으로 구성한 사례입니다. 실제 인물이나 사건과 무관합니다.

근거 · W3C CSS Color Module Level 4(HSL 변환), W3C WCAG 2.1(상대 휘도·명도 대비 4.5:1), 한국형 웹 콘텐츠 접근성 지침(KWCAG) — 2026년 기준

적용된 세율·기준값 확인 →