HEX를 RGB로 변환 Hexadecimal ↔ Red Green Blue 무료 온라인 안전

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

값을 변환하기

양쪽 모두 정확

HEX

rgb(90, 70, 50) RGB

한 색, 두 가지 표기

#5A4632 = rgb(90, 70, 50)

이 변환기에 대하여

공식 #RRGGBB → rgb(R, G, B)

유지되는 것 색을, 그대로. 16진과 rgb()는 같은 세 숫자 — 빨강, 초록, 파랑 각각 0에서 255 — 의 두 표기이므로 어림잡는 것이 없고, 갔다 돌아오면 떠난 값이 그대로 돌아옵니다. 네 번째 값인 투명도도 함께 건너갑니다. #RRGGBBAA는 rgba()가 되고, 그 반대도 같습니다.

할 수 없는 것 두 표기 모두 sRGB를 말합니다. 화면이 서른 해 동안 써 온 색 공간입니다. 그 바깥의 색은 말하지 못합니다 — 더 새로운 CSS 표기인 lab(), oklch(), color()가 그래서 있습니다. 줄임 표기는 지켜지지 않고 펼쳐집니다. #abc는 #AABBCC로 돌아옵니다. 같은 색을 길게 쓴 것입니다.

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

업로드 없음

이 표기는 어디에서 왔는가

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

어디에서 마주치는가

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

자주 묻는 질문

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

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

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

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

답이 정확한가요?

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

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

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

HEX를 RGB로 변환하는 이유

디자인 도구는 색을 #5A4632로 줍니다. 스타일시트, 캔버스 스크립트, 차트 라이브러리, 그래픽 프로그램은 rgb(90, 70, 50)으로 요구합니다. 같은 색이며, 한 표기에서 다른 표기로 옮기는 일은 늘 생깁니다. 브랜드 가이드에는 HEX 코드가 적혀 있는데 코드는 더 밝은 음영을 계산하려고 숫자를 필요로 하고, 고객이 로고의 색을 보내 주었는데 투명도가 있는 rgba()를 채워야 하며, 라이브러리가 세 개의 개별 값만 받는 경우가 그렇습니다. HEX를 RGB로 변환하는 것은 작은 일이지만, 믿을 만한 변환기는 십육진법 산수를 머릿속으로 하다가 틀리는 일을 막아 줍니다.

이 변환은 정확하며, 모든 색 변환이 그런 것은 아닙니다. HEX와 rgb()는 같은 세 숫자, 곧 화면이 내야 할 빨강, 초록, 파랑 빛의 양을 각각 0에서 255까지로 나타낸 두 가지 표기입니다. 근사되는 것은 없고 왕복하면 출발했던 값이 돌아옵니다. 이 페이지는 브라우저 안에서 이를 수행하며 아무것도 업로드되지 않습니다. 아래에서는 HEX 숫자가 세 숫자로 어떻게 대응하는지, 투명도가 어떻게 옮겨지는지, 줄임 형식이 무엇을 하는지, sRGB의 한계, 개발자와 디자이너가 HEX를 RGB로 변환해야 하는 상황을 알아봅니다.

변환이 작동하는 방식

세 쌍의 숫자가 세 개의 수가 됩니다

HEX 색은 해시 기호 뒤에 여섯 개의 십육진법 숫자가 오는 것이며, 쌍으로 읽습니다. 첫 쌍은 빨강, 둘째는 초록, 셋째는 파랑입니다. 각 쌍은 십육진법으로 00에서 FF 사이의 수이며, 이는 일상에서 쓰는 십진법으로 0에서 255입니다. 그래서 #5A4632는 5A, 46, 32로 나뉩니다. 5A는 5 × 16 + 10 = 90, 46은 4 × 16 + 6 = 70, 32는 3 × 16 + 2 = 50입니다. 색은 rgb(90, 70, 50)이며, 페이지가 시작할 때의 예시입니다.

숫자가 0에서 F까지 가는 이유

십육진법에는 열여섯 개의 기호가 필요하므로 9 다음에는 10에서 15를 뜻하는 A에서 F까지의 글자가 옵니다. 이런 숫자 한 쌍은 16 × 16 = 256개의 값을 주며, 이는 정확히 한 바이트가 담을 수 있는 양입니다. 화면의 색은 세 바이트이고, HEX는 이를 간결하게 적는 방법일 뿐입니다. 쉼표와 괄호가 있는 세 개의 숫자 대신 여섯 글자입니다.

대문자와 소문자

#5a4632와 #5A4632는 같은 색입니다. CSS는 어느 쪽이든 받아들이고, 이 변환기도 그렇습니다. 프로젝트마다 하나의 규칙을 정해 따르십시오. 대소문자가 섞이면 스타일시트에서 검색하기가 어려워집니다.

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

