색상 변환기

HEX · RGB · HSL · HSV · CMYK 상호 변환과 명도 대비, 배색까지 한 곳에서

색상 코드 변환

어느 칸이든 고쳐 쓰면 나머지가 바뀝니다. #abc, rgb(1,2,3), hsl(200 50% 40%)처럼 붙여넣어도 됩니다. CMYK는 프로파일 없는 단순 수식 값입니다.

명도 대비 검사 (WCAG 2.1)
글자색
배경색
대비율
-
AA 일반 글자 4.5:1
AA 큰 글자 3:1
AAA 일반 글자 7:1
AAA 큰 글자 4.5:1
큰 글자 미리보기 24px Bold
일반 글자 16px — 다람쥐 헌 쳇바퀴에 타고파. The quick brown fox.

큰 글자 = 18pt(24px) 이상 또는 14pt(약 18.66px) 이상 굵은 글자. 대비율은 반올림하지 않고 판정합니다.

배색 팔레트 색을 누르면 HEX 복사
밝기 단계 (50~900)

입력한 색 = 500. 50~400은 흰색과 90·80·60·40·20% 섞고(tint), 600~900은 검정과 15·30·45·60% 섞었습니다(shade). 각 칸을 누르면 HEX가 복사됩니다.

사용 방법
  1. 왼쪽 색 견본을 눌러 컬러피커로 고르거나, HEX·RGB·HSL·HSV·CMYK 중 아는 값을 아무 칸에나 입력합니다.
  2. 나머지 형식이 즉시 바뀌고, 각 칸의 복사 버튼은 CSS에 바로 붙일 수 있는 형태(rgb(…), hsl(…))로 복사합니다.
  3. 명도 대비 검사에서 글자색과 배경색을 정하면 WCAG 2.1 AA/AAA 통과 여부를 일반·큰 글자로 나눠 보여 줍니다. 현재 색 버튼으로 위에서 고른 색을 바로 넣을 수 있습니다.
  4. 아래 배색 팔레트와 밝기 단계는 현재 색을 기준으로 자동 생성됩니다. 색을 누르면 HEX가 복사됩니다.
자주 묻는 질문
WCAG 명도 대비 기준은 어떻게 되나요?

WCAG 2.1 성공 기준 1.4.3(AA)은 일반 글자 4.5:1, 큰 글자 3:1 이상, 1.4.6(AAA)은 일반 글자 7:1, 큰 글자 4.5:1 이상입니다. 큰 글자는 18pt(약 24px) 이상, 또는 14pt(약 18.66px) 이상의 굵은 글자입니다. 대비율 = (밝은 색 상대휘도 + 0.05) ÷ (어두운 색 상대휘도 + 0.05)로 계산하며, 4.49:1처럼 기준에 조금 못 미치면 반올림하지 않고 불합격입니다.

RGB와 CMYK 변환값이 인쇄 결과와 다른 이유는?

이 도구의 CMYK는 K = 1 − max(R,G,B) 방식의 단순 수식 변환입니다. 실제 인쇄 색은 용지·잉크·ICC 프로파일(예: Japan Color, FOGRA)에 따라 달라지므로 인쇄용 최종 값은 디자인 프로그램에서 인쇄소 프로파일로 변환하세요. 화면용 참고값으로 쓰기에 알맞습니다.

HSL과 HSV는 무엇이 다른가요?

둘 다 색상(H, 0~360°)과 채도(S)를 쓰지만 HSL의 L은 0%가 검정·100%가 흰색이고 50%에서 가장 선명합니다. HSV(HSB)의 V는 100%일 때 가장 밝고 선명한 색입니다. CSS는 hsl()을 지원하고, 포토샵 등 그래픽 툴의 피커는 HSB를 많이 씁니다.

보색·유사색·삼각 배색은 어떻게 계산하나요?

HSL 색상환에서 색상(H)만 돌려 만듭니다. 보색은 180°, 유사색은 ±30°, 삼각 배색은 120°씩, 분할 보색은 150°·210°, 사각 배색은 90°씩 떨어진 색입니다. 채도와 명도는 원래 색과 같게 유지합니다.

50~900 밝기 단계는 어디에 쓰나요?

디자인 시스템이나 Tailwind 같은 CSS 프레임워크는 한 색을 50(가장 밝음)~900(가장 어두움) 단계로 나눠 배경·테두리·글자색에 씁니다. 이 도구는 입력 색을 500으로 두고 흰색·검정과 섞어 초안을 만들며, CSS 변수나 Tailwind 설정 형태로 한 번에 복사할 수 있습니다.