HEX ↔ RGB ↔ HSL 변환기

HEX, RGB, HSL 형식 간에 색상을 변환하세요. 실시간 미리보기, 빠른 프리셋, CSS용 값 복사. 100% 클라이언트 측 실행, 업로드 없음.

색상 변환기는 웹 디자인과 디지털 그래픽에서 사용되는 다양한 형식 표현 간에 색상을 변환합니다: HEX(#RRGGBB), RGB(0-255, 0-255, 0-255), HSL(색상, 채도, 명도), HSV(색상, 채도, 값). 각 형식은 동일한 색상을 다르게 설명합니다. HEX는 CSS에 간결하고, HSL은 변형 생성에 직관적이며, RGB는 디스플레이 하드웨어에 직접 매핑됩니다. 이 도구는 입력하면서 즉시 변환하며, 모두 브라우저에서 처리됩니다.

브라우저를 떠나지 않고 즉시 색상 변환

HEX, RGB, HSL — 입력하거나 선택하면 세 가지 형식 모두 실시간으로 업데이트됩니다. 한 번의 클릭으로 CSS 즉시 사용 가능한 값을 복사하세요. 업로드 없음, 가입 없음, 제한 없음.

실시간 변환

CSS 즉시 사용 가능

무료 무제한

사용 방법

1
색상 선택
HEX 값을 입력하거나, RGB/HSL 숫자 입력을 조정하거나, 빠른 프리셋을 클릭하세요.
2
실시간 미리보기 확인
상단의 견본이 현재 색상을 보여주기 위해 즉시 업데이트됩니다.
3
아무 형식이나 복사
HEX, RGB 또는 HSL 옆의 복사 버튼을 사용하여 CSS용 값을 복사하세요.

이 색상 변환기를 사용하는 이유

세 가지 형식, 하나의 보기

HEX, RGB, HSL이 모두 동시에 표시되고 편집 가능합니다 — 하나를 변경하면 나머지가 즉시 업데이트됩니다.

CSS용 출력

복사 버튼은 CSS에 바로 붙여넣을 수 있는 `#RRGGBB`, `rgb(r, g, b)` 또는 `hsl(h, s%, l%)` 문자열을 제공합니다.

빠른 프리셋

Tailwind CSS 기본 팔레트나 순흑/순백에서 시작한 다음 슬라이더로 미세 조정하세요.

색상 형식 이해하기

HEX, RGB, HSL, HSV 설명

HEX(#RRGGBB)는 웹 디자인에서 가장 간결한 색상 형식입니다. 각 16진수 쌍(00-FF)은 각각 빨강, 초록, 파랑의 강도를 나타냅니다. 값 00은 채널이 꺼짐(검정)을 의미하고, FF는 최대 강도를 의미합니다. 예를 들어, #FF0000은 순수 빨강, #00FF00은 순수 초록, #FFFFFF는 흰색입니다. HEX는 짧고, 명확하며, 복사-붙여넣기가 쉽기 때문에 CSS, HTML 및 디자인 도구에서 표준 형식입니다. 각 쌍이 동일한 색상(예: 빨강의 경우 #F00)의 약식 표기법(#RGB)도 있습니다.

RGB는 동일한 세 채널에 10진수 값(0-255)을 사용합니다. 디스플레이 하드웨어가 기본적으로 이해하는 형식입니다. LCD 또는 OLED 화면의 각 픽셀에는 256단계의 밝기로 설정할 수 있는 빨강, 초록, 파랑 서브픽셀이 있습니다. RGB는 JavaScript의 캔버스 API(ctx.fillStyle = 'rgb(255, 0, 0)')와 이미지 처리 라이브러리에서도 사용됩니다. RGBA는 투명도를 위한 알파 채널(0-1 또는 0-255)을 추가합니다.

HSL(색상, 채도, 명도)은 사람에게 더 직관적인 방식으로 색상을 설명합니다. 색상은 색상환에서 각도로 측정된 색상 자체입니다(0°=빨강, 120°=초록, 240°=파랑). 채도는 색상의 선명도입니다(0%=회색, 100%=완전한 색상). 명도는 어둡거나 밝은 정도입니다(0%=검정, 50%=보통, 100%=흰색). HSL을 사용하면 기본 색상의 색조(명도 증가), 음영(명도 감소), 톤(채도 감소)을 쉽게 만들 수 있습니다. HSV(색상, 채도, 값)는 유사하지만 명도 대신 값을 사용합니다. 값=100%은 최대 밝기의 색상을 의미하고, 명도=100%은 흰색을 의미합니다.

각 형식을 언제 사용해야 하는가

CSS와 HTML에는 HEX를 사용하세요. 가장 널리 지원되는 형식이고 가장 짧습니다. 색상 채널을 프로그래밍 방식으로 조작해야 하는 경우(예: 두 색상의 RGB 값을 평균하여 혼합)나 알파 투명도(rgba())가 필요한 경우 RGB를 사용하세요. 색상 변형을 만들어야 하는 경우 HSL을 사용하세요. 예를 들어, 명도를 10% 높여 버튼의 호버 상태를 생성하거나, 색상을 고정하고 채도와 명도를 변경하여 단색 구성표를 만드는 경우입니다.

HSL은 CSS 사용자 정의 속성(CSS 변수)에서 특히 강력합니다. --hue: 210을 정의한 다음 스타일시트 전체에서 hsl(var(--hue), 70%, 50%)을 사용할 수 있습니다. 단일 변수를 변경하면 전체 색상 구성표가 업데이트됩니다. HEX나 RGB로는 모든 값을 다시 계산하지 않으면 불가능합니다. 이것이 Tailwind v4와 같은 최신 CSS 프레임워크가 HSL 기반 색상 시스템으로 이동하는 이유입니다.

일반적인 사용 사례

HSL로 디자인하기

기본 색상을 선택하고 명도를 조정하여 색상 팔레트를 구축하세요 — RGB보다 HSL에서 훨씬 쉽습니다.

Figma 색상을 CSS로 변환

Figma는 종종 HEX를 표시하고, CSS는 때때로 RGB나 HSL이 필요합니다(`color-mix` 또는 불투명도용). 한 번의 클릭으로 정확한 문자열을 얻으세요.

접근성 검사

이 도구를 명암 검사기와 함께 사용하여 색상 선택이 WCAG 요건을 충족하는지 확인하세요.

테마 미세 조정

Tailwind 프리셋을 사용자 지정 브랜드 색상으로 빠르게 교체하고 결과 HEX를 구성에 복사하세요.

다른 색상 변환기와 어떻게 비교되나요?

인기 색상 변환 도구의 나란히 비교입니다.

기능	NovaTools	RapidTables	W3Schools
HEX →RGB →HSL →HSV	모든 형식		제한적
입력 시 실시간 미리보기	즉시	제출 버튼
색상 선택기 통합	EyeDropper API
프라이버시(업로드 없음)	100% 로컬	서버 측
CSS 즉시 사용 가능 값 복사
오프라인 작동

대부분의 온라인 색상 변환기는 서버에서 변환을 처리합니다. 당사 도구는 모든 계산을 브라우저에서 수행합니다. 색상 값이 전송되거나 저장되지 않습니다.

자주 묻는 질문

어떤 색상 형식이 지원되나요?

HEX(예: `#2563EB`), RGB(예: `rgb(37, 99, 235)`), HSL(예: `hsl(217, 83%, 53%)`)을 지원합니다. 세 가지 모두 값을 변경하면 동시에 업데이트됩니다.

RGB와 HSL의 차이는 무엇인가요?

RGB는 색상을 빨강, 초록, 파랑 성분으로 설명합니다. HSL은 색상(색상환 각도), 채도(강도), 명도로 설명합니다. HSL은 다른 값을 다시 계산하지 않고 명도를 변경할 수 있어 디자이너에게 더 직관적입니다.

3자리 HEX 약식을 지원하나요?

네. `#fff`를 입력하면 자동으로 `#FFFFFF`로 확장됩니다. 출력은 항상 최대 호환성을 위해 6자리 형식을 사용합니다.

CSS용 값을 복사할 수 있나요?

네. 각 형식 옆의 복사 버튼을 누르면 CSS에 바로 붙여넣을 수 있는 `#2563EB`, `rgb(37, 99, 235)` 또는 `hsl(217, 83%, 53%)`을 얻을 수 있습니다.

잘못된 HEX 값을 입력하면 어떻게 되나요?

HEX 필드는 자유 텍스트이므로 아무거나 입력할 수 있지만, RGB와 HSL 값은 HEX가 유효할 때만 업데이트됩니다. 이렇게 하면 이전 색상을 잃지 않고 실험할 수 있습니다.

Tailwind CSS 색상을 RGB나 HSL로 변환하려면 어떻게 하나요?

Simply type the Tailwind HEX value into the HEX field (e.g., `#2563EB` for `blue-600`). The RGB and HSL values will update instantly, and you can copy them with one click. This is useful when you need to use a Tailwind color in a context that requires RGB or HSL — for example, `color-mix(in srgb, rgb(37, 99, 235) 50%, transparent)` or `hsl(217, 83%, 53% / 0.5)` for opacity. You can also use the built-in Tailwind preset palette to start from any standard Tailwind color.

이 도구를 사용하여 색상 팔레트를 만들 수 있나요?

Yes. HSL is particularly well-suited for palette generation because you can fix the hue and vary lightness to create tints and shades of the same color. For example, set hue to 217 and saturation to 83%, then create five variations by changing lightness to 20%, 40%, 53%, 70%, and 90%. Each variation can be copied as a HEX value. Pair this tool with the Contrast Checker to verify that your text-background combinations meet WCAG accessibility standards.

이 도구는 전문 디자인 작업에 정확한가요?

Yes. The conversion math follows the W3C CSS Color Module Level 4 specification, which is the same standard that browsers use internally. This means the values you copy from this tool will render identically in browsers, design tools like Figma and Sketch, and image editors like Photoshop. The tool does not apply gamma correction or color space conversion (sRGB to Display P3), so all values are in the standard sRGB color space, which is the default for web design.

귀하의 프라이버시가 저희의 최우선 사항입니다

이 도구는 완전히 브라우저 내에서 실행됩니다. 파일은 서버로 업로드, 저장, 분석되지 않습니다.

파일을 업로드, 저장, 분석하지 않습니다.
처리하는 모든 것은 장치에 남습니다.
서버 측 처리, 클라우드 저장소, 분석이 없습니다.

인터넷 연결이 끊겨도 파일은 안전합니다.

이것도 좋아하실 수 있습니다

이 주제 둘러보기

이 카테고리의 모든 도구색상 도구 이 주제의 가이드디자인 및 접근성

색상 선택기

이미지나 화면에서 색상을 선택합니다.

대비 검사기

WCAG에 대한 색상 대비를 확인합니다.

팔레트 생성기

아름다운 색상 팔레트를 만듭니다.