색상 변환기

HEX, RGB, HSL, HSV, CMYK 간 변환하세요. 실시간 미리보기. 접근성을 위한 WCAG 대비 검사기. 아무것도 브라우저를 떠나지 않습니다.

색상 변환기 작동 방식

색상 변환기는 입력하는 즉시 HEX, RGB, HSL, HSV, CMYK 형식 사이에서 색상을 변환합니다. 또한 선택한 두 색상 사이의 WCAG 대비 비율 검사를 실행하여 일반 텍스트, 큰 텍스트, UI 구성 요소에 대한 AA/AAA 합격/불합격 결과를 보여줍니다. 모든 계산이 브라우저에서 이루어지며 어떤 데이터도 전송되지 않습니다. 입력한 내용은 기기를 벗어나지 않습니다.

디자인 핸드오프에서 동일한 색상이 색상 모델마다 어떻게 보이는지 이해하는 것은 유용합니다. 디자이너는 브랜드 색상을 HEX #1A4F8C로 지정할 수 있지만, CSS 개발자는 테마 용도로 HSL 동등값이 필요하고, 인쇄팀은 CMYK 분석이 필요합니다. 이 도구는 모든 방향에서 동시에 변환을 수행하므로 여러 개의 별도 변환기를 실행할 필요가 없습니다.

작성자: Bastien Sulyan

색상 변환기 단계별 사용 방법

HEX 값을 입력하거나, 색상 스워치를 클릭하거나, 각 필드에 RGB, HSL, HSV, CMYK 값을 입력합니다.
다른 모든 형식 표현이 즉시 업데이트되어 동등한 색상을 보여줍니다.
대비 검사를 실행하려면 두 색상 선택기를 사용해 전경색과 배경색을 선택합니다.
WCAG 대비 비율과 AA 및 AAA 준수 수준에 대한 합격/불합격 배지를 읽습니다.
각 필드 옆의 복사 아이콘을 사용해 색상 값을 복사합니다.

자주 사용되는 사례

UI 디자이너가 테마 시스템의 CSS 커스텀 속성을 작성하기 위해 브랜드 HEX 코드를 HSL로 변환할 때.
웹 개발자가 WCAG AA 준수를 확인하기 위해 컴포넌트를 출시하기 전에 텍스트 색상과 배경 사이의 대비 비율을 확인할 때.
인쇄 디자이너가 인쇄된 브로셔에서 색상을 맞추기 위해 웹 HEX 색상을 받아 CMYK 동등값이 필요할 때.
개발자가 캔버스 드로잉 함수에 개별 채널 값을 전달하기 위해 디자인 토큰의 RGB 분석이 필요할 때.

자주 묻는 질문

도구가 알파(투명도) 값을 지원하나요?

현재 변환기는 완전히 불투명한 색상(알파 = 1)으로 작동합니다. HEXA(8자리 hex)와 RGBA는 현재 범위에 포함되지 않습니다. 불투명도의 경우 CSS에서 rgba() 또는 oklch() 표기법을 사용해 알파 채널을 별도로 설정하세요.

입력한 색상이 저장되거나 전송되나요?

아니요. 색상 변환은 브라우저의 JavaScript 엔진에서 완전히 실행되는 순수 산술(채널 재매핑 및 범위 스케일링)입니다. 여기에 입력한 내용은 서버나 외부 서비스에 도달하지 않습니다.

검사기가 지원하는 WCAG 대비 수준은 무엇인가요?

도구는 WCAG 2.1 성공 기준을 기준으로 보고합니다. AA는 일반 텍스트(18pt 미만 또는 14pt 굵게)에 최소 4.5:1, 큰 텍스트와 UI 구성 요소에 3:1 대비 비율이 필요합니다. AAA는 일반 텍스트에 7:1, 큰 텍스트에 4.5:1이 필요합니다.

CMYK 값이 이 도구와 전문 디자인 소프트웨어 사이에서 다른 이유는 무엇인가요?

이 도구가 수행하는 RGB에서 CMYK 변환은 색상 프로필이 없는 수학적 공식입니다. 전문 디자인 애플리케이션은 잉크 망점 증가와 기재 특성을 고려하는 ICC 색상 프로필을 적용합니다. 여기의 CMYK 값은 근사치에 유용하며, 프로덕션 인쇄에는 항상 전용 소프트웨어에서 프레스 프로필을 적용하세요.

cornflowerblue 같은 CSS 색상 이름을 여기서 변환할 수 있나요?

CSS 명명 색상은 변환기 필드에 직접 입력할 수 없습니다. 명명 색상을 변환하려면 CSS 참조에서 HEX 값을 먼저 찾고(cornflowerblue는 #6495ED), 해당 HEX를 HEX 필드에 붙여넣어 다른 모든 형식을 확인하세요.

페이지가 로드된 후 도구가 오프라인에서 작동하나요?

네. 색상 변환은 외부 의존성이 없는 산술입니다. 페이지가 브라우저 캐시에 있으면 네트워크 연결 없이도 열 수 있으며 모든 변환이 정상적으로 작동합니다.