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

HSL로 값을 넣으면 그 자리에서 HEX로 읽힙니다. 셈은 여러분의 브라우저 안에서 이루어지고, 어디로도 아무것도 보내지 않으며, 답이 무엇에 달려 있는지는 전제하지 않고 아래에 적어 두었습니다.

값을 변환하기

돌아올 때 반올림됩니다

HSL

#594531 HEX

한 색, 두 가지 표기

hsl(30, 29%, 27%) = #594531

이 변환기에 대하여

공식 hsl(H, S%, L%) → #RRGGBB

유지되는 것 눈이 색을 정리하는 방식 그대로 — 바퀴 위의 색상, 얼마나 짙은지, 얼마나 밝은지. hsl의 값어치가 거기에 있습니다. 숫자 하나만 바꾸어 색을 옅게 하거나 한 단계 어둡게 할 수 있는데, 16진에서는 거의 불가능한 일입니다.

할 수 없는 것 둘은 같은 색들을 말하지만, hsl은 다른 기하를 거쳐 거기에 이르고, 그 세 숫자는 적힐 때 정수 도와 정수 퍼센트로 반올림됩니다. 그래서 hsl로 갔다 돌아온 색은 출발한 자리에서 한두 걸음 떨어진 곳에 내려앉을 수 있습니다 — 눈에는 같고, 바이트로는 같지 않습니다. 똑같은 바이트가 필요하다면 16진 쪽을 간직하십시오.

어디에서 도는가 브라우저 안에서요. 아무것도 올리지 않으니 나중에 지울 것도 남지 않습니다.

업로드 없음

이 표기는 어디에서 왔는가

16진과 RGB는 같은 것을 두 번 쓴 것입니다. 화면의 색은 세 숫자 — 빨강과 초록과 파랑 빛을 얼마나 낼지 — 이고 각각 0에서 255까지, 곧 한 바이트입니다. 16진은 그 바이트를 열여섯 진법으로 적을 뿐이어서 #FF8800과 rgb(255, 136, 0)은 같은 화소에 내리는 같은 명령입니다. HSL이 고안된 것은 둘 다 사람이 읽을 수 없기 때문입니다. 색상을 색상환 위의 각도로, 채도와 밝기를 백분율로 주므로, 만드는 이는 세 숫자를 다시 셈하지 않고도 무언가를 밝게 할 수 있습니다. CMYK는 아주 다른 세계, 빛이 아니라 잉크의 것입니다. 빼기 방식이며 인쇄판 넷으로 지어지고, 화면이 낼 수 있는 모든 색에 닿지는 못합니다. 화면은 빛을 내고 종이는 되비칠 뿐이기 때문입니다.

어디에서 마주치는가

16진은 스타일시트에 치는 것이고 디자인 도구가 건네주는 것입니다. RGB는 색에 셈이 필요한 곳이면 어디에나 나타납니다. 그러데이션, 투명도, 색조를 계산하는 코드. HSL은 팔레트를 손으로 다듬을 때 손이 가는 표기입니다. 바라는 변화가 대개 세 숫자 가운데 하나의 변화이기 때문입니다. CMYK는 인쇄소가 요구하는 것이고, 그리로 환산하는 순간이 바로 디자인이 빛이기를 그치고 잉크가 되는 순간입니다.

자주 묻는 질문

제 CMYK 결과가 인쇄소의 것과 다른 이유는 무엇인가요?

옳은 환산이 하나만 있는 것이 아니기 때문입니다. 이 쪽의 셈은 기기에 매이지 않는 소박한 셈이고, 출발점이나 대략의 대응값이 필요할 때에는 그것이 맞는 답입니다. 인쇄소는 특정한 잉크와 종이와 인쇄기를 셈에 넣은 색 프로파일을 거쳐 환산합니다. 같은 RGB 색이라도 광택지와 비도공지에서 서로 다른 CMYK 값이 됩니다. 꼭 맞아야 하는 것이라면 공식을 믿기보다 인쇄소에 그들의 프로파일을 청하십시오.

어떤 화면 색은 왜 인쇄할 수 없나요?

