HEX를 HSL로 변환 Hexadecimal ↔ Hue Saturation Lightness 무료 온라인 안전

HEX를 HSL로 변환하는 이유

#5A4632 같은 HEX 코드는 색을 저장하기에는 좋은 방법이지만 색을 생각하기에는 나쁜 방법입니다. 숫자 어디에도 그 색이 갈색이라는 것, 얼마나 밝은지, 조금 더 연한 버전이 어떻게 보일지가 나와 있지 않습니다. HSL은 그것을 바로잡으려고 만들어졌습니다. 사람들이 색을 말하는 방식대로 색을 설명합니다. 어떤 색상인지, 얼마나 선명한지, 얼마나 밝은지입니다. HEX를 HSL로 변환하는 것은 디자인 도구가 건네주는 형태의 색을 논리적으로 다룰 수 있는 형태로 번역하는 일입니다. hsl(30, 29%, 28%)은 어둡고 차분한 주황빛 갈색이며, 마지막 숫자를 올리면 더 연해진다는 것을 한눈에 알 수 있습니다.

이것이 디자이너와 프런트엔드 개발자가 이 변환을 쓰는 진짜 이유입니다. 이들은 HEX로 된 브랜드 색을 가지고 있으며 관련된 색의 계열이 필요합니다. 호버 상태를 위한 더 밝은 색, 눌린 버튼을 위한 더 어두운 색, 배경 색조를 위한 아주 연한 색, 비활성 컨트롤을 위한 채도를 낮춘 색입니다. HEX에서는 그 하나하나가 숫자 세 쌍을 새로 찾는 일입니다. HSL에서는 하나하나가 숫자 하나의 변경입니다. 색은 같은 색이고, 더 쓸모 있는 렌즈로 본 것입니다.

이 페이지는 브라우저 안에서 변환하며 아무것도 업로드되지 않습니다. 아래에서는 HSL의 세 숫자가 HEX 숫자에서 어떻게 계산되는지, 변환이 유지하는 것과 반올림하는 곳, 색상, 채도, 명도가 실제로 무엇을 뜻하는지, 디자이너가 팔레트와 상태를 만드는 데 HSL을 어떻게 쓰는지, 처음 HEX를 HSL로 변환하는 사람들이 걸려드는 함정을 알아봅니다.

HSL이 설명하는 것

색상: 색상환에서의 위치

색상은 색상환을 도는 0도에서 360도까지의 각도입니다. 빨강은 0, 노랑은 60, 초록은 120, 시안은 180, 파랑은 240, 마젠타는 300에 있고, 360에서는 다시 빨강으로 돌아옵니다. 30의 색상은 빨강과 노랑 사이이며 주황입니다. 숫자는 어느 색 계열인지를 알려 주고, 얼마나 밝은지 연한지는 알려 주지 않습니다.

채도: 얼마나 선명한가

채도는 백분율입니다. 100%에서 색은 색상이 허용하는 만큼 순수하고, 0%에서는 색을 모두 잃고 회색이 됩니다. 우리 예시의 갈색처럼 29%의 채도는 차분하고 흙빛인 색입니다. 채도를 낮추는 것은 요란한 색의 성격은 바꾸지 않고 더 차분하게 만드는 가장 빠른 방법입니다.

명도: 얼마나 연하거나 어두운가

명도도 백분율입니다. 0%에서 색은 색상과 채도에 상관없이 검정이고, 100%에서는 흰색이며, 50%에서는 온전한 보통의 색입니다. 28%인 우리의 갈색은 어두운 쪽입니다. 숫자를 올리면 같은 색의 더 연한 버전이 되고 내리면 더 어두운 버전이 되는데, 이것이 디자이너가 가장 자주 원하는 변화입니다.

HEX보다 쉬운 이유

