본문으로 건너뛰기
SPCXTools

색상 변환기

HEX, RGB, HSL, HSV, CMYK 색상을 자유롭게 변환하고 명암비를 확인하세요.

로컬 실행 — 파일이 기기 외부로 전송되지 않습니다

도구 불러오는 중…

색상 변환기 사용 방법

  1. 1원하는 형식의 색상을 입력하거나 붙여넣으세요 — 예: #0EA5E9, rgb(14 165 233), hsl(199 89% 48%) 또는 tomato 같은 CSS 이름 — 또는 색상 선택기를 사용하세요.
  2. 2동일한 색상을 HEX, RGB, HSL, HSV, CMYK로 확인하고 필요한 형식을 복사하세요.
  3. 3흰색 및 검은색 배경에 대한 명암비를 확인하여 해당 색상의 텍스트가 읽기 쉬운지 확인하세요.
  4. 4틴트 및 셰이드 스케일에서 색상 견본을 클릭하여 더 밝거나 어두운 색상을 탐색하세요.

모든 주요 색상 코드 변환

디자이너, 개발자, 마케터는 다양한 도구에 맞춰 색상 코드를 변환해야 할 때가 많습니다. CSS는 HEX나 HSL을, 브랜드 가이드는 RGB와 CMYK를, 디자인 앱은 HSB를 사용하기 때문입니다. 이 색상 변환기는 어떤 포맷을 입력하든 다른 모든 포맷으로 한 번에 변환해 주며, 클릭 한 번으로 간편하게 복사할 수 있습니다. 또한 웹 접근성을 위한 텍스트 명암비를 확인하고, 다양한 명도의 틴트(tints)와 셰이드(shades) 색상표를 생성합니다.

주요 기능

  • 모든 입력 포맷 지원: HEX(3, 4, 6 또는 8자리), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, 일반 숫자 3개 조합 및 CSS 색상 이름.
  • 한 번에 모든 결과 출력: HEX, RGB, HSL, HSV 및 CMYK로 동시 변환되며 각각 복사 버튼이 제공됩니다.
  • 투명도 지원 — HEX8, RGBA 및 HSLA의 알파(alpha) 값을 유지합니다.
  • 기본 색상 선택기를 통해 시각적으로 색상을 선택할 수 있습니다.
  • WCAG 명암비 검사기: 흰색 및 검은색 배경 대비 명암비를 확인하고, 일반 텍스트 및 큰 텍스트에 대한 AA 등급 결과를 제공합니다.
  • 틴트 및 셰이드: 밝기 10%에서 90%까지의 색상표를 제공하며, 색상 견본을 클릭하면 바로 적용됩니다.

색상 포맷 설명

  • HEX — #RRGGBB 형태의 16진수 코드로 웹 디자인에서 가장 많이 쓰이는 포맷입니다. 선택적으로 4번째 쌍을 추가해 투명도를 설정할 수 있습니다.
  • RGB — 빨강(Red), 초록(Green), 파랑(Blue)을 0부터 255까지의 숫자로 표현하며, 화면에서 색상을 구현하는 기본 방식입니다.
  • HSL — 색조(Hue, 색상환에서의 위치), 채도(Saturation, 선명도), 명도(Lightness)로 구성됩니다. 명도만 조절하여 같은 색상의 더 밝거나 어두운 버전을 쉽게 만들 수 있어 수동으로 조정하기 편리합니다.
  • HSV / HSB — 색조(Hue), 채도(Saturation), 명도(Value/Brightness)로 구성되며, 디자인 도구의 색상 선택기에서 주로 사용됩니다.
  • CMYK — 시안(Cyan), 마젠타(Magenta), 노랑(Yellow), 검정(Key) 잉크의 비율을 나타내며 인쇄용으로 사용됩니다.

예시

하늘색 #0EA5E9는 rgb(14, 165, 233), hsl(199, 89%, 48%), hsv(199, 94%, 91%)이며 대략 cmyk(94%, 29%, 0%, 9%)입니다. 흰색 배경과의 명도 대비는 약 2.8:1로 큰 제목이나 아이콘에는 적합하지만, 4.5:1 이상이어야 하는 본문 텍스트에 사용하기에는 너무 낮습니다. 검은색 배경에서는 약 7.6:1로 기준을 여유 있게 충족합니다.

