HEX HSL 변환기

HEX HSL 변환기란 무엇인가요?

// Convert a hex color string to {h, s, l, alpha} per CSS Color 4 §6.4
// h in 0-360, s and l in 0-1, alpha in 0-1.
function hexToHsl(input) {
  let h = input.trim().replace(/^#/, '');
  if (h.length === 3 || h.length === 4) h = h.split('').map(c => c + c).join('');
  const r = parseInt(h.slice(0, 2), 16) / 255;
  const g = parseInt(h.slice(2, 4), 16) / 255;
  const b = parseInt(h.slice(4, 6), 16) / 255;
  const alpha = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
  const L = (max + min) / 2;
  const S = delta === 0 ? 0 : delta / (1 - Math.abs(2 * L - 1));
  let H = 0;
  if (delta !== 0) {
    if (max === r) H = ((g - b) / delta) % 6;
    else if (max === g) H = (b - r) / delta + 2;
    else H = (r - g) / delta + 4;
    H = (H * 60 + 360) % 360;
  }
  return { h: H, s: S, l: L, alpha };
}

console.log(hexToHsl('#3b82f6')); // { h: 217, s: 0.91, l: 0.60, alpha: 1 }

주요 기능

HEX HSL 변환기 대안 비교

HEX HSL 변환 예시

#3b82f6

#FF5733

#3b82f6

#FF573380

자주 쓰이는 HEX → HSL 변환

가장 자주 변환되는 10개의 HEX 코드와 그 HSL 등가물의 레퍼런스 표입니다. 순수 원색, 순수 보색, 그리고 Tailwind 팔레트에서 가져온 실제 브랜드 색상 두 개를 포함합니다.

HEX HSL 변환기 사용 방법

1. 1

   HEX 입력란에 HEX 코드 붙여넣기

   어떤 HEX 값이든 HEX 입력란에 떨어뜨리십시오. 앞의 `#` 포함 여부, 3자리 축약 (`#F73`), 6자리 완전형 (`#3b82f6`), 4자리 알파 축약 (`#F738`), 또는 8자리 알파 완전형 (`#FF573380`) 모두 받아들입니다. 본 도구는 다섯 가지 입력 형태를 모두 내부적으로 동일한 정규 색상으로 정규화합니다. 대소문자는 무관합니다 (`#3b82f6`과 `#3B82F6`은 동일하게 파싱됩니다). 잘못된 문자나 자릿수는 조용한 인라인 오류를 발생시키고, 유효한 HEX는 HSL을 포함한 다른 모든 형식 입력란을 실시간으로 업데이트합니다.

2. 2

   HSL 입력란에서 HSL 트리플 읽기

   HEX 입력란 아래의 HSL 입력란은 CSS Color 4의 최신 공백 구분 구문으로 일치하는 `hsl()` 값을 보여 줍니다. 불투명 색상에는 `hsl(217 91% 60%)`, 알파가 포함된 색상에는 `hsl(217 91% 60% / 0.5)`. 색조는 0-360 범위의 정수 도, 채도와 명도는 0-100 범위의 정수 백분율입니다. 값은 표시 가독성을 위해 반올림됩니다. 본 도구의 내부 OKLCH 단일 사실 출처 덕분에 기반 정밀도는 부동소수점이므로, HEX로 되돌리는 왕복이 안정적으로 유지됩니다.

3. 3

   복사를 클릭해 HSL 문자열 가져오기

   각 형식 카드의 오른쪽에는 복사 버튼이 있습니다. 한 번 클릭하면 값이 클립보드로 들어가고, 버튼 레이블이 잠시 "복사되었습니다!"로 바뀌어 알려 줍니다. 복사된 문자열은 정규 CSS Color 4 구문 (`hsl(217 91% 60%)`)입니다. 타깃이 레거시 콤마 형식 (`hsl(217, 91%, 60%)`)을 요구한다면 변환은 기계적입니다. 플랫폼별 출력 (Tailwind v4, SwiftUI, Compose, Flutter)은 피커 아래의 코드로 복사 섹션을 사용하십시오. 해당 스니펫들은 각 플랫폼이 네이티브로 기대하는 형식을 내보냅니다.

4. 4

   함께 표시되는 형식: RGB, OKLCH, OKLAB, HSV, HWB, CMYK, 이름 있는 색상

   붙여넣은 동일한 HEX가 다른 형식 입력란도 함께 채웁니다. canvas 호출과 하드웨어용 RGB, 지각 균일 디자인 시스템용 OKLCH와 OKLAB, 디자이너 색상 피커 작업 흐름용 HSV와 HWB, 인쇄 견적용 CMYK, 그리고 문서 산문용 가장 가까운 CSS 이름 있는 색상까지. HEX → HSL 한 방향에 묶이지 않습니다. Tailwind v4 `@theme` 블록(HSL의 감마 특이적 L보다 지각 명도가 더 중요한 곳)을 위한 OKLCH 트리플이 함께 필요하다면, OKLCH 입력란에 자체 복사 버튼과 함께 바로 노출되어 있습니다.

5. 5

   피커를 사용해 명도를 시각적으로 스윕

   형식 그리드 아래에는 시각적 탐색용으로 SL 정사각형 + 색조 슬라이더 + 알파 슬라이더가 있습니다. SL 정사각형은 HSL의 채도 × 명도 평면에 직접 매핑됩니다. 수직으로 드래그하면 L이 0%에서 100%로 이동하는 동안 HSL 입력란이 실시간으로 업데이트되는 모습을 지켜볼 수 있습니다. 정확한 백분율을 확정하기 전에 시각적으로 틴트나 셰이드를 생성할 때 유용합니다. Chromium 기반 브라우저(Chrome, Edge, Brave)에서는 EyeDropper 버튼이 네이티브 `EyeDropper` API를 활성화해, 브라우저 바깥을 포함한 화면 위 어떤 픽셀이든 샘플링할 수 있습니다.

자주 발생하는 HEX / HSL 실수

9단계 팔레트를 위해 HSL L 스윕:
hsl(120 100% 50%)과 hsl(240 100% 50%)이 동일 L에서
시각적으로 다른 밝기 — 팔레트가 고르지 않게 느껴짐.

대신 OKLCH L 스윕:
oklch(0.7 0.2 130)과 oklch(0.7 0.2 250)
동등하게 밝아 보임 — 모든 색조에 걸쳐 일관된 팔레트로 읽힘.

H=350에서 H=10으로의 선형 보간:
(350 + 10) / 2 = 180° (시안 중간점)
잘못됨 — 환을 긴 방향으로 돌아감.

짧은 경로 색조 보간:
중간점 = ((350 + 10 + 360) / 2) % 360 = 0° (빨강 중간점)
환의 짧은 경로인 빨강을 통과.

Photoshop의 HSV 값을 CSS hsl() 규칙에 붙여넣기:
Photoshop HSB 0, 100, 100 (순수 빨강)
CSS hsl(0 100% 100%)는 흰색으로 렌더 — 완전히 잘못된 색상.

CSS에 붙여넣기 전 HSV → HSL 변환:
HSV 0, 100, 100 → HSL 0, 100%, 50%
CSS hsl(0 100% 50%)는 순수 빨강으로 렌더 — 정확함.

백분율 부호 없이 HSL 내보내기:
hsl(217 91 60)
CSS 파싱 오류 — 모든 브라우저가 전체 규칙을 무시.

S와 L에 백분율 부호를 붙여 HSL 내보내기:
hsl(217 91% 60%)
유효한 CSS — 모든 에버그린 브라우저와 IE 9+에서 동작.

누가 HEX HSL을 사용하나요

HSL CSS 변수를 정의하는 프런트엔드 개발자

Figma HEX로부터 `--primary: hsl(217 91% 60%)`를 한 번 정의한 뒤, L 숫자만 조정해 `--primary-hover: hsl(217 91% 70%)`, `--primary-active: hsl(217 91% 50%)`, `--primary-bg: hsl(217 91% 95%)`를 합성합니다. HEX를 한 번 붙여넣고, HSL 트리플을 읽고, CSS 사용자 정의 속성 블록에 떨어뜨리십시오. OKLCH 기반 램프가 우위를 차지하기 전, 레거시 디자인 시스템이 틴트와 셰이드를 톤 측면에서 일관되게 유지하기 위해 사용한 패턴입니다.

HEX를 HSL 피커로 옮기는 디자이너

색조 + 채도 + 값 피커(Adobe, Sketch, Figma의 HSB 모드)로 자란 디자이너는 원본 파일이 HEX로 배포되더라도 종종 HSL 트리플을 원합니다. HEX를 한 번 붙여넣으면 일치하는 HSL이 만들어져 손으로 추측하지 않고도 디자이너의 인지 색상환 위치로 읽어들일 준비가 됩니다. 브랜드 색상 사양을 검토하면서 패밀리 안의 다른 브랜드 색상에 대해 그것이 색조 환 어디에 자리하는지 알고 싶을 때 유용합니다.

다크 모드 토큰을 계산하는 테마 시스템 작성자

다크 모드 테마는 종종 H와 S를 유지한 채 L을 반전합니다. 라이트 모드 `hsl(217 91% 60%)` 기본 색상이 다크 모드 `hsl(217 91% 40%)`(또는 유사)에 매핑됩니다. 라이트 모드 HEX를 붙여넣고, HSL을 읽고, 다크 모드 L을 계산하고, 새 HSL을 다크 테마 토큰에 다시 작성하십시오. HSL 트리플을 갖고 있을 때는 패턴이 기계적이지만, 원시 RGB 채널로는 훨씬 까다롭습니다.

틴트와 셰이드 램프를 생성하는 디자인 시스템 작성자

L을 스윕해 9단계 틴트/셰이드 램프를 생성하십시오. `hsl(217 91% 95%)`(가장 밝음), 85%, 75%, 65%, 55%, 45%, 35%, 25%, `hsl(217 91% 15%)`(가장 어두움). 기본 HEX를 붙여넣고, HSL을 읽고, 머릿속이나 코드에서 L을 10% 단계로 스윕하십시오. (모든 단계가 동등하게 밝아 보여야 하는 지각 균일 램프를 위해서는 옆에 있는 OKLCH 입력란으로 전환하십시오. HSL 램프는 L이 지각적으로 균일하지 않기 때문에 색조마다 고르지 않게 보입니다.)

런타임 hsl(from ...) 수학을 사용하는 CSS 작성자

최신 CSS는 `color-function-from` 구문을 지원합니다. `hsl(from var(--primary) h s calc(l + 10%))`는 렌더 시점에 `--primary`의 더 밝은 변형을 파생하며, 모든 단계를 미리 계산할 필요가 없습니다. 브랜드 HEX를 붙여넣고, HSL 트리플을 확인하고, 기본 값을 CSS 변수에 떨어뜨리고, 파생 토큰에 런타임 수학을 사용하십시오. Chrome 119+, Safari 17.2+, Firefox 128+에 탑재되어 있습니다.

Tailwind v3 HSL 토큰 세트를 구축하는 프런트엔드 개발자

Tailwind v3는 CSS 변수에 공백 구분 HSL 트리플(`--primary: 217 91% 60%`)로 테마 색상을 저장하고, `tailwind.config.js`에서 `hsl(var(--primary))`를 통해 합성했습니다. 브랜드 HEX를 붙여넣고, HSL을 읽고, 세 숫자(`hsl(...)` 래퍼 없이)를 변수 정의에 떨어뜨리십시오. Tailwind v4는 이후 OKLCH 우선으로 전환했지만, v3 코드베이스는 여전히 HSL 패턴을 사용하며 앞으로 수년간 그럴 것입니다.

HEX를 HSL 컨트롤에 매핑하는 색상 피커 UI 작성자

색조 / 채도 / 명도를 세 개의 별도 슬라이더로 노출하는 색상 피커(고전적인 Adobe 스타일 UI)를 구축한다는 것은 들어오는 HEX를 피커의 세 컨트롤로 매핑한다는 뜻입니다. 여기에 HEX를 붙여넣고, HSL 트리플을 읽고, 세 슬라이더를 프로그램으로 배치하십시오. 변환은 피커가 내부적으로 실행할 것과 동일하며, 본 도구는 디버깅을 위해 중간 값들을 노출합니다.

명암비를 위해 브랜드 색상 명도를 조정하는 접근성 엔지니어

브랜드 색상이 배경에 대해 WCAG 명암비를 통과하지 못할 때, 저렴한 해결책은 비율이 통과할 때까지 L을 끌어올리는 것입니다. H와 S를 바꾸지 않으므로 색상은 여전히 동일한 브랜드 정체성으로 읽힙니다. 브랜드 HEX를 붙여넣고, 명암비 배지를 지켜보고, WCAG와 APCA가 모두 통과할 때까지 머릿속이나 피커의 L 축으로 L을 조정하십시오. HSL 입력란은 사양 문서용 새 L 백분율을 노출하고, HEX 입력란은 스타일시트용 일치하는 코드를 노출합니다.

HEX HSL 수학과 파싱

HEX → RGB → HSL은 두 단계 파이프라인

변환은 RGB를 중간 단계로 거칩니다. 1단계: 채널당 `parseInt(hex.slice(1, 3), 16)`을 통해 HEX를 RGB 정수로 파싱. 2단계: RGB를 0-1로 정규화하고 `max`/`min`/`delta`를 계산한 뒤 CSS Color 4 §6.4 조각별 삼각 공식을 적용. `L = (max + min) / 2`, `S = delta / (1 - |2L - 1|)`, `H = 조각별 * 60`. 두 단계 구조는 본 도구가 중간 RGB 튜플도 함께 노출하는 이유입니다. 표시 비용이 없고 디버깅에 유용합니다.

CSS Color 4 §6.4가 참조 알고리즘 정의

W3C CSS Color 4 명세 §6.4 (`rgb()`에서 `hsl()`로의 알고리즘)는 정규 조각별 수학을 정의합니다. 명도는 max와 min의 중간점, 채도는 `delta / (1 - |2L - 1|)` (delta = 0일 때 S = 0으로 회색에서 0으로 나누기를 피함), 색조는 어느 채널이 max인지에 따른 단계당 60도 삼각 공식입니다. 명세는 또한 가장자리 사례도 처리합니다. 순수 검정(`#000`)은 임의의 0° 색조와 함께 `hsl(0 0% 0%)`을 만들고, 순수 흰색(`#FFF`)은 유사하게 `hsl(0 0% 100%)`을, 순수 회색은 `hsl(0 0% 50%)`을 만듭니다.

색조는 360°에서 둘러싸이고, S와 L은 백분율

HSL의 세 축은 단위가 다릅니다. 색조는 둘러싸기를 가진 0-360 범위의 각 도입니다. `hsl(370 ...)`은 각 위치가 둘러싸이므로 `hsl(10 ...)`으로 해석됩니다. 채도와 명도는 0%에서 100%까지의 백분율로, 둘러싸기가 없습니다. 범위 밖 값은 클립됩니다. CSS Color 4는 turn (`hsl(0.6turn ...)`) 또는 라디안 (`hsl(3.787rad ...)`)으로 표현된 색조도 받아들입니다. 본 도구의 출력은 도 단위를 사용합니다. 디자인 도구 UI와 브랜드 사양 문서에서 가장 흔한 형식이기 때문입니다.

HSL 명도는 지각적으로 균일하지 *않음*

`hsl(120 100% 50%)`의 초록이 `hsl(240 100% 50%)`의 파랑보다 시각적으로 더 밝아 보입니다. 둘 다 명목상 명도가 같지만 그렇습니다. HSL이 sRGB의 감마 특이성을 상속하고 모든 색조에 걸쳐 동일한 L 척도를 사용하기 때문입니다. 이것이 HSL 기반 틴트 램프가 고르지 않게 보이는 이유입니다 (초록 램프의 밝은 끝이 파랑 램프의 밝은 끝보다 더 빨리 올라갑니다). 또한 디자인 시스템들이 램프 생성에 OKLCH로 대거 이주한 이유이기도 합니다. 본 도구는 HSL과 OKLCH를 모두 노출해 선택이 한눈 거리에 있게 합니다.

왕복 안정성을 위한 OKLCH 내부 단일 사실 출처

이 스포크가 HEX → HSL을 구체적으로 타기팅하더라도, 공유된 기반 변환기는 내부적으로 정규 색상을 OKLCH 트리플로 유지합니다. HEX → HSL → RGB → OKLAB → HEX 왕복이 비트 안정적으로 유지됩니다. 레거시 HSL 피벗 변환기는 반올림 오차를 누적하며 몇 번의 변환에 걸쳐 색조가 몇 도씩 드리프트할 수 있습니다. OKLCH 피벗은 또한 색조(hue)를 안정적인 축으로 보존하므로 색조 슬라이더를 드래그해도 회색을 통과해 크로스페이드되는 일이 없습니다. Björn Ottosson의 2020년 OKLAB 논문에 따른 것입니다.

채널 인코딩: 8비트 부호 없음, sRGB 감마 인코딩

HEX 코드는 IEC 61966-2-1(1996)이 정의한 sRGB 색 공간에 8비트 부호 없는 RGB 채널(0-255)을 인코딩합니다. 값은 *감마 인코딩되어* 있습니다. 채널 값과 지각 밝기의 관계가 비선형이며 조각별 sRGB 전송 함수(0 근처의 작은 선형 구간을 가진 대략 2.4 지수)를 따릅니다. HSL은 선형화 단계 없이 이 감마 인코딩된 RGB 값에서 직접 파생됩니다. 이것이 HSL의 지각 균일성 문제의 근본 원인입니다. OKLCH는 먼저 선형화한 뒤 지각 균일 공간으로 다시 매핑합니다. HSL은 그렇지 않습니다.

HEX / HSL 작업 모범 사례

새 코드에는 최신 공백 구분 HSL 구문 사용

CSS Color 4의 `hsl(217 91% 60%)`(공백 구분)과 `hsl(217 91% 60% / 0.5)`(알파용 슬래시)는 2025년 이후 배포되는 코드의 정규 구문입니다. 레거시 콤마 형식 `hsl(217, 91%, 60%)`과 `hsla(217, 91%, 60%, 0.5)`는 여전히 모든 곳에서 지원되지만 CSS Color 4에서는 스타일적으로 권장되지 않습니다. 새 스타일시트에서는 최신 구문을 쓰십시오. `hsla()`는 진정으로 레거시 지원이 필요한 IE 9-11 폴백 컨텍스트용으로만 남겨 두십시오.

HSL이 아닌 OKLCH로 램프 생성

HSL의 명도 축은 지각적으로 균일하지 않습니다. 9단계 L 스윕은 모든 L 값에서 초록 단계가 파랑 단계보다 더 밝아 보이는 램프를 만듭니다. 모든 단계가 동등하게 밝아 보여야 하는 램프(디자인 시스템의 기본 요구)에는 OKLCH에서 생성하십시오. `oklch(0.7 0.15 217)`, `oklch(0.6 0.15 217)` 등. 본 도구는 동일한 HEX에 대해 HSL과 OKLCH를 모두 노출하므로 둘 사이를 전환하는 데 복사 클릭 한 번 거리입니다.

색조와 채도를 잠그고 명도를 스윕

HSL을 틴트/셰이드 작업에 사용할 때는 L 숫자만 바꾸십시오. 램프 전체에서 H와 S는 동일하게 유지하십시오. 색조 드리프트(5°만 되어도)는 램프를 어수선해 보이게 만듭니다. 채도 드리프트는 밝은 끝을 바랜 듯하고 어두운 끝을 탁해 보이게 합니다. 한 번에 한 축이라는 규율이 HSL의 디자이너 친화적 명성을 만들어 줍니다. 그것을 버리면 두 세계의 최악을 얻게 됩니다.

원본 토큰은 HEX, 계산된 변형은 HSL 선호

디자인 토큰 사양을 작성할 때는 HEX(또는 OKLCH)를 정규 형식으로 선호하십시오. 더 간결하고 JSON 또는 YAML에 깔끔하게 들어맞습니다. HSL은 단일 사실 출처 형식보다는 *파생* 토큰의 런타임용으로 더 유용합니다 (`hsl(from var(--primary) h s calc(l + 10%))`). 두 형식은 동일한 색상을 기술합니다. 선택은 토큰이 시스템에서 어떤 역할을 하느냐에 관한 것입니다.

HSL 변형은 기본 HEX와 함께 문서화

`--primary-light: hsl(217 91% 70%)` 같은 CSS 변수를 배포할 때는 기본 HEX를 가리키는 주석을 포함하십시오. `/* base: #3b82f6 → hsl(217 91% 60%), light variant +10% L */`. 여섯 달 뒤 누군가 `--primary-lighter`를 파생하려 할 때, 계산할 기본 색상이 필요한데 HSL 단독으로는 그것을 노출하지 못합니다. HEX + HSL이 함께 있으면 완전한 출처가 보존됩니다.

실시간 색상 결정 공유에 URL 해시 사용

모든 색상 변경은 URL 해시를 `#hex=3b82f6` 형태로 자동 업데이트합니다. URL을 Slack 스레드나 GitHub 이슈에 복사하면, 그것을 여는 모든 사람이 동일한 HSL 트리플의 동일한 색상에 도달합니다. 채팅에 HSL 문자열을 붙여넣는 것보다 더 안정적이며(수신자가 값을 수작업으로 입력할 때 가끔 도를 잘못 치거나 백분율 부호를 빠뜨립니다), 디자인 리뷰 스레드가 "화요일에 논의한 그 파랑"이 아니라 정확한 색상을 참조할 수 있게 해 줍니다. 해시는 서버로 전송되지 않습니다.

자주 묻는 질문