색을 정확히 유지합니다

HEX와 rgb()는 빨강, 초록, 파랑에 대한 0에서 255의 같은 세 숫자를 적는 두 가지 표기이므로 근사되는 것이 없고 왕복하면 출발했던 값이 돌아옵니다. HEX를 RGB로 변환했다가 되돌리면, 대문자 여부를 제외하고 처음의 코드와 같은 코드를 얻습니다.

투명도도 옮겨 줍니다

투명도를 위한 네 번째 값도 옮겨집니다. #RRGGBBAA는 rgba()가 되고 그 반대도 됩니다. 마지막 쌍은 알파 채널이며, 완전히 투명한 00에서 완전히 불투명한 FF까지입니다. 그래서 #5A463280은 rgba(90, 70, 50, 0.5)입니다. 십육진법의 80은 128이고, 255 중 128은 약 절반이기 때문입니다. 여덟 자리는 모든 최신 브라우저가 받아들입니다.

sRGB 밖의 색은 설명할 수 없습니다

두 표기 모두 삼십 년 동안 화면이 사용해 온 색 공간인 sRGB를 설명합니다. 그 밖의 색은 설명할 수 없으며, 그것이 더 새로운 CSS 표기인 lab(), oklch(), color()가 존재하는 이유입니다. 최신 디스플레이는 sRGB가 담는 것보다 채도가 높은 색을 보여 줄 수 있으며, 넓은 색역의 도구에서 그런 색을 고른 디자이너는 그것을 HEX로 적으면 sRGB로 잘려 나가는 것을 보게 됩니다.

줄임 형식은 보존되지 않고 확장됩니다

줄임 형식은 보존되는 것이 아니라 확장됩니다. #abc는 같은 색을 길게 쓴 #AABBCC로 돌아옵니다. 각 숫자가 두 번 반복됩니다. 그래서 세 자리 코드를 붙여 넣고 맞는 숫자를 얻을 수는 있지만, 긴 표기를 보고 짧은 표기를 복원할 수는 없으며 각 쌍이 반복되는지 확인하는 수밖에 없습니다.

흔한 색과 그 숫자

기억해 둘 몇 가지

흰색은 #FFFFFF로 rgb(255, 255, 255)이며 세 빛 모두 최대 출력입니다. 검정은 #000000으로 rgb(0, 0, 0)이며 빛이 전혀 없습니다. 순수한 빨강은 #FF0000, 초록은 #00FF00, 파랑은 #0000FF입니다. 중간 회색은 세 쌍이 같은 아무 코드이며 #808080은 rgb(128, 128, 128)입니다. 같은 쌍은 언제나 회색을 뜻하는데, 세 빛의 양이 같으면 색상이 생기지 않기 때문입니다.

코드를 한눈에 읽기

패턴을 알면 HEX 숫자로 색을 어림할 수 있습니다. 첫 쌍이 높은 코드는 붉은 기가 돌고, 가운데 쌍이 높으면 초록 기가, 마지막 쌍이 높으면 푸른 기가 돕니다. #FF8800은 빨강이 많고 초록이 조금 있으며 파랑이 없으니 주황입니다. 그것을 알아내는 데 도구는 필요 없지만, 정확한 숫자에는 필요합니다.

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

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

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

rgb 값을 읽으세요

답은 다른 칸에 즉시 나타나며, rgb(90, 70, 50) 형태이고, 코드에 투명도가 있었다면 rgba()입니다. 페이지는 #5A4632 = rgb(90, 70, 50)이라는 문장을 보여 주어 한눈에 확인할 수 있습니다.

코드에 복사하세요

결과를 요구한 스타일시트, 스크립트, 도구에 붙여 넣으십시오. 세 숫자를 따로 필요로 한다면 괄호 안의 숫자들이 그것입니다.

이 표기들의 유래

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

화면의 색은 세 개의 숫자입니다. 빨강, 초록, 파랑 빛을 얼마나 내보낼지를 각각 0에서 255까지로 나타내며, 이는 한 바이트입니다. HEX는 그 바이트를 십육진법으로 적었을 뿐이므로, #FF8800과 rgb(255, 136, 0)은 같은 픽셀에 대한 같은 지시입니다.

HSL과 CMYK

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

어디서 만나는가

스타일시트에서

HEX는 스타일시트에 입력하는 것이자 디자인 도구가 건네주는 것입니다. RGB는 색에 산술이 필요한 곳에 나타납니다. 그라디언트, 투명도, 음영을 계산하는 코드입니다. 두 표기를 모두 알고 그 사이를 오갈 수 있는 것은 일상적인 프런트엔드 작업의 일부입니다.

스크립트와 캔버스 그리기에서

