색상 변환기
HEX, RGB, HSL, HSV, CMYK 간 색상 변환
입력하거나 선택하면 5가지 표현이 실시간으로 업데이트됩니다.
색 공간과 그 세부 사항
한 번 붙여넣기로 모든 형식
"indigo", "#4f46e5", rgb(79,70,229) 또는 hsl(245,58%,59%)를 붙여넣으면 다섯 가지 표현이 모두 즉시 표시됩니다. 모드마다 색상을 다시 입력할 필요가 없습니다.
선택기 포함 라이브 견본
입력하거나 네이티브 색상 선택기를 드래그할 때 미리보기가 업데이트되므로 변환하는 것이 보이는 견본과 정확히 일치합니다.
한 번의 클릭으로 복사
각 형식 줄에 복사 버튼이 있으며 모든 것이 브라우저에서 오프라인으로 작동합니다. 팔레트 정리에 업로드가 필요 없습니다.
색상 변환기란?
색상 변환기는 도구마다 다른 형식 간에 하나의 색상을 번역합니다. 디자인 소프트웨어는 HEX나 CMYK를 내보내고, 프런트엔드 엔지니어는 CSS용 rgb()나 hsl()이 필요하며, 데이터 도구는 hsv()를 원할 수 있습니다. 색상 선택기를 다섯 번 열지 말고 가진 값을 붙여넣으면 다른 모든 값을 즉시 볼 수 있습니다: "#4f46e5" → rgb(79, 70, 229) → hsl(245, 58%, 59%).
할 수 있는 일
- hex(#fff, #ffffff, #rrggbbaa)와 rgba() 입력 파싱
- 모든 입력에 대한 rgb / hsl / hsv / cmyk 동등 값 계산
- 입력 또는 선택에 따라 업데이트되는 라이브 미리보기 견본
- 있는 경우 알파 보존(8자리 hex, rgba)
- 각 형식을 자체 버튼으로 복사
- 시각적 선택을 위한 네이티브 색상 선택기
언제 사용하나
- 디자인 도구의 브랜드 색상을 CSS 변수로 이동
- 인쇄용 CMYK 값을 웹 안전 hex로 변환
- CSS 그라데이션과 다크 모드 팔레트용 hsl 값 얻기
- 다른 변환기가 색상을 어떻게 반올림했는지 확인
개인정보: 변환은 전적으로 브라우저에서 발생하며, 입력한 내용이 업로드되지 않습니다.
HEX, RGB, HSL 및 진정한 대비란 무엇인가
- HEX와 RGB는 서로 다른 표기법일 뿐, 동일한 sRGB 값을 나타냅니다. 이들 간의 변환은 순전한 산술 계산이며, 색상 왜곡이 발생하지 않습니다.
- HSL은 동일한 색역(gamut)을 원기둥 형태로 표현합니다: 색상(hue)은 회전하고, 채도(saturation)는 중심에서 바깥으로 퍼지며, 명도(lightness)는 수직으로 증가합니다. 그러나 동일한 HSL 값 차이가 시각적으로 동일하게 인식되지는 않으며, 이를 해결하기 위해 OKLCH 같은 지각 기반(perceptual) 색 공간이 개발되었습니다.
- WCAG 대비 비율은 원시 RGB 평균값이 아니라 감마 확장 후 상대 밝기(relative luminance)를 기준으로 계산됩니다. 아래 체커는 공식 WCAG 2.1 공식을 사용합니다.
자주 묻는 질문
어떤 형식을 지원하나요?⌄
hex(3, 4, 6, 8자리 — 8자리는 알파 포함), rgb()/rgba(), hsl()/hsla(), hsv()/hsb(), cmyk(). #FFF, rgb(255 0 0), hsl(0, 100%, 50%) 어느 쪽이든 자동으로 정규화됩니다.
변환이 정확한가요?⌄
표준 CSS 변환 공식과 일치합니다(채널은 정수로 반올림). HSL/HSV 색조는 소수 한 자리 정밀도로 보존되고, CMYK는 기존 변환으로 계산되어 소수 한 자리 백분율로 반올림됩니다.
내 색상이 어딘가 전송되나요?⌄
아니요. 모든 것이 순수 JavaScript로 브라우저에서 실행되며, 전송되거나 저장되지 않습니다.