둘이 닿는 색이 같지 않기 때문입니다. 화면은 빛을 더해 색을 만들고, 잉크가 도저히 따라갈 수 없는 선명하고 짙은 청록이나 초록을 낼 수 있습니다. 종이는 빛을 삼켜 색을 만들고, 가장 밝아야 종이의 흰색입니다. 각각이 닿는 색의 범위를 색역이라 하며, 겹치지 않는 자리에서는 환산이 가진 것 가운데 가장 가까운 색을 고를 수밖에 없습니다. 화면에서 밝던 색이 인쇄하면 조금 탁해 보이는 까닭이 그것입니다.

답이 정확한가요?

두 단위가 정수로 서로 정의되어 있으면 정확합니다 — 쪽에서 숫자 위에 그렇게 밝히고 있고, 반올림은 몇 자리를 보여 주느냐에만 있습니다. 비가 유한소수가 아닐 때는 유효숫자 열두 자리를 보여 주고 관계가 근사라고 말합니다. 아닌 척하지 않습니다.

제가 입력한 것이 기기 밖으로 나가나요?

아니요. 계산은 여러분의 브라우저 안에서 이루어집니다. 아무것도 올라가지 않고, 올릴 서버도 없습니다. 한 번 불러오면 네트워크를 꺼도 동작합니다.

HSL을 HEX로 변환하는 이유

생각할 수 있는 표기인 HSL로 색을 정했다고 합시다. 색상 30, 채도 29%, 명도 28%의 차분한 갈색이고, 호버 상태를 위한 더 연한 버전은 34%입니다. 이제 이 색은 HEX 코드를 원하는 곳으로 가야 합니다. 디자인 토큰 파일, 브랜드 시트, hsl()을 이해하지 못하는 도구, 이메일 템플릿, 동료에게 보내는 메시지입니다. HSL을 HEX로 변환하는 것은 논리적으로 다룬 색을 짧고 모호하지 않으며 모든 것이 이해하는 형태로 적어 두는 일입니다.

이 변환은 디자이너가 처음 만나는 방향과 반대로 작동합니다. 사람에게 친숙한 세 숫자에서 시작해 세 바이트에 도착합니다. 각 단계는 단순한 산술이지만 삼각함수 비슷한 경우와 반올림이 몇 가지 얽혀 있어서, 사람들은 대신 해 주는 쪽을 선호합니다. 이 페이지는 브라우저 안에서 이를 수행하며 아무것도 업로드되지 않습니다. 아래에서는 세 숫자가 여섯 개의 HEX 숫자가 되는 방식, 변환이 유지하는 것, HSL을 거친 색이 출발점에서 한두 단계 떨어진 곳에 닿을 수 있는 이유, 디자이너가 변환을 쓰는 방식, 피해야 할 함정을 알아봅니다.

변환이 작동하는 방식

색상, 채도, 명도에서 빨강, 초록, 파랑으로

변환기는 먼저 색이 회색에서 얼마나 멀리 있는지를 나타내는 채도량(크로마)을 계산합니다. 채도가 높을수록 커지고 명도가 50%에서 멀어질수록 작아집니다. 그런 다음 색상을 색상환의 여섯 구간 중 하나에 놓는데, 각 구간은 폭이 60도이며, 그 구간으로부터 세 채널 중 어느 것이 최대이고 어느 것이 최소이며 어느 것이 그 사이인지 정합니다. 마지막으로 명도가 맞게 나오도록 상수를 더하고, 세 값을 0에서 1의 범위에서 0에서 255로 키운 뒤 각각을 정수로 반올림합니다. 그 세 바이트를 십육진법으로 각각 두 자리씩 적습니다.

숫자로 보는 예시

hsl(30, 29%, 28%)을 잡습니다. 크로마는 (1 − |2 × 0.28 − 1|) × 0.29 = 0.56 × 0.29 = 0.1624입니다. 30도의 색상은 첫 번째 구간의 중간이므로 가운데 채널은 크로마의 절반인 0.0812입니다. 더할 상수는 0.28 − 0.0812 = 0.1988입니다. 그래서 빨강은 0.1624 + 0.1988 = 0.3612, 초록은 0.0812 + 0.1988 = 0.28, 파랑은 0.1988입니다. 255를 곱하고 반올림하면 92, 71, 51입니다. HEX로는 #5C4733입니다.

회색

채도가 0%이면 색상에 상관없이 색은 회색이고 세 바이트는 같습니다. hsl(0, 0%, 50%)은 #808080입니다. 색상은 무시되므로 어떤 색상 숫자를 써도 같은 회색이 나옵니다.

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