HEX에서 색을 더 연하게 만든다는 것은 색상이 어긋나지 않도록 세 쌍을 모두 서로 다른 양만큼 올린다는 뜻인데, 눈대중으로는 거의 불가능합니다. HSL에서는 하나의 수치를 바꾸고 나머지 둘은 그대로 둔다는 뜻입니다.

변환이 작동하는 방식

세 바이트에서 각도 하나와 백분율 둘로

변환기는 먼저 HEX 숫자를 각각 0에서 255까지의 빨강, 초록, 파랑 값으로 읽고, 이를 0과 1 사이로 조정합니다. 세 값 중 가장 큰 것과 가장 작은 것을 찾습니다. 명도는 그 둘의 평균입니다. 채도는 둘이 명도에 비해 얼마나 떨어져 있는지에 달려 있습니다. 색상은 어느 채널이 가장 큰지, 나머지 둘이 어떻게 비교되는지에 달려 있습니다. 세 값이 모두 같으면 색은 회색이고, 채도는 영이며 색상은 의미가 없습니다. 그때 변환기는 색상으로 0을 보여 줍니다.

예시

#5A4632의 바이트는 90, 70, 50입니다. 빨강이 0.353으로 가장 크고 파랑이 0.196으로 가장 작습니다. 명도는 그 합의 절반인 0.275로 약 28%입니다. 폭은 0.157이므로 채도는 0.157을 합 0.549로 나눈 약 29%입니다. 빨강이 가장 큰 채널이고 초록이 그 사이에 있으므로 색상은 30도가 됩니다. 결과는 hsl(30, 29%, 28%)입니다.

정수

세 숫자는 적을 때 정수 도와 정수 퍼센트로 반올림됩니다. 그것이 사람들이 쓰는 형태이고 일상적인 작업에서 CSS가 기대하는 형태이지만, 다음 절에서 설명하듯 마지막 자리에서 일부 정보가 버려진다는 뜻입니다.

변환이 유지하는 것과 유지하지 못하는 것

눈이 분류하는 방식 그대로 색을 유지합니다

결과는 눈이 분류하는 방식의 색입니다. 색상환 위의 색상, 얼마나 선명한지, 얼마나 밝은지입니다. HSL을 가질 가치가 있는 이유입니다. 숫자 하나를 바꾸어 색을 더 연하게 하거나 한 단계 어둡게 할 수 있으며, HEX에서는 거의 불가능한 일입니다.

같은 바이트를 돌려준다고 약속할 수 없습니다

둘은 같은 색을 설명하지만, HSL은 다른 기하학을 통해 그 색에 도달하며 세 숫자는 적을 때 정수 도와 정수 퍼센트로 반올림됩니다. 그래서 HSL로 갔다가 돌아온 색은 출발점에서 한두 단계 떨어진 곳에 닿을 수 있습니다. 시각적으로는 같지만 바이트 하나하나가 같지는 않습니다. 정확한 바이트를 되돌려 받아야 한다면 HEX를 보관하십시오. 색을 다루기 위해 HEX를 HSL로 변환하고, HEX는 마스터로 유지하십시오.

회색에는 색상이 없습니다

세 바이트가 같으면 색상에 대해 말할 것이 없습니다. 변환기는 색상 0과 채도 0%를 주며 명도만으로 회색을 설명합니다. 그 0에서 아무 의미도 읽어 내지 마십시오.

실제로 HSL 쓰기

음영 계열 만들기

기본 색 hsl(30, 29%, 28%)을 잡으십시오. 호버를 위한 더 밝은 음영은 hsl(30, 29%, 34%)입니다. 배경을 위한 아주 연한 색조는 hsl(30, 29%, 94%)입니다. 눌린 상태를 위한 더 어두운 음영은 hsl(30, 29%, 22%)입니다. 색상과 채도는 그대로이므로 색들이 분명히 함께 속합니다. HEX로 같은 일을 하려면 여러 번 시도해야 하고 그래도 약간 어긋나 보일 것입니다.

