본문 바로가기
다른 허브 개발·데이터 텍스트 셀러 금융·세금 생활·건강 디자인·CSS 이미지·AI 게임

색상 코드 변환

브라우저 처리

HEX·rgb()·hsl()·hwb()·oklch()·색 이름 등 어떤 CSS 색이든 넣으면 HEX(투명도 포함)·RGB·HSL·HWB·OKLCH·CMYK·안드로이드 ARGB로 한 번에 바꾸고, 배경색과의 대비도 계산합니다.

사용 전 확인
  • 파일·이미지·문서 처리 도구는 브라우저 안에서 처리되더라도 원본에 개인정보나 민감 정보가 포함될 수 있습니다. 공유·제출 전 원본과 결과를 한 번 더 확인하세요.
도구 실행입력 후 결과 확인
색상 코드 변환 샘플 실행

디자이너는 HEX로, 개발 코드는 rgb()나 hsl()로, 최신 CSS는 oklch()로, 인쇄 업체는 CMYK로 색을 말합니다. 같은 색을 형식마다 다시 계산하는 일은 번거롭고 실수하기 쉽습니다.

브라우저 처리
샘플 결과
HEX #ED7665
RGB rgb(237 118 101)
HSL hsl(8 79% 66%)
HWB hwb(8 40% 7%)
OKLCH oklch(70.02% 0.1502 29.72)
CMYK C0 M50 Y57 K7
#FFFFFF 배경과 대비 2.85:1 — 글자용으로 부족
자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.

색상 코드 변환 사용 가이드

디자이너는 HEX로, 개발 코드는 rgb()나 hsl()로, 최신 CSS는 oklch()로, 인쇄 업체는 CMYK로 색을 말합니다. 같은 색을 형식마다 다시 계산하는 일은 번거롭고 실수하기 쉽습니다.

이 변환기는 입력한 문자열을 브라우저의 CSS 색 해석기로 읽기 때문에 #RGB·#RRGGBBAA, rgb(14 140 126), hsl(173 82% 30%), tomato 같은 색 이름, oklch()까지 CSS가 이해하는 표기를 모두 받습니다. 결과는 HEX, RGB 두 가지 표기, HSL, HWB, OKLCH, CMYK, 안드로이드용 0xAARRGGBB로 나오고 줄마다 복사 버튼이 있습니다.

투명도가 있는 색은 체크무늬 위에 보여 주고 모든 형식에 알파 값을 붙입니다. 비교할 배경색을 넣으면 WCAG 대비 비율과 등급도 함께 알려 줍니다. 색상 선택기로 골라도 같은 결과가 나옵니다.

사용 방법

  1. '색 입력' 칸에 원하는 표기로 색을 적거나 오른쪽 색상 선택기로 고릅니다.
  2. 필요하면 '배경과 비교할 색'에 실제 배경색을 넣습니다.
  3. 형식별 결과와 대비 등급을 확인합니다.
  4. 필요한 줄의 '복사' 버튼을 누릅니다.

예시: oklch() 색을 다른 형식으로

입력
oklch(70% 0.15 30)
결과
HEX #ED7665
RGB rgb(237 118 101)
HSL hsl(8 79% 66%)
HWB hwb(8 40% 7%)
OKLCH oklch(70.02% 0.1502 29.72)
CMYK C0 M50 Y57 K7
#FFFFFF 배경과 대비 2.85:1 — 글자용으로 부족

OKLCH 값이 입력과 조금 다른 것은 sRGB 정수 값으로 바꾼 뒤 다시 계산했기 때문입니다.

이럴 때 쓰면 좋아요

  • 디자인 시안의 HEX를 코드용 rgb()나 hsl()로 바꿀 때
  • 최신 CSS의 oklch() 값을 HEX로 확인할 때
  • 안드로이드 앱 코드에 넣을 0xAARRGGBB 값이 필요할 때
  • 인쇄 견적 전에 대략적인 CMYK 값을 알아볼 때

문제가 생겼을 때

'읽을 수 없는 색입니다'가 뜹니다.

CSS에서 쓰는 표기인지 확인하세요. rgb(14,140,126), hsl(173 82% 30%), #0E8C7E, tomato처럼 적으면 됩니다. 한글 색 이름은 받지 않습니다.

CMYK 값으로 인쇄했더니 화면과 색이 다릅니다.

색 프로필 없이 계산한 참고값이라 인쇄 용지와 잉크에 따라 달라집니다. 인쇄소의 색 프로필로 변환한 값을 우선하세요.

아주 선명한 display-p3 색이 덜 선명하게 바뀝니다.

결과는 sRGB 기준이라 그 밖의 넓은 색역 색은 가장 가까운 sRGB 색으로 잘립니다. 원래 값이 필요하면 입력한 표기를 그대로 쓰세요.

활용 팁

  • 8자리 HEX(#RRGGBBAA)의 마지막 두 자리는 투명도입니다. 80은 약 50%입니다.
  • HSL은 색상각을 돌려 비슷한 색을 만들 때, OKLCH는 밝기를 고르게 맞출 때 편합니다.
  • 대비 계산은 투명도를 빼고 불투명한 색으로 계산하므로, 반투명 색은 배경과 섞인 실제 색으로 다시 확인하세요.

자주 묻는 질문

어떤 표기까지 읽을 수 있나요?

HEX는 직접 읽고, 그 밖의 표기는 이 브라우저가 CSS 색으로 인정하는지 확인한 뒤 캔버스로 sRGB 값을 얻습니다. 그래서 최신 브라우저일수록 oklch(), color() 같은 새 표기도 더 많이 읽습니다.

HWB는 무엇인가요?

색상(Hue)에 흰색(Whiteness)과 검정(Blackness)을 얼마나 섞었는지로 색을 나타내는 방식입니다. 물감에 흰색이나 검정을 섞는 감각과 비슷해 직관적입니다.

안드로이드 ARGB는 어디에 쓰나요?

안드로이드 코드에서 Color 값을 0xFF0E8C7E처럼 알파·빨강·초록·파랑 순서의 16진수로 적을 때 그대로 쓸 수 있습니다.