HEX 색상을 RGB로 어떻게 변환하나요?

Paste or type your HEX value (for example #ff8800) into the HEX field. The converter instantly updates the RGB and HSL fields, showing the equivalent values and a live preview.

HEX, RGB, HSL은 무엇이 다른가요?

HEX is a hexadecimal notation for red, green, and blue channels used in CSS. RGB expresses the same channels as decimal numbers from 0 to 255. HSL describes a color by hue, saturation, and lightness, which is often more intuitive for adjusting colors.

3자리 축약형 HEX 코드도 지원하나요?

Yes. 축약형 HEX values like #f80 are automatically expanded to their full six-digit form (#ff8800) before conversion, so both formats work seamlessly.

제 색상 데이터가 서버로 전송되나요?

No. All conversions happen entirely in your browser using JavaScript. Nothing is uploaded or stored, so your work stays completely private.

색상 변환기

HEX, RGB, HSL 색상을 실시간으로 변환하고 미리보기와 한 번의 클릭 복사를 제공합니다.

색상 선택기

Formats

HEX

RGB

HSL

H°

HEX#ff8800

RGBrgb(255, 136, 0)

HSLhsl(32, 100%, 50%)

이용 방법

세 단계면 색상 형식을 서로 변환할 수 있습니다.

고르거나 직접 입력

색상 선택기를 쓰거나 HEX, RGB, HSL 칸에 값을 직접 입력하세요.

모든 형식 한눈에 보기

모든 표기가 실시간으로 갱신되며 큼직하고 정확한 색상 미리보기가 함께 표시됩니다.

Copy & Use

각 형식 옆의 복사 버튼을 누르면 CSS에 바로 쓸 수 있는 문자열이 복사됩니다.

색상 팁

각 색상 형식을 더 잘 활용하는 방법입니다.

HSL로 색 조절하기

HSL을 쓰면 색조는 그대로 두고 L이나 S 값만 조절해 색을 밝게, 어둡게, 또는 채도를 낮게 만들기 쉽습니다.

축약형 HEX

#f80 같은 코드는 #ff8800으로 확장됩니다. 축약형은 각 채널의 숫자가 반복될 때만 쓸 수 있습니다.

일관된 브랜드 색상

디자인 도구용으로는 브랜드 색상을 HEX로 보관하되, 캔버스·그라데이션·투명도 작업을 위해 RGB도 함께 알아 두세요.

명암 대비 확인

글자와 배경의 밝기 차이를 충분히 두어야 화면이 읽기 쉽고 접근성이 좋아집니다.