테마와 다크 모드

테마는 흔히 같은 팔레트의 밝은 버전과 어두운 버전을 필요로 합니다. HSL이라면 색상은 유지하고 명도와 채도를 조정합니다. 밝은 테마에서는 배경을 밝게 하고 글자를 어둡게 하며, 어두운 테마에서는 그 반대로 합니다. 색상을 사용자 정의 속성으로 정의하고 명도만 바꾸는 것이 흔하고 깔끔한 방법입니다.

팔레트 생성

기본 색과 어울리는 색을 찾으려면 색상을 회전시키십시오. 양쪽으로 삼십 도씩이면 유사색이, 180이면 보색이, 120이나 240이면 삼색 조합이 나옵니다. 채도와 명도를 고정하고 색상을 바꾸면 색들이 균일한 느낌을 갖습니다. 무작위로 보이지 않는 팔레트를 시작하는 빠른 방법입니다.

접근성 있는 대비

명도는 대비를 위한 주된 조절 수단입니다. 색 있는 배경 위의 글자가 읽기 어렵다면 해결책은 대개 둘 사이의 명도 차이를 키우는 것이며, HSL은 이를 양쪽에서 숫자 하나씩 조정하는 일로 만들어 줍니다.

여기서 HEX를 HSL로 변환하는 방법

HEX 코드를 입력하거나 붙여 넣으세요

첫 번째 칸에 색을 입력하십시오. 해시 기호는 있어도 없어도 됩니다. 세 자리와 여섯 자리 형식을 받고, 투명도가 있는 여덟 자리 형식도 읽습니다.

hsl 값을 읽으세요

답은 즉시 나타나며, #5A4632 = hsl(30, 29%, 28%)처럼 보입니다. 세 숫자는 도 단위의 색상, 그리고 퍼센트 단위의 채도와 명도입니다.

스타일시트에 복사하세요

결과를 color: hsl(30, 29%, 28%) 같은 규칙에 그대로 쓰십시오. 색을 조정하려면 마지막 수치를 바꾸십시오. 반대 방향의 도구는 HSL을 HEX로입니다.

이 표기들의 유래

HEX와 RGB는 같은 것을 두 번 적은 것입니다

화면의 색은 세 개의 숫자입니다. 빨강, 초록, 파랑 빛을 얼마나 내보낼지를 각각 0에서 255까지로 나타내며, 이는 한 바이트입니다. HEX는 그 바이트를 십육진법으로 적었을 뿐입니다. 숫자를 보려면 HEX를 RGB로 변환하십시오.

HSL과 CMYK

HSL은 둘 다 사람이 읽기에 적합하지 않아서 만들어졌습니다. 색상환을 도는 각도로 색상을, 백분율로 채도와 명도를 제시하므로 디자이너는 세 수치를 다시 계산하지 않고도 무언가를 더 밝게 만들 수 있습니다. CMYK는 빛이 아니라 잉크라는 전혀 다른 세계에 속합니다. 감산 방식이며 네 개의 인쇄 판으로 이루어져 있고, 화면이 빛을 내는 반면 종이는 반사만 하므로 화면이 닿는 모든 색에 닿을 수는 없습니다.

HEX를 HSL로 변환할 때의 함정

완벽한 왕복을 기대하는 것

반올림 때문에 되돌려 변환하면 원본에서 한두 단계 떨어진 코드가 나올 수 있습니다. 색 하나라면 눈에 보이지 않습니다. 많은 색을 오가며 변환하는 디자인 시스템에서는 누적될 수 있습니다. HEX를 원천으로 유지하십시오.

같은 명도가 같은 밝기라고 가정하는 것

HSL 명도가 같은 두 색도 밝기가 상당히 다르게 보일 수 있습니다. 50%의 노랑은 50%의 파랑보다 훨씬 밝아 보입니다. HSL 명도는 편리한 숫자이지 지각되는 밝기의 척도가 아닙니다. 대비 검사에는 제대로 된 대비 도구를 쓰십시오.