그리기 코드는 두 색을 섞거나, 하나를 일정량 어둡게 하거나, 픽셀이 목표와 일치하는지 검사하려고 세 숫자를 따로 원하는 경우가 많습니다. HEX를 RGB로 변환하면 숫자를 바로 얻습니다.

그래픽과 이미지 도구에서

이미지 편집기는 대개 색을 세 개의 숫자나 HEX 코드로 보여 주며 어느 쪽이든 입력하게 해 줍니다. 둘 사이를 오가면 웹 페이지의 색을 숫자를 원하는 프로그램에서 재현할 수 있습니다.

문서와 브랜드 가이드에서

브랜드 가이드는 색을 웹용 HEX, 화면용 RGB, 인쇄용 CMYK로 나열할 수 있습니다. 앞의 둘이 일치하는지 확인하는 것은 변환 한 번의 문제이며, 천 장의 전단지에 인쇄되기 전에 오타를 잡아내는 종류의 점검입니다.

RGB 형태의 실용적 쓰임

두 번째 색 없이 투명도

rgba(90, 70, 50, 0.5)를 쓰면 색을 절반 세기로 얻어, 그 뒤에 있는 것이 비쳐 보입니다. 새 색을 만들어 내지 않고 브랜드 색으로 오버레이, 그림자, 색조 있는 배경을 만드는 표준적인 방법입니다.

더 밝거나 어두운 음영 계산

호버 상태를 약간 더 어둡게 하려면 스크립트가 세 숫자 각각에서 일정량을 뺄 수 있습니다. HEX 문자열에서 같은 일을 하기는 번거롭지만 RGB에서는 단순한 산술입니다. 색상에 기반한 조정이 필요하다면 대신 HEX를 HSL로 변환하십시오.

대비 검사

접근성 도구는 빨강, 초록, 파랑 값으로 두 색의 대비를 계산합니다. 숫자가 있으면 직접 계산하거나 검사기에 붙여 넣어 배경 위의 글자가 읽을 만한지 확인할 수 있습니다.

HEX를 RGB로 변환할 때의 함정

알파 쌍을 잊는 것

여덟 자리 코드는 마지막 두 자리에 투명도가 있습니다. 그것을 떼어 내면 투명도를 잃습니다. 결과가 그 색이라고 판단하기 전에 코드의 길이를 확인하십시오.

순서를 혼동하는 것

HEX는 빨강, 초록, 파랑입니다. 몇몇 형식과 일부 오래된 그래픽 API는 파랑, 초록, 빨강을 씁니다. 특정 프로그램에서 색이 잘못 나온다면 채널 순서를 확인하십시오.

스크린샷에서 복사하는 것

스크린샷에서 읽은 색은 화면의 색상 관리와 압축을 거친 뒤의 색입니다. 원본 파일의 색과 약간 다를 수 있습니다. 가능하다면 디자인 파일을 쓰십시오.

화면이 일치한다고 가정하는 것

두 화면은 같은 코드를 약간 다르게 보여 줍니다. 숫자는 정확하며, 보이는 모습은 디스플레이와 그 프로파일에 달려 있습니다.

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

#FF0000은 RGB로 무엇인가요?

rgb(255, 0, 0)이며 순수한 빨강입니다.

#FFFFFF는 RGB로 무엇인가요?

rgb(255, 255, 255)이며 흰색입니다.

세 자리 코드도 변환할 수 있나요?

네. 각 숫자가 두 번 반복됩니다. #09C는 #0099CC가 되며 rgb(0, 153, 204)입니다.

변환은 정확한가요?

네. 같은 세 숫자를 적는 두 가지 표기입니다.

내 색이 업로드되나요?

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

어떻게 되돌아가나요?

RGB를 HEX로를 쓰십시오. 세 숫자를 HEX 코드로 적어 줍니다.

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

다음에 필요한 것을 알아 두세요

투명도가 필요하면 rgba()가 자연스러운 형태입니다. 명도나 색상을 조정해야 하면 HSL이 더 쉽습니다. 색이 인쇄될 예정이라면 그 변환이 안고 있는 단서와 함께 CMYK가 다음 단계입니다. RGB를 CMYK로를 보십시오.

HEX를 마스터로 유지하세요

브랜드 팔레트의 색은 HEX 코드를 기준으로 유지하십시오. 짧고, 모호하지 않으며, 어디서나 이해됩니다. 다른 형태는 필요할 때 거기서 도출하십시오.

사용자 정의 속성을 쓰세요

CSS에서는 색을 --brand: #5A4632처럼 한 번 정의하고 이름으로 참조하십시오. rgba()에 숫자가 필요하다면 --brand-rgb: 90 70 50도 정의하십시오. 그러면 변환은 단 한 번 이루어집니다.

현대 CSS와 RGB 형태

공백으로 구분하는 구문

