Skip to main content
FreeToolkit .ai

HEX를 HSL로 변환하기 HEX 색상 코드를 HSL(색조, 채도, 밝기) 값으로 변환합니다.

HEX를 HSL로 변환하기 illustration
🎨

HEX를 HSL로 변환하기

HEX 색상 코드를 HSL(색조, 채도, 밝기) 값으로 변환합니다.

1

HEX 색상 입력

HEX 색상 코드를 입력하거나 색상 선택기를 사용하여 원하는 색상을 선택하세요.

2

HSL 값 읽기

색조(0-360°), 채도(0-100%), 명도(0-100%) 값을 즉시 확인할 수 있습니다.

3

HSL 출력 복사

hsl() CSS 함수 값을 직접 스타일시트에 사용하기 위해 복사하세요.

Loading tool...

What Is HEX를 HSL로 변환하기?

HEX to HSL 변환기는 16진수 색상 코드를 HSL(색조, 채도, 명도) 색상 모델로 변환합니다. RGB와 달리 빨간색, 녹색 및 파란색 빛을 혼합하여 색상을 설명하는 대신, HSL은 인간에게 더 직관적인 방식으로 색상을 설명합니다. 색조는 색상 자체를 나타냅니다(색상 차트의 도 단위로 측정: 0°는 빨간색, 120°는 녹색, 240°는 파란색). 채도는 색상의 강도 또는 순도를 설명합니다(0%는 회색, 100%는 완전히 생생한 색상). 명도는 색상의 밝기 또는 어둡기를 설명합니다(0%는 검은색, 50%는 순수한 색상, 100%는 흰색). 이것이 HSL을 색상 팔레트 생성, 채도의 조정 없이 밝기를 조절하고, 조화로운 색상 스키마를 생성하는 데 매우 유용하게 만듭니다. 디자이너와 개발자는 의미 있는 조정을 위해 표준 웹 형식인 HEX에서 HSL로 변환해야 하는 경우가 많습니다. 예를 들어, 더 어두운 оттен기를 생성하는 것은 HSL에서 간단합니다. 단지 명도를 줄이면 됩니다. 반면에 HEX 또는 RGB에서는 세 채널 모두를 비례적으로 조정해야 합니다.

Why Use HEX를 HSL로 변환하기?

  • 색상을 직관적인 색조, 채도, 명도 구성 요소로 분해하여 확인할 수 있습니다
  • HEX 코드를 입력하면 라이브 컬러 미리보기 스와치가 업데이트됩니다
  • CSS에서 직접 사용 가능한 hsl() 함수 출력을 제공합니다
  • 3자리 및 6자리 HEX 입력 코드를 지원합니다
  • 색상 관계를 이해하고 조작하는 데 유용합니다

Common Use Cases

컬러 팔레트 디자인

브랜드 HEX 색상을 HSL로 변환하여 채도와 명도를 쉽게 조정하여 다양한 버전을 생성할 수 있습니다.

테마 생성

명도 값을 수정하면서 색조를 유지함으로써 라이트 및 다크 테마 변형을 구축하세요.

CSS 사용자 정의 속성

HSL 값을 CSS 변수로 저장하여 유연한 컬러 테마링을实现하세요: --primary-h, --primary-s, --primary-l.

접근성 조정

텍스트와 배경 간의 충분한 대조 비율을 보장하기 위해 명도 값을 조정하세요.

Technical Guide

HEX에서 HSL로의 변환은 먼저 hex 문자열을 RGB 값(0-255)으로 디코딩한 다음 HSL로 변환합니다. 알고리즘은 RGB를 0-1 범위로 정규화하고, 최대 및 최소 채널 값을 찾고, 다음과 같이 계산합니다: 명도 = (최대 + 최소) / 2. 최대값이 최소값과 같으면 색상은 무색(회색)이며, 색조는 0이고 채도는 0입니다. 그렇지 않으면, delta = max - min인 경우 채도 = delta / (1 - |2L - 1|). 색조는 최대 채널에 따라 다릅니다. 빨간색이 최대값이면 H = (G-B)/delta; 녹색이면 H = (B-R)/delta + 2; 파란색이면 H = (R-G)/delta + 4입니다. 결과는 도 단위(0-360)로 변환하기 위해 60을 곱합니다. HSL은 RGB 큐브의 원통형 표현으로, 색상 조작에 더 직관적입니다. 하나 중요한 차이점: HSL 명도 50%는 모든 색조의 가장 생생한 형태를 나타내며, 0%는 항상 검은색이고 100%는 항상 흰색입니다. 이것은 HSV/HSB와 다르며, 여기서 100% 값(밝기)은 가장 생생한 색상을 나타냅니다.