퍼센트 기호를 잊는 것

CSS에서 hsl()의 채도와 명도에는 퍼센트 기호가 붙고, 색상은 그냥 숫자이거나 deg가 붙은 숫자입니다. 기호를 빼먹는 것은 고전적인 실수입니다.

회색에서 너무 많은 것을 읽어 내는 것

회색에는 색상이 없습니다. 변환기가 0을 보여 준다고 해서 붉은 기가 있다는 뜻은 아닙니다.

변환하기 전에 사람들이 묻는 질문

#FF0000은 HSL로 무엇인가요?

hsl(0, 100%, 50%)이며 순수한 빨강입니다.

#FFFFFF는 HSL로 무엇인가요?

hsl(0, 0%, 100%)이며 흰색입니다. 흰색에는 색상이 의미가 없고, 변환기는 0을 보여 줍니다.

HSL은 어디서나 지원되나요?

모든 최신 브라우저가 hsl()과 hsla()를 이해합니다. CSS에 들어간 지 여러 해가 되었습니다.

변환은 정확한가요?

같은 색을 설명한다는 뜻에서는 정확하지만, 숫자가 정수 도와 퍼센트로 반올림되므로 되돌아가면 한 단계 떨어진 곳에 닿을 수 있습니다.

내 색이 업로드되나요?

아니요. 계산은 브라우저에서 실행되며 아무것도 어디로도 전송되지 않습니다.

어떻게 되돌아가나요?

HSL을 HEX로를 쓰십시오.

HEX를 HSL로 변환할 때의 현명한 선택

작업에는 HSL, 저장에는 HEX

마스터 팔레트는 모호하지 않은 HEX로 보관하고, 변형을 만들고 싶을 때 HSL을 쓰십시오. 왕복은 조금 잃지만 마스터는 잃지 않습니다.

더 새로운 색 공간을 고려하세요

CSS는 이제 같은 명도가 실제로 같아 보이는 oklch() 같은 표기를 제공합니다. 새 디자인 시스템을 위해 배워 둘 만합니다. HSL은 거의 모든 사람이 이해하고 모든 도구가 지원하는 표기로 남아 있습니다.

사용자 정의 속성을 쓰세요

--hue, --sat, --light를 정의하고 그것으로 색을 만드십시오. hsl(var(--hue) var(--sat) var(--light))처럼 말입니다. 그러면 몇 개의 숫자를 고치는 것으로 테마가 바뀝니다.

자신 있게 HSL 읽고 쓰기

기억해 둘 몇 가지 지표

몇 개의 숫자가 HSL을 읽기 쉽게 해 줍니다. 60의 배수인 색상은 순수한 색입니다. 0 빨강, 60 노랑, 120 초록, 180 시안, 240 파랑, 300 마젠타입니다. 명도 50에 채도 100이면 어떤 색상에서든 가장 순수한 버전이 나오고, 명도 95 이상은 배경으로 쓸 만큼 연한 색조입니다. HEX를 HSL로 변환했는데 이 지표 중 하나 가까이의 색상이 보이면 색 계열을 한눈에 부를 수 있습니다.

계열 사이를 오가기

색상에 180을 더하면 색상환의 반대편 색이 나오는데, 이것이 보색이며 대개 가장 강한 대비입니다. 30을 더하거나 빼면 원래 색 옆에 편안하게 놓이는 이웃 색이 나옵니다. 디자이너는 짐작하지 않고 브랜드 색에 맞는 강조색을 고르려고 이 단계들을 씁니다.

변환된 값을 기록해 두기

팔레트를 위해 HEX를 HSL로 변환할 때는 결과를 원래 HEX와 나란히 표에 적으십시오. 표는 색들이 어떻게 관련되는지 보여 주며, 색상이나 명도가 다른 것들과 어긋나면 그 이상한 점이 즉시 눈에 띕니다. 팀에 공통의 참조도 제공합니다.

