QuickBestGo
KO

색상 변환기

색상 변환기 사용법

색상 변환기는 웹에서 가장 널리 쓰이는 세 가지 색상 형식 간의 즉각적인 변환을 지원합니다: HEX(#RRGGBB 또는 #RGB 축약형), RGB(빨강·초록·파랑 각 0~255), HSL(색조 0~360°, 채도 0~100%, 밝기 0~100%). 어떤 형식으로든 값을 입력하거나 비주얼 색상 선택기를 사용하면 세 가지 표현이 동시에 업데이트됩니다. 실시간 미리보기 스와치가 값을 조정하는 즉시 정확한 색상을 보여줍니다.

각 색상 형식은 디자인과 개발에서 각기 이상적인 용도가 있습니다. HEX는 HTML, CSS 스타일시트, Figma·Sketch 같은 디자인 내보내기 도구에서 주류 형식입니다. RGB는 개별 채널 조작이 필요한 JavaScript 캔버스 작업과 이미지 처리에 선호됩니다. HSL은 가장 직관적인 형식으로: 밝기만 조정하면 색상 단계를 만들 수 있고, 색조만 바꾸면 채도나 밝기를 유지하면서 보색 계열로 이동할 수 있습니다.

변환 공식은 모든 주요 브라우저와 디스플레이 시스템이 사용하는 sRGB 색상 공간 표준을 따릅니다. HEX에서 RGB로 변환할 때는 16진수 두 자리를 십진수(0~255)로 변환합니다. RGB에서 HSL로 변환할 때는 채널 값을 0~1로 정규화한 후 지배적인 채널에서 색조를, 최솟값-최댓값 범위에서 채도를, 최솟값과 최댓값의 평균에서 밝기를 계산합니다. 모든 변환은 브라우저 내에서 처리되며 색상 데이터는 어디에도 전송되지 않습니다.

자주 묻는 질문

HEX를 RGB로 어떻게 변환하나요?
HEX 색상 코드(예: #2563eb)를 입력 필드에 입력하면 변환기가 동등한 RGB와 HSL 값을 즉시 표시합니다. RGB나 HSL 필드에 직접 입력해도 어떤 방향으로든 변환됩니다.
HEX와 RGB 색상의 차이는 무엇인가요?
HEX는 HTML과 CSS에서 사용되는 6자리 16진수 코드(예: #FF5500)입니다. RGB는 같은 색을 세 가지 십진수 값 0~255로 표현합니다(예: rgb(255, 85, 0)). 두 형식은 동일한 색상을 표현하는 서로 다른 표기법입니다.
필요한 CSS 색상 형식을 어떻게 찾나요?
변환기가 HEX, RGB, HSL 형식을 동시에 표시합니다. CSS 규칙에 필요한 형식을 복사하세요 — 세 형식 모두 현대 CSS에서 유효하며 동일한 시각적 결과를 냅니다.
HSL이란 무엇이며 언제 사용해야 하나요?
HSL은 색조(Hue), 채도(Saturation), 밝기(Lightness)의 약자입니다. HEX나 RGB보다 색상 조정이 직관적입니다: 밝기만 바꾸면 색이 밝아지거나 어두워지고, 색조만 바꾸면 관련 색상으로 이동합니다. CSS 테마와 디자인 시스템에서 인기 있습니다.
값을 직접 입력하는 대신 색상 선택기를 사용할 수 있나요?
네. 색상 스와치나 선택기 아이콘을 클릭하면 비주얼 색상 선택기가 열립니다. 드래그하여 색상을 선택하면 세 가지 형식 값이 모두 자동으로 업데이트됩니다.
HEX 색상 코드는 대소문자를 구분하나요?
아닙니다. #FF5500과 #ff5500은 동일합니다. CSS는 대소문자 모두 HEX 코드로 인식합니다. 변환기는 두 가지를 모두 허용하며 출력은 대문자로 정규화됩니다.
HEX 색상의 # 기호는 무엇을 의미하나요?
# 기호는 이것이 16진수 색상 코드임을 CSS에 알려주는 접두사입니다. 색상 값 자체의 일부가 아닙니다. Figma나 Photoshop 같은 일부 도구는 # 접두사 없이 6자리 코드만 표시하기도 합니다.