색상 변환기·팔레트

HEX, RGB, HSL을 서로 바꾸고 대비 비율과 어울리는 배색까지 한 번에 확인해요. 색상 칸을 클릭하면 HEX 값이 복사돼요.

색상 입력

변환 결과

글자 대비 (WCAG)

이 색을 배경으로 썼을 때의 대비예요. 투명도가 있어도 투명도를 뺀 색 기준으로 계산해요. 비율은 소수 둘째 자리에서 내림해서 보여줘요.

명도 단계

같은 색상과 채도에서 명도를 10%부터 90%까지 10% 간격으로 바꾼 9단계예요. 투명도는 빼고 만들어요.

어울리는 배색

색상환(HSL의 색상 각도)을 돌려서 만든 배색이에요. 칸을 클릭하면 HEX 값이 복사돼요.

사용 방법

  1. 색상 칸에 HEX, rgb(), hsl() 중 편한 형식으로 입력하세요. 투명도가 있는 rgba(), hsla()와 8자리 HEX도 읽어요.
  2. 색상 선택기와 투명도 슬라이더로 직접 골라도 돼요. 고르면 입력 칸이 HEX 값으로 바뀌어요.
  3. 변환 결과의 "복사" 버튼으로 원하는 형식을 복사하세요.
  4. 대비 비율에서 AA, AA 큰 글씨, AAA 통과 여부를 확인하고, 명도 단계와 배색 칸을 클릭하면 HEX가 복사돼요.

자주 묻는 질문

어떤 입력 형식을 지원하나요?

HEX는 #f80, #f808, #ff8800, #ff880080(3/4/6/8자리, #는 생략 가능)을 지원해요. 함수 형식은 rgb(255, 136, 0), rgba(255, 136, 0, 0.5), rgb(255 136 0 / 50%), hsl(32, 100%, 50%), hsla(32 100% 50% / 0.5)처럼 쉼표나 공백, 슬래시 표기를 모두 읽어요. 색상 이름(red 등)은 아직 지원하지 않아요.

HEX 8자리의 마지막 두 자리는 뭔가요?

투명도(알파)예요. 00이 완전 투명, ff가 완전 불투명이고 80은 약 50%예요. 투명도를 0.5로 입력하면 255를 곱해 반올림한 80이 돼요.

대비 비율은 어떻게 계산하나요?

WCAG 2.x의 상대 휘도 공식을 써요. 밝은 쪽 휘도에 0.05를 더한 값을 어두운 쪽 휘도에 0.05를 더한 값으로 나눈 비율이에요. 일반 글자는 4.5:1 이상이면 AA, 7:1 이상이면 AAA예요. 큰 글씨(약 24px 이상, 굵은 글씨는 약 18.7px 이상)는 AA 기준이 3:1이에요.

HSL 값이 입력한 값과 조금 달라요.

HSL은 화면 표시용으로 정수로 반올림해요. RGB는 0~255 정수라서 HSL을 RGB로 바꿨다가 다시 HSL로 바꾸면 1 정도 차이가 날 수 있어요.

배색은 어떻게 만드나요?

입력한 색의 색상 각도에 더해서 만들어요. 보색은 180도, 유사색은 ±30도, 삼각 배색은 120도 간격 3색, 분할 보색은 150도와 210도, 사각 배색은 90도 간격 4색이에요. 채도와 명도는 입력한 색과 같게 유지해요.

다른 도구