색상 변환기

HEX↔RGB↔HSL 변환과 색상 피커

불러오는 중…

이 도구가 도움이 됐나요?

이 도구는

색상 변환기는 HEX 코드 하나를 입력하면 RGB·HSL 값과 CSS 변수용 "R G B" 표기(공백으로 구분)로 한꺼번에 바꿔 보여줍니다. 예를 들어 도구를 열면 기본으로 채워진 인디고 색 #4f46e5를 입력하면 rgb(79, 70, 229), hsl(243, 75%, 59%), CSS 변수용으로는 "79 70 229"가 동시에 표시됩니다.

사용법

  1. 색상 피커를 클릭하거나 HEX 값을 직접 입력합니다(3자리·6자리 모두 가능). 열자마자 인디고 색(#4f46e5)이 기본으로 채워져 있어 바로 결과를 볼 수 있습니다.
  2. RGB, HSL, CSS 변수용 표기(공백으로 구분된 R G B)가 바로 아래에 나타납니다.
  3. 미리보기 박스의 배경이 그 색으로 바뀌고, 박스 안 HEX 코드 글자색은 그 위에서 읽기 쉬운 쪽으로 자동으로 바뀝니다.
  4. 같은 색조의 밝기 변형 6가지 중 하나를 클릭하면 그 색으로 바로 전환됩니다.
  5. 미리보기 박스 아래에서 흰 글씨와 검은 글씨 중 어느 쪽이 대비가 더 큰지, 대비 비율은 얼마인지 확인합니다.
  6. "👥 함께하기"를 누르면 링크로 초대해 상대와 같은 색을 실시간으로 함께 봅니다.

자주 묻는 질문

이 도구가 지원하는 색상 형식은 무엇인가요?
HEX(3자리·6자리)를 입력으로 받아 RGB, HSL, 그리고 공백으로 구분한 'R G B' 표기(rgb(var(--x) / 0.5)처럼 CSS 변수에 넣는 형식)로 변환합니다. CMYK 같은 인쇄용 형식은 지원하지 않습니다.
대비 비율은 어떻게 계산되나요?
WCAG 명세의 상대 휘도 공식으로 각 색의 밝기를 구한 뒤, 흰색·검은색 배경과 짝지어 대비 비율을 계산합니다. 값이 클수록 대비가 커서 글자가 더 잘 보입니다. 기본값 #4f46e5는 흰 배경에서 약 6.3:1로 더 잘 보입니다.
밝기 변형 6가지는 어떤 기준으로 만들어지나요?
입력한 색의 색조(H)와 채도(S)는 그대로 두고 명도(L)만 90/75/60/45/30/15%로 바꿔 6단계 팔레트를 만듭니다.
입력한 색상값이 서버로 전송되나요?
아니요. 모든 변환과 대비 계산은 브라우저 안에서 이뤄지고 서버로 전송되지 않습니다.
미리보기 박스의 글자색은 왜 대비 안내와 다른 기준으로 바뀌나요?
박스 위 HEX 코드 글자색은 그 색 자체의 밝기가 일정 기준을 넘으면 검은 글자, 못 넘으면 흰 글자로 자동으로 바뀌어 그 색 위에서 항상 읽히도록 하는 간단한 판단입니다. 아래에 나오는 대비 비율 안내(이 색을 흰 배경과 검은 배경 중 어디에 글자로 쓰면 더 잘 보이는지)와는 계산 목적이 다릅니다.
밝기 변형을 클릭하면 무슨 일이 일어나나요?
클릭한 밝기의 색으로 입력값 자체가 바뀌어, RGB·HSL·대비 결과가 전부 그 색 기준으로 다시 계산됩니다. 원래 입력했던 색으로 돌아가려면 HEX 값을 다시 입력해야 합니다.
4.5:1이라는 기준은 어디서 나온 건가요?
본문 글자에 권장되는 WCAG의 최소 대비 기준입니다. 이 도구가 계산한 대비 비율이 4.5:1보다 낮으면 본문용 글자색으로는 다시 생각해 보는 것이 좋습니다.
3자리 HEX(#f00)와 6자리는 어떻게 다르게 처리되나요?
3자리는 각 자리를 두 번씩 반복해 6자리로 늘린 뒤 계산합니다. 예를 들어 #f00은 #ff0000과 같은 색으로 처리됩니다.
함께하기로 초대한 사람도 색을 바꿀 수 있나요?
네. 링크로 들어온 사람이 색을 바꾸면 그 값이 실시간으로 반영되어 모두가 같은 색을 보게 됩니다.

비슷한 도구