당신이 설명한 대로 색을 유지합니다

결과는 당신이 준 색상, 채도, 명도를 가진 색을 바이트로 적은 것입니다. 입력한 세 숫자는 눈이 분류하는 방식의 색입니다. 색상환 위의 색상, 얼마나 선명한지, 얼마나 밝은지입니다. HSL을 가질 가치가 있는 이유이며, 변환은 당신의 선택을 HEX로 충실하게 옮겨 줍니다.

되돌아갈 때 같은 숫자를 약속할 수 없습니다

둘은 같은 색을 설명하지만, HSL은 다른 기하학을 통해 그 색에 도달하며 세 숫자는 적을 때 정수 도와 정수 퍼센트로 반올림됩니다. 그래서 HSL로 갔다가 돌아온 색은 출발점에서 한두 단계 떨어진 곳에 닿을 수 있습니다. 시각적으로는 같지만 바이트 하나하나가 같지는 않습니다. 우리 예시에서 #5A4632는 HSL이 약 hsl(30, 29%, 28%)인 색이었는데, 그 반올림된 수치를 다시 변환하면 빨강에서 두 단계 떨어진 #5C4733이 나옵니다. 정확한 바이트가 필요하다면 HEX를 보관하십시오.

퍼센트와 도 기호

페이지는 색상을 도 단위로, 채도와 명도를 퍼센트로 읽습니다. 기호는 있어도 없어도 됩니다. 360보다 크거나 0보다 작은 색상은 색상환을 따라 감기므로 390은 30과 같습니다.

실용적인 쓰임

디자인 토큰 파일 작성

디자인 시스템은 색을 토큰으로 저장합니다. 많은 팀이 논리적으로 다룰 수 있어서 HSL로 색을 만들고, 모든 도구가 읽을 수 있어서 HEX로 공개합니다. 토큰마다 HSL을 HEX로 한 번 변환하면 공개된 파일은 모두가 쓸 수 있는 것이 됩니다.

hsl()을 읽지 못하는 도구를 위한 색 만들기

이메일 클라이언트, 일부 문서 편집기, 오래된 그래픽 프로그램, 많은 차트 라이브러리는 HEX만 받습니다. HSL로 정한 것은 그들이 쓰기 전에 변환되어야 합니다.

생성된 팔레트 점검

색상을 회전시켜 팔레트를 생성하는 스크립트는 hsl() 값의 목록을 줍니다. 스타일시트에 넣거나 디자이너에게 건넬 코드로 보려면 각각을 HEX로 변환하십시오. 또한 같은 코드로 반올림되어 실제로는 다르지 않은 값도 찾아낼 수 있습니다.

메시지로 색 공유하기

HEX 코드는 짧고, 복사할 수 있으며, 색을 다루는 거의 모든 사람이 이해합니다. hsl() 값은 더 길고 디자인 밖에서는 덜 익숙합니다. 누군가에게 색을 보낼 때는 HEX가 예의 바른 형태입니다.

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

hsl 값을 입력하거나 붙여 넣으세요

첫 번째 칸에 hsl(30, 29%, 28%) 형태로, 또는 세 숫자만 입력하십시오. 색상은 도, 채도와 명도는 퍼센트입니다.

HEX 코드를 읽으세요

답은 즉시 나타나며, hsl(30, 29%, 28%) = #5C4733처럼 보입니다. 대문자와 해시 기호로 적힙니다.

작업에 복사하세요

코드를 스타일시트, 토큰 파일, 메시지에 쓰십시오. 반대 방향은 HEX를 HSL로가 한 번의 클릭이면 됩니다.

이 표기들의 유래

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

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

HSL과 CMYK

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

HSL을 HEX로 변환할 때의 함정

원래 코드가 돌아오기를 기대하는 것

HEX 코드에서 시작해 HSL로 변환하고 아무것도 조정하지 않고 다시 변환하면, 한두 단계 떨어진 다른 코드를 얻을 수 있습니다. 색 하나라면 눈에 보이지 않습니다. 디자인 시스템에서는 어느 형태가 마스터인지 정하고 다른 쪽은 파생된 것으로 취급하십시오.

채도와 명도를 헷갈리는 것

