색상 코드 변환기 — HEX · RGB · HSL · OKLCH

HEX 코드를 RGB·HSL·OKLCH 로 바꾸고 반대로도 읽어요. 배경색을 하나 더 넣으면 WCAG 대비비가 나오고, 일반 텍스트·큰 텍스트의 AA·AAA 통과 여부까지 바로 보여줘요. 계산은 전부 브라우저 안에서 해요.

사용 방법

  1. 색상 칸에 HEX·rgb()·hsl() 을 붙여넣거나 색 선택기로 고르세요.
  2. HEX·RGB·HSL·OKLCH 값을 복사 버튼으로 그대로 가져가세요.
  3. 배경색을 넣으면 대비비와 AA·AAA 통과 여부가 표시돼요.

대비비는 WCAG 2.x 상대휘도 공식으로 계산해요. 알파(투명도)는 무시해요 — 반투명 색의 실제 대비는 뒤에 깔린 배경에 따라 달라지니, 합성된 최종 색을 넣어야 정확해요.

OKLCH 는 CSS Color 4 의 지각 균등 좌표계예요. 명도(L)를 고정하고 색상각만 바꾸면 사람 눈에 느껴지는 밝기가 비슷하게 유지돼서, 디자인 토큰의 색 계단을 만들 때 HSL 보다 예측이 쉬워요.

자주 묻는 질문

HEX 와 RGB 는 뭐가 다른가요?

표기법만 달라요. #FF8800 은 16진수로, rgb(255, 136, 0) 은 10진수로 쓴 같은 색이에요.

대비비가 얼마면 통과인가요?

일반 텍스트는 4.5:1(AA)·7:1(AAA), 24px 이상이거나 굵은 18.66px 이상인 큰 텍스트는 3:1(AA)·4.5:1(AAA) 이에요.

명도 램프는 어디에 쓰나요?

같은 색의 밝고 어두운 단계를 한 번에 얻을 수 있어서, 버튼 hover·비활성 색이나 다크 모드용 색을 만들 때 씁니다.

관련 도구

  • 개발자 도구 — JSON·Base64·URL·정규식·타임스탬프·JWT·Cron·CIDR·Diff.
  • 이미지 압축 — 업로드 없이 브라우저에서 이미지를 압축·리사이즈해요.
  • 글자수 세기 — 글자·단어·줄·바이트 수를 실시간으로 세요.
  • QR 코드 생성기 — 링크·텍스트를 QR 코드로 만들어 PNG로 저장해요.