Tips & Best Practices

  • 1
    HSL 명도가 50%일 때 가장 순수한 색조 버전이 제공됩니다. 기본 팔레트 색상에 유용합니다
  • 2
    채도를 낮추면(Desaturating) 전문가 같은 무딘 톤을 생성할 수 있습니다
  • 3
    HSL은 색조, 채도, 명도가 독립적으로 조정될 수 있기 때문에 CSS 테마링에 이상적입니다
  • 4
    HEX의 동일한 R, G, B 값은 항상 H=0, S=0인 HSL(순수 회색)을 생성합니다
  • 5
    최신 CSS는 모든 브라우저에서 hsl()을 기본적으로 지원하므로 런타임에 변환할 필요가 없습니다

Related Tools

HEX를 RGB로 변환기 - free online tool

HEX를 RGB로 변환기

라이브 미리보기 스와치와 함께 즉시 HEX 색상 코드를 RGB 값으로 변환합니다.

🎨 Color Tools
HSL을 HEX로 변환하기 - free online tool

HSL을 HEX로 변환하기

상호작용 슬라이더를 사용하여 HSL 색상 값을 HEX 코드로 변환합니다.

🎨 Color Tools
RGB를 HSL로 변환하기 - free online tool

RGB를 HSL로 변환하기

상호작용 슬라이더와 함께 RGB 값을 HSL 색상 형식으로 변환합니다.

🎨 Color Tools
색상 선택기 - free online tool

색상 선택기

HEX, RGB, HSL, CMYK 출력을 지원하는 상호작용 색상 선택기입니다.

🎨 Color Tools
색상 음영 생성기 - free online tool

색상 음영 생성기

任意 색상의 더 어두운 음영을 조정 가능한 단계 수로 생성합니다.

🎨 Color Tools

Frequently Asked Questions

Q HSL 색상 모델이란 무엇인가?
HSL은 색조(색각 0-360°), 채도(강도 0-100%), 명도(밝기 0-100%)를 의미합니다. 이는 인간에게 더 직관적인 원통형 표현입니다.
Q HEX를 HSL로 변환하는 이유는 무엇인가?
HSL은 색상 버전을 쉽게 생성할 수 있습니다. 단일 값을 변경하여 밝거나 어둡게 만들거나 채도를 낮출 수 있지만 HEX에서는 6개의 문자 모두 수정해야 합니다.
Q hsl()이 CSS에서 지원되는가?
예, hsl()은 모든 최신 브라우저와 IE9 이후부터 지원됩니다. 최신 CSS는 또한 새로운 공백으로 구분된 구문을 지원합니다: hsl(217 91% 60%).
Q HSL을 사용하여 HEX 색상을 어둡게 하는 방법은 무엇인가?
HEX를 HSL로 변환한 다음 명도 값을 낮추세요. 예를 들어, hsl(217, 91%, 60%)을 어둡게 하여 hsl(217, 91%, 40%)으로 변경하면 같은 파란색의 더暗은 버전이 생성됩니다.
Q HSL과 HSV의 차이는 무엇인가?
HSL과 HSV는 모두 색조와 채도를 사용하지만 세 번째 구성 요소가 다릅니다. HSL은 명도(50%는 순수한 색상)를 사용하는 반면 HSV는 값/밝기(100%는 순수한 색상)를 사용합니다. HSL이 CSS에서 더 일반적으로 사용됩니다.

About This Tool

HEX를 HSL로 변환하기 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.