실제 화면에서 시험하기

보정된 모니터에서 균형 잡혀 보이는 색도 햇빛 아래의 휴대전화나 값싼 노트북에서는 다르게 보일 수 있습니다. 완성된 팔레트를 적어도 두 기기에서 확인하고, 연한 색조가 한쪽에서 사라지면 명도를 조금 조정하십시오.

관련 변환기

같은 계열의 도구가 이웃한 변환을 다룹니다. 되돌아가려면 HSL을 HEX로를 쓰십시오. 코드 뒤의 숫자에는 HEX를 RGB로와 RGB를 HEX로가 있고, 인쇄에는 HEX를 CMYK로와 CMYK를 HEX로가 있습니다. 같은 스타일시트의 크기에는 px를 rem으로와 px를 em으로가 이 페이지가 색에 해 주는 일을 길이에 해 줍니다.

실제 사례

브랜드 색이 #1E7A5C라고 해 봅시다. HEX를 HSL로 변환하면 hsl(160, 61%, 30%)을 읽습니다. 호버 상태에는 약간 더 밝은 hsl(160, 61%, 36%)을 씁니다. 눌린 상태에는 hsl(160, 61%, 24%)입니다. 알림 뒤의 아주 연한 배경에는 hsl(160, 40%, 95%)입니다. 비활성 버튼에는 색을 대부분 뺀 같은 색상인 hsl(160, 12%, 60%)입니다. 다섯 가지 색, 하나의 색상을 일 분 만에 쓰고, 모두 함께 속해 보입니다. 브랜드 색이 바뀌면 색상 숫자를 한 번만 바꾸면 됩니다.

짧은 체크리스트

변환 전

색으로 무엇을 하고 싶은지 정하십시오. 변형할 것인지, 테마로 쓸 것인지, 그냥 읽을 것인지입니다.

변환하는 동안

HEX를 붙여 넣고 hsl을 읽고 세 숫자를 적어 두십시오.

변환 후

한 번에 숫자 하나씩 바꿔 변형을 만들고, 실제 배경 위에서 보십시오.

흔한 실수

반올림된 숫자를 정확하다고 취급하는 것

정수입니다. HEX를 마스터로 유지하십시오.

명도를 밝기와 같다고 보는 것

명도가 같은 두 색도 밝아 보이는 정도가 크게 다를 수 있습니다.

퍼센트 기호를 빼먹는 것

CSS에서 채도와 명도에는 그것이 필요합니다.

색은 기기에 남습니다

계산은 로컬에서 이루어집니다. 값은 브라우저가 사용하며 아무것도 어디로도 전송되지 않습니다. 나중에 삭제할 것도 없고 만들 계정도 없습니다. 그것이 HEX를 HSL로 변환하는 담백한 방법입니다.

요약

여기서 HEX를 HSL로 변환하려면 HEX 코드를 입력하거나 붙여 넣고 hsl 값을 즉시 읽으십시오. 변환은 눈이 분류하는 방식 그대로 색을 유지합니다. 색상환 위의 색상, 얼마나 선명한지, 얼마나 밝은지입니다. 숫자 하나를 바꾸어 색을 더 연하게 하거나 한 단계 어둡게 할 수 있고 HEX에서는 거의 불가능하기 때문에 HSL을 가질 가치가 있습니다. 둘은 같은 색을 설명하지만 HSL은 다른 기하학을 통해 그 색에 도달하고 세 숫자는 정수 도와 정수 퍼센트로 반올림되므로, HSL로 갔다가 돌아온 색은 출발점에서 한두 단계 떨어진 곳에 닿을 수 있습니다. 정확한 바이트를 되돌려 받아야 한다면 HEX를 보관하십시오. 아무것도 업로드되지 않습니다.