색상 작업 팁

  • HSL로 팔레트 구성하기. 색조와 채도를 고정하고 명도만 조절하여 일관된 버튼 상태, 배경, 테두리를 만들어 보세요.
  • 명도 대비 미리 확인하기. 흰색 배경에 글씨를 쓸 때 브랜드 컬러가 너무 밝은 경우가 많습니다. 텍스트에는 더 어두운 색조를, 포인트 컬러로는 원래 색상을 사용하세요.
  • 의미를 전달할 때 색상에만 의존하지 마세요 — 색각 이상자를 위해 아이콘이나 라벨을 추가하세요.
  • 인쇄 시 색상 차이 고려하기. 밝은 RGB 색상, 특히 선명한 파란색과 초록색은 CMYK로 인쇄할 때 탁해 보이는 경우가 많습니다.

이미지 작업도 필요하신가요? 이미지 변환기를 사용하면 JPG, PNG, WebP 포맷을 서로 변환할 수 있습니다. CSS용 작은 이미지나 아이콘을 인코딩하려면 Base64를 사용해 보세요.

자주 묻는 질문 (FAQ)

HEX를 RGB로 어떻게 변환하나요?
HEX 색상은 빨간색, 초록색, 파란색을 나타내는 세 쌍의 16진수로 구성됩니다. 각 쌍을 16진수에서 10진수로 변환하세요. 예를 들어 #FF8800에서 FF = 255, 88 = 136, 00 = 0이므로 색상은 rgb(255, 136, 0)이 됩니다. #F80과 같은 3자리 축약형은 먼저 각 자리를 두 번 반복하여 계산합니다.
HSL과 HSV(HSB)의 차이점은 무엇인가요?
두 모델 모두 색조(0~360°)와 채도로 색상을 정의하지만, 세 번째 값이 다릅니다. HSL에서 밝기(lightness) 50%는 순색, 0%는 검은색, 100%는 흰색입니다. 반면 HSV/HSB에서 명도(value/brightness) 100%는 채도가 가장 높은 순색이며, 0%는 검은색입니다. Photoshop, Figma 같은 디자인 앱의 컬러 피커는 주로 HSB를 사용하고, CSS에서는 HSL을 사용합니다.
CMYK 변환이 인쇄용으로 정확한가요?
제공되는 CMYK 값은 RGB에서 수학적으로 변환된 값으로, 기본 참고용으로 유용합니다. 실제 인쇄 색상은 프린터, 잉크, 종이에 따라 달라지며 ICC 색상 프로필로 정의됩니다. 전문적인 인쇄 작업을 하려면 디자인 소프트웨어에서 해당 프린터의 프로필을 사용하여 변환하세요.
명암비는 무엇을 의미하나요?
웹 콘텐츠 접근성 지침(WCAG)은 텍스트와 배경 간의 명암비를 1:1에서 21:1까지 측정합니다. 일반 텍스트가 AA 등급을 통과하려면 최소 4.5:1이 필요하며, 큰 텍스트(약 24 px 또는 18.7 px bold)는 3:1이 필요합니다. 검사기는 해당 색상이 흰색 및 검은색 배경에서 기준을 통과하는지 여부를 보여줍니다.
지원되는 입력 형식은 무엇인가요?
3, 4, 6, 8자리 HEX(# 포함 또는 생략 가능), rgb() 및 rgba(), hsl() 및 hsla(), hsv() 또는 hsb(), cmyk(), 255 136 0과 같은 3개의 일반 숫자, rebeccapurple 같은 CSS 색상 이름을 지원합니다. 쉼표로 구분하는 방식과 최신 공백 구분 방식 모두 사용할 수 있으며, rgb(14 165 233 / 50%)처럼 알파(투명도) 값을 포함할 수도 있습니다.

관련 도구

이미지 변환기파일 업로드 없이 사진과 이미지를 JPG, PNG, WebP 및 AVIF로 일괄 변환하세요.대소문자 변환기텍스트를 Title Case부터 snake_case까지 원하는 대소문자 형식으로 변환하고, 모든 형식을 한 번에 확인하세요.Base64 인코딩 및 디코딩텍스트와 파일을 Base64로 변환하거나 그 반대로 변환하세요. UTF-8 및 Base64URL을 완벽하게 지원합니다.박스 섀도우 생성기실시간 미리보기를 통해 부드럽고 선명한 다중 또는 내부 그림자를 세밀하게 조정하고 CSS 코드를 복사하세요.색맹 시뮬레이터색각 이상자의 시선으로 이미지를 미리 확인하여 디자인 접근성을 검토해 보세요.색상 대비 검사기텍스트의 가독성을 확인하고, WCAG 기준을 통과하는 가장 가까운 색상을 찾아보세요.