색상 코드 변환기

색을 고르고 HEX, RGB, HSL, HSV, CMYK 사이에서 변환합니다. 흰색·검은색 글자와의 대비를 확인하고, 밝은 톤과 어두운 톤도 볼 수 있습니다.

글자 대비 (WCAG)

밝은 톤과 어두운 톤

색 견본을 누르면 그 색을 사용합니다.

색상 변환 방법

  1. #2563eb, 2563eb, rgb(37, 99, 235), hsl(221 83% 53%) 같은 CSS 형식이나 tomato 같은 색 이름을 입력하거나 붙여 넣으세요. 컬러 피커로 직접 골라도 됩니다.
  2. 색이 HEX, RGB, HSL, HSV, CMYK로 표시됩니다. 필요한 형식 옆의 복사를 누르세요.
  3. 대비 상자를 보고 이 색 위에서 흰색이나 검은색 글자가 잘 읽히는지 확인하고, 밝은 톤이나 어두운 톤을 눌러 더 밝거나 어두운 색을 살펴보세요.

색상 형식 설명

  • HEX – 웹 디자인에서 가장 흔한 형식으로, 빨강, 초록, 파랑을 각각 00부터 FF까지의 16진수 두 자리로 나타냅니다.
  • RGB – 같은 빨강, 초록, 파랑 값을 0부터 255까지의 숫자로 나타냅니다.
  • HSL – 색상(색상환의 0–360°), 채도, 밝기(lightness)입니다. 직접 조절하기 쉬워서, 밝기만 바꾸면 더 밝거나 어두운 색을 얻을 수 있습니다.
  • HSV / HSB – 색상, 채도, 명도(value, 밝기)로, Photoshop, Figma 같은 디자인 앱의 컬러 피커에서 씁니다.
  • CMYK – 인쇄에 쓰는 시안(청록), 마젠타(자홍), 노랑, 검정 잉크입니다. 여기 나오는 값은 단순 변환이며, 전문 인쇄 작업은 색상 프로필을 쓰므로 정확한 값은 인쇄소에 문의하세요.

대비 결과는 무엇을 뜻하나요?

웹 콘텐츠 접근성 지침(WCAG)은 일반 글자에 최소 4.5:1(AA 등급), 큰 글자에 3:1의 대비율을 요구합니다. AAA 등급은 7:1이 필요합니다. 대비가 좋으면 시력이 약한 사람과 밝은 햇빛 아래에서 휴대폰을 쓰는 사람을 포함해 누구나 버튼과 글자를 쉽게 읽을 수 있습니다.