둘은 실수로 바꿔 쓰기 쉽습니다. hsl(30, 28%, 29%)는 hsl(30, 29%, 28%)가 아닙니다. 순서는 색상, 채도, 명도입니다. 화면의 색이 기대와 다르게 보이면 둘을 뒤집지 않았는지 확인하십시오.

명도가 밝기가 아님을 잊는 것

명도가 같은 두 색도 밝기는 다르게 보일 수 있습니다. 명도 50%의 노랑은 50%의 파랑보다 훨씬 밝아 보입니다. 글자와 배경의 색을 고른다면 명도 숫자를 비교하지 말고 제대로 된 도구로 대비를 확인하십시오.

범위를 벗어난 값을 쓰는 것

채도와 명도는 0에서 100퍼센트로 제한됩니다. 그 범위를 벗어난 값은 잘립니다. 120%의 명도는 흰색보다 밝은 것이 아니라 그냥 흰색입니다.

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

hsl(0, 100%, 50%)은 HEX로 무엇인가요?

#FF0000이며 순수한 빨강입니다.

hsl(0, 0%, 100%)은 HEX로 무엇인가요?

#FFFFFF이며 흰색입니다.

소수를 써도 되나요?

네. hsl(30.5, 28.6%, 27.8%)도 받아들여집니다. 결과는 정수 바이트로 반올림됩니다.

변환은 정확한가요?

입력한 숫자에 대해 정수로 반올림된 정확한 바이트를 줍니다. HSL 숫자가 반올림되어 있었기 때문에 되돌아가면 한 단계 떨어진 곳에 닿을 수 있습니다.

내 색이 업로드되나요?

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

어떻게 되돌아가나요?

HEX를 HSL로를 쓰십시오.

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

어느 형태가 마스터인지 정하세요

HSL로 디자인한다면 HSL 값을 원천으로 두고 HEX를 출력으로 공개하십시오. 브랜드가 HEX를 준다면 그것을 유지하고 HSL은 변형에만 쓰십시오. 둘을 동등한 원천으로 섞는 것이 어긋남을 만듭니다.

변형에는 HSL, 고정에는 HEX

음영의 계열이 필요하면 HSL로 작업하십시오. 모든 도구에서 똑같도록 색을 고정해야 하면 HEX로 적으십시오.

입력한 숫자를 보관하세요

팔레트 메모에 HEX 옆에 HSL 값을 기록해 두십시오. 나중에 누군가 더 연한 버전을 원하면 이미 반올림된 코드가 아니라 당신의 숫자에서 시작할 수 있습니다.

색상환의 여섯 구간

어느 채널이 높고 어느 채널이 낮은가

변환은 색상환을 60도씩 여섯 구간으로 나누며, 각 구간에서 한 채널은 최대이고 하나는 최소이며 세 번째는 부드럽게 변합니다. 0에서 60까지는 빨강이 최대, 파랑이 최소이고 초록이 오릅니다. 빨강이 노랑으로 변합니다. 60에서 120까지는 초록이 최대이고 빨강이 내려갑니다. 노랑이 초록으로 변합니다. 120에서 180까지는 초록이 높게 유지되고 파랑이 오릅니다. 초록이 시안으로 변합니다. 180에서 240까지는 파랑이 이어받고 초록이 내려갑니다. 240에서 300까지는 파랑이 높게 유지되고 빨강이 오릅니다. 파랑이 마젠타로 변합니다. 300에서 360까지는 빨강이 다시 이어받고 파랑이 내려갑니다. HSL을 HEX로 변환할 때 색상이 어느 구간에 있는지 알면, 답의 세 쌍 중 어느 것이 가장 클지 알 수 있어 도움이 됩니다.

답이 비슷한 가족처럼 보이는 이유

색상과 채도는 같고 명도만 다른 색은 친척처럼 보이는 HEX 코드를 줍니다. 어느 쌍이 높고 어느 쌍이 낮은지의 패턴이 같고 크기만 커지거나 작아집니다. #5C4733, #7A5F44, #A38461은 모두 같은 계열이며 빨강이 가장 크고 그다음이 초록, 파랑입니다. 이를 한눈에 읽는 법을 익힐 수 있고, 그러면 실수를 더 쉽게 잡아낼 수 있습니다.

명도 램프 만들기

하나의 색상, 아홉 단계