현재의 CSS는 공백과 투명도를 위한 슬래시를 쓰는 rgb()를 받아들이며, rgb(90 70 50 / 50%)가 그 예입니다. 숫자는 쉼표 형태와 같으므로 변환 결과는 두 형태에서 모두 통합니다. 오래된 브라우저와 일부 도구는 쉼표를 기대하므로, 색이 어디에 쓰일지 모를 때는 쉼표 형태가 여전히 안전한 선택입니다.

백분율과 분수

RGB는 rgb(35% 27% 20%)처럼 백분율로도 쓸 수 있으며, 여기서 100퍼센트는 255입니다. 이 페이지는 HEX가 저장하는 것이자 대부분의 도구가 기대하는 것이므로 정수를 제공합니다. 백분율이 필요하다면 각 숫자를 255로 나누고 100을 곱하십시오.

세 숫자를 위한 사용자 정의 속성

흔한 요령은 세 숫자만 --brand-rgb: 90 70 50처럼 사용자 정의 속성에 저장하고 rgb(var(--brand-rgb) / 0.5)로 쓰는 것입니다. 하나의 정의로 불투명한 용도와 반투명한 용도를 모두 감당할 수 있습니다. 이를 위해 HEX를 RGB로 변환할 때는 답에서 숫자만 복사하십시오.

실제로 색 다루기

브랜드 가이드와 대조하세요

브랜드 가이드가 같은 색에 HEX와 rgb를 모두 주었다면 하나를 변환해 다른 하나와 비교하십시오. 불일치는 대개 가이드의 오타를 뜻하며, 모든 페이지에 쓰이기 전에 찾는 것은 그 일 분의 값어치가 있습니다.

팔레트를 짧은 목록으로 유지하세요

대부분의 사이트는 다섯에서 여덟 가지의 색을 씁니다. 두 형태로 메모에 적어 두십시오. 새 컴포넌트를 위해 HEX를 RGB로 변환해야 할 때마다 다시 계산하는 대신 찾아볼 수 있고 팔레트가 일관되게 유지됩니다.

색을 역할로 이름 붙이세요

기본, 표면, 경고 같은 이름은 초록이나 갈색 같은 이름보다 리디자인에서 더 잘 살아남습니다. 변환은 숫자를 주고, 이름은 그것이 무엇을 위한 것인지 말해 줍니다.

실제 사례

브랜드 색이 #1E7A5C이고 카드 배경에 쓸 반투명 버전을 원한다고 해 봅시다. 코드를 입력하고 rgb(30, 122, 92)를 읽습니다. 스타일시트에 background: rgba(30, 122, 92, 0.12)라고 써서 같은 초록의 아주 연한 색조를 만들고, 테두리에는 rgba(30, 122, 92, 0.4)를 씁니다. 투명도가 페이지를 비치게 해 주므로 카드는 흰 페이지와 회색 페이지 위에서 모두 편안하게 놓입니다. 나중에 브랜드 색이 바뀌면 하나의 사용자 정의 속성에 있는 세 숫자를 바꾸기만 하면 모든 색조가 따라옵니다.

짧은 체크리스트

변환 전

코드의 길이를 확인하십시오. 세 자리, 여섯 자리, 여덟 자리입니다. 투명도가 필요한지 정하십시오.

변환하는 동안

코드를 붙여 넣고 rgb 값을 읽은 뒤 괄호까지 복사하거나 세 숫자만 복사하십시오.

변환 후

실제 배경 위에서 문맥 속의 색을 시험하고, 그 위에 놓이는 글자의 대비를 확인하십시오.

흔한 실수

투명도 쌍을 버리는 것

여덟 자리는 알파를 뜻합니다. 유지하거나 rgba()로 변환하십시오.

채널 순서를 혼동하는 것

HEX는 빨강이 먼저입니다. 일부 도구는 파랑이 먼저일 것을 기대합니다.

화면을 진실로 취급하는 것

숫자는 정확합니다. 보이는 모습은 디스플레이에 달려 있습니다.

색은 기기에 남습니다

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

요약

여기서 HEX를 RGB로 변환하려면 HEX 코드를 입력하거나 붙여 넣고 rgb 값을 즉시 읽으십시오. 변환은 색을 정확히 유지합니다. HEX와 rgb()는 빨강, 초록, 파랑에 대한 0에서 255의 같은 세 숫자를 적는 두 가지 표기이므로 근사되는 것이 없고 왕복하면 출발했던 값이 돌아옵니다. 투명도를 위한 네 번째 값도 옮겨져서 #RRGGBBAA는 rgba()가 되고 그 반대도 됩니다. 두 표기 모두 sRGB를 설명하므로 그 밖의 색은 설명할 수 없고, 줄임 형식은 보존되지 않고 확장됩니다. #abc는 #AABBCC로 돌아옵니다. 아무것도 업로드되지 않습니다.

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