변환의 매우 실용적인 쓰임은 아주 연한 색에서 아주 어두운 색까지 하나의 색으로 램프를 만드는 것입니다. 디자인 시스템이 50, 100, 200 등으로 이름 붙여 900까지 이어지는 종류의 척도입니다. 색상과 채도를 고르고 명도를 96, 90, 80, 70, 60, 50, 40, 30, 20퍼센트 같은 값으로 단계별로 움직이십시오. 각 단계에서 HSL을 HEX로 변환하면 함께 속하는 아홉 개의 코드를 얻습니다. 가장 연하고 가장 어두운 단계에서 채도를 몇 포인트 약간 낮추는 편이 일정하게 유지하는 것보다 더 자연스러워 보이는 경우가 많습니다.

단계에 이름 붙이기

각 단계에는 값이 아니라 역할을 기록하는 이름을 주십시오. 가장 연한 것은 표면, 다음은 테두리, 가장 어두운 것은 글자처럼 말입니다. 코드에서 이름은 다음 독자에게 그 색이 무엇을 위한 것인지 알려 주며, 그것을 쓰는 규칙은 건드리지 않고 이름 뒤의 숫자를 바꿀 수 있습니다.

밝은 테마와 어두운 테마

램프 뒤집기

어두운 테마는 흔히 램프를 뒤집은 밝은 테마입니다. 가장 연한 단계가 밝은 테마의 페이지 배경이 되고 가장 어두운 단계가 어두운 테마의 배경이 됩니다. 램프를 HSL로 만들었다면 어두운 테마에는 두 번째 세트의 변환 말고는 아무 비용이 들지 않습니다. 브랜드의 성격을 보존하도록 색상은 고정하고, 채도가 높은 색은 어두운 배경에서 거칠어 보이는 경향이 있으므로 채도를 약간 조정하십시오.

두 테마 모두 확인하기

두 테마의 글자와 배경 쌍마다 대비를 시험하십시오. 흰색에서 잘 맞는 색도 거의 검정에서는 실패할 수 있으며, 방금 만든 HEX 코드와 대비 도구로 확인하는 데는 일 분이 걸립니다.

색을 대략만 알고 있을 때

색상환에서 시작해 다듬으세요

때로는 HEX 코드가 전혀 없이 생각만 있을 때가 있습니다. 차분한 파랑, 따뜻한 주황, 싱그러운 초록 같은 것입니다. HSL이 시작하기 좋은 곳인 이유는, 색상환의 지표에서 색상을 고르고, 적당한 채도와 중간 정도의 명도를 정한 다음 HSL을 HEX로 변환해 무엇이 나왔는지 볼 수 있기 때문입니다. 너무 요란해 보이면 채도를 낮추고, 밋밋해 보이면 명도를 움직이십시오. 시도마다 몇 초밖에 안 들고, 결국 스타일시트에 곧바로 넣을 수 있는 HEX 코드가 남습니다.

실제 사례

앱의 성공 상태를 위해 hsl(145, 55%, 38%)의 초록을 골랐다고 해 봅시다. 입력하면 #2C9658을 읽습니다. 그 코드를 토큰 파일에 --success로 씁니다. 성공 알림의 배경에는 같은 색상으로 hsl(145, 45%, 94%)를 잡고 #E9F7EF를 읽습니다. 테두리에는 hsl(145, 45%, 78%)이고 #AEE0C3으로 읽힙니다. 세 코드, 하나의 색상, 모두 일 분 만에 도출했고, 각각은 팀의 어떤 도구에서도 열 수 있는 평범한 HEX 코드입니다.

짧은 체크리스트

변환 전

세 숫자의 순서를 확인하십시오. 색상, 채도, 명도입니다. 어느 형태가 마스터인지 정하십시오.

변환하는 동안

값을 입력하고 HEX를 읽고 해시 기호와 함께 복사하십시오.

변환 후

화면에서 문맥 속의 색을 보고, 나중을 위해 코드 옆에 HSL 값을 적어 두십시오.

흔한 실수

채도와 명도를 바꾸는 것

순서는 색상, 채도, 명도입니다.

옛 HEX를 복구하기를 기대하는 것

한 단계 떨어진 곳에 닿을 수 있습니다. 중요하다면 원본을 보관하십시오.

대비 대신 명도를 비교하는 것

글자와 배경에는 대비 도구를 쓰십시오.

색은 기기에 남습니다

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

요약

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

길이와 넓이 질량과 부피 온도 통화