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

RGB를 HEX로 변환하는 이유

이미지 편집기, 운영체제의 색 선택기, 또는 코드 한 줄은 색을 90, 70, 50이라는 세 개의 수로 줍니다. 스타일시트, 디자인 토큰 파일, 동료에게 보내는 메시지는 이것을 #5A4632라는 짧은 코드 하나로 원합니다. 그 사이의 단계가 이 페이지가 하는 일입니다. RGB를 HEX로 변환한다는 것은 같은 세 개의 수를 십육 진법으로 각각 두 자리씩 쓰고 앞에 해시 기호를 붙이는 것입니다. 색 하나는 쉽게 할 수 있지만 스무 개는 지루하고, 수에 앞자리 영이 필요하거나 숫자가 글자일 때는 틀리기 쉽습니다.

이 변환은 정확한데, 모든 색 변환이 그렇지는 않습니다. HEX와 rgb()는 같은 세 개의 수, 곧 화면이 내야 할 빨강, 초록, 파랑 빛의 양을 각각 0에서 255까지로 쓴 두 가지 표기입니다. 어림되는 것이 없고 왕복하면 처음으로 돌아옵니다. 페이지는 브라우저 안에서 이를 처리하며 아무것도 업로드되지 않습니다. 아래에는 각 수가 두 자리 HEX가 되는 방법, 투명도가 이어지는 방식, sRGB의 한계, 사람들이 RGB를 HEX로 변환해야 하는 곳, 프로젝트의 색을 일관되게 유지하는 몇 가지 습관이 있습니다.

변환이 작동하는 방식

각 수가 두 자리 HEX가 됩니다

rgb(90, 70, 50)을 봅시다. 각 수를 십육으로 나눕니다. 90은 5 곱하기 16 더하기 10이고, 10은 숫자 A이므로 90은 5A가 됩니다. 70은 4 곱하기 16 더하기 6이므로 46입니다. 50은 3 곱하기 16 더하기 2이므로 32입니다. 세 쌍을 합치고 해시 기호를 붙이면 #5A4632입니다. 페이지는 입력하는 대로 이를 해 주며 rgb(90, 70, 50) = #5A4632라는 문장을 보여 주어 확인할 수 있게 합니다.

앞자리 영

모든 쌍은 두 자리여야 합니다. 16 미만의 수는 앞에 영이 필요합니다. 7은 07이 되고 0은 00이 됩니다. 그래서 rgb(0, 7, 255)는 #0007FF이지 전혀 다른 뜻이 되는 #07FF가 아닙니다. 영을 잊는 것이 손으로 변환할 때 가장 흔한 실수입니다.

범위

각 수는 0과 255 사이에 있어야 합니다. 255를 넘는 값은 두 자리 HEX로 쓸 수 없고, 음수는 의미가 없습니다. 코드의 계산이 270이나 −5를 냈다면 먼저 범위로 제한하십시오. 변환기도 같은 일을 하여 잘못된 코드를 만들지 않습니다.

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

색을 정확히 지킵니다

HEX와 rgb()는 같은 세 개의 수, 곧 빨강, 초록, 파랑의 0에서 255까지의 두 가지 표기이므로 어림되는 것이 없고 왕복하면 처음으로 돌아옵니다. RGB를 HEX로, 다시 되돌려 변환하면 시작한 수가 그대로 나옵니다.

투명도를 옮겨 줍니다

투명도를 위한 네 번째 값도 옮겨집니다. #RRGGBBAA는 rgba()가 되고 그 반대도 됩니다. 0.5의 투명도는 255의 절반이 약 128이고 HEX로 80이므로 쌍 80이 됩니다. 그래서 rgba(90, 70, 50, 0.5)는 #5A463280입니다. 여덟 자리 HEX는 현재의 모든 브라우저가 받아들입니다.

sRGB 밖의 색은 나타낼 수 없습니다

두 표기 모두 화면이 삼십 년 동안 써 온 색 공간인 sRGB를 설명합니다. 그 밖의 색은 설명할 수 없으며, 더 새로운 CSS 표기인 lab(), oklch(), color()가 존재하는 이유가 그것입니다. 넓은 색역 도구에서 색을 가져왔다면 복사한 세 개의 수는 이미 sRGB 버전이며 HEX는 그것에 충실합니다.

줄임 표기는 보존하지 않습니다

#AABBCC를 #ABC처럼 세 자리로 쓸 수 있는 코드라도 변환기는 긴 형태를 줍니다. 긴 형태는 언제나 유효하고 같은 색이며, 짧은 형태는 읽는 사람을 위한 편의일 뿐입니다.

흔한 색과 그 코드

기억해 둘 몇 가지

rgb(255, 255, 255)는 #FFFFFF로 흰색이며 세 빛이 모두 최대 출력입니다. rgb(0, 0, 0)은 #000000으로 검정이며 빛이 전혀 없습니다. rgb(255, 0, 0)은 #FF0000으로 순수한 빨강이고, rgb(0, 255, 0)은 #00FF00, rgb(0, 0, 255)는 #0000FF입니다. 세 수가 같은 모든 색은 회색이며, 그 코드는 같은 세 쌍을 가집니다. rgb(128, 128, 128)은 #808080입니다.

웹 안전색 습관

옛 안내서는 쌍이 00, 33, 66, 99, CC, FF뿐인 웹 안전색을 말했습니다. 이는 256색 화면 시절의 것이며 살아남을 이유가 없습니다. 원하는 값을 무엇이든 쓰십시오. 화면은 모두 보여 줄 수 있습니다.

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

세 개의 수 입력하기

첫 번째 입력란에 rgb(90, 70, 50) 형식으로, 또는 쉼표나 공백으로 구분한 수로 색을 입력하십시오. 백분율은 필요 없습니다. 0에서 255까지의 수를 쓰십시오.

HEX 코드 읽기

답이 다른 입력란에 해시 기호로 시작해 대문자로 바로 나타납니다. 투명도를 위한 네 번째 값을 주었다면 코드는 여덟 자리가 됩니다.

작업에 복사하기

코드를 스타일시트, 토큰 파일, 메시지에 붙여 넣으십시오. 다음 변환이 조회가 되도록 팔레트 메모에 추가하십시오.

이 표기법들은 어디서 왔나

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

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

HSL과 CMYK

HSL은 둘 다 사람이 읽기 어렵기 때문에 고안되었습니다. 색조를 색상환 둘레의 각도로, 채도와 명도를 백분율로 주므로, 디자이너는 세 수를 다시 계산하지 않고도 색을 더 밝게 만들 수 있습니다. CMYK는 전혀 다른 세계, 곧 빛이 아니라 잉크에 속합니다. 감산 방식이며 네 개의 인쇄 판으로 만들어지고, 화면이 빛을 내는 데 비해 종이는 반사만 하기 때문에 화면이 낼 수 있는 모든 색에 이를 수는 없습니다. HEX를 HSL로 변환과 RGB를 CMYK로 변환을 보십시오.

어디서 만나는가

디자인 인계에서

디자이너는 rgb 값을 보여 주는 편집기나 선택기에서 일하고, 개발자는 스타일시트에 HEX가 필요합니다. RGB를 HEX로 변환하는 것은 그 중간 단계이며 팔레트의 모든 색에 대해 이루어집니다.

색을 계산하는 스크립트에서

두 색을 섞거나 하나를 어둡게 하는 스크립트는 수로 작업하고 그중 셋으로 끝납니다. 결과를 스타일시트에 쓰거나 표시하려면 HEX 코드로 써야 합니다. 코드에서 손으로 하는 것은 몇 줄이지만 변환기로 결과를 확인하는 편이 더 빠릅니다.

데이터 시각화에서

차트 라이브러리는 색을 HEX 문자열로 받습니다. 수치 방법으로 생성한 팔레트는 rgb 세 쌍으로 나옵니다. 변환 단계가 하나를 다른 것으로 바꿉니다.

문서와 프레젠테이션에서

오피스 프로그램은 색을 RGB 수로 보여 주고, 웹 편집기는 HEX를 원합니다. 브랜드 색이 둘 모두에 나타나야 할 때 변환은 둘을 같게 유지합니다.

RGB를 HEX로 변환할 때의 함정

앞자리 영을 잊기

7을 07이 아니라 7로 쓰면 뒤따르는 모든 자리가 밀립니다. 쌍마다 항상 두 자리를 쓰십시오.

퍼센트와 0~255 혼동하기

rgb(35%, 27%, 20%)는 100퍼센트가 255인, 수의 다른 표기입니다. 출처가 백분율을 쓴다면 먼저 0에서 255로 변환하십시오. 2.55를 곱합니다.

계산된 색의 반올림 오차

127.5를 만들어 내는 스크립트는 그것이 127인지 128인지 정해야 합니다. 차이는 보이지 않지만 하나의 색이라고 생각한 것에 두 개의 코드를 만들어 냅니다. 어디서나 같은 방식으로 반올림하십시오.

스크린샷에서 색 가져오기

스크린샷에서 읽은 색은 화면의 색 관리와 어쩌면 압축을 거쳤습니다. 원본과 한두 단계 다를 수 있습니다. 가능하면 디자인 파일을 쓰십시오.

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

rgb(255, 0, 0)은 HEX로 무엇인가요?

#FF0000, 순수한 빨강입니다.

rgb(0, 0, 0)은 HEX로 무엇인가요?

#000000, 검정입니다.

HEX 코드에 소문자를 써도 되나요?

네. #5a4632와 #5A4632는 같은 색입니다. 페이지는 대문자로 씁니다.

변환은 정확한가요?

네. 같은 세 개의 수를 두 가지로 표기한 것입니다.

내 색이 업로드되나요?

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

되돌리려면 어떻게 하나요?

HEX를 RGB로 변환을 쓰십시오. 세 쌍을 수로 읽습니다.

프로젝트에서 색을 일관되게 유지하는 습관

색마다 한 번만 정의하기

팔레트를 --brand: #5A4632 같은 사용자 지정 속성에 두고 색을 이름으로 참조하십시오. 새 색을 위해 RGB를 HEX로 변환하면 한 줄만 더하면 되고 모든 사용처가 따라옵니다.

대소문자 하나 고르기

HEX 코드에 대문자나 소문자를 하나 골라 지키십시오. 그러면 코드에서 색을 찾는 일이 믿을 만해집니다.

출처 기록하기

각 색 옆에 어디서 왔는지 적어 두십시오. 브랜드 가이드, 로고, 샘플링한 이미지입니다. 색이 맞는지 묻는 일이 생기면 어디서 확인할지 압니다.

대비 시험하기

색 있는 배경 위의 글자는 도구로 대비율을 확인하십시오. rgb 형태의 수는 공식에 바로 들어가고, HEX 형태는 대부분의 검사기에 입력하는 것입니다.

왜 256단계이고 수 뒤에는 무엇이 있나

빛마다 여덟 비트

세 개의 수는 각각 여덟 비트에 저장되며, 이는 0에서 255까지 256개의 값을 허용합니다. 셋을 합치면 256 × 256 × 256, 약 16.7백만 가지 조합이 되고, 대부분의 조건에서 눈이 구분할 수 있는 것보다 많습니다. HEX 코드가 정확히 여섯 자리인 이유입니다. 빛마다 둘, 더도 덜도 아닙니다. RGB를 HEX로 변환할 때 여러분은 사람들이 합의할 수 있었던 가장 간결한 형태로 세 바이트를 써 내는 것입니다.

같은 간격이 같게 보이지 않는 이유

수는 눈에 닿는 빛에 비례하지 않습니다. 화면은 2.2제곱에 가까운 곡선을 적용하여 어두운 색조가 밝은 색조보다 256단계 가운데 더 많은 몫을 얻게 하는데, 눈에 맞는 방식입니다. 10에서 20으로의 한 단계는 240에서 250으로의 한 단계보다 큰 변화처럼 보입니다. 이는 두 색의 수를 평균 내어 두 색을 평균하면 빛을 섞어서 볼 색이 나오지 않는다는 뜻이며, 코드에서 그라데이션과 혼합을 계산할 때 중요한 사실입니다.

회색과 대각선

모든 회색은 세 개의 수가 같은 선 위에 있습니다. 0의 검정에서 255의 흰색까지 256개가 있습니다. RGB를 HEX로 변환했는데 세 쌍이 같다면 색조가 없는 색임을 바로 압니다. 쌍이 한두 단계 다른 거의 회색은 옅은 색기가 있으며, 디자이너는 중립색에 따뜻함이나 시원함의 기미를 주려고 이를 자주 씁니다.

팔레트 만들고 점검하기

고른 몇 가지 색에서 팔레트로

전형적인 팔레트에는 주색, 강조색, 글자용 중립색, 면에 쓸 더 밝은 중립색, 성공과 오류를 위한 한두 가지 신호 색이 있습니다. 디자인 도구에서 각각을 골라 rgb 수를 읽고 스타일시트를 위해 RGB를 HEX로 변환하십시오. 역할을 설명하는 이름의 사용자 지정 속성으로 쓰면 팔레트는 모든 컴포넌트에서 쓸 준비가 됩니다.

글자와 배경의 대비

읽기 쉬운 글자에는 글자와 배경 사이에 밝기 차이가 충분해야 합니다. 접근성 지침은 두 색의 빨강, 초록, 파랑 값으로 계산한 대비율을 정의하고 일반 글자에 최소 4.5 대 1을 요구합니다. 검사기는 HEX 코드를 받으므로 여기서 만든 코드를 바로 넣을 수 있습니다. 흰 바탕 위의 주색만이 아니라 쓰려는 모든 짝을 확인하십시오.

목록 변환하기

변환할 색이 많을 때는 하나씩 처리하고 각 결과를 이름과 용도와 함께 표에 붙여 넣으십시오. 색 하나에 잠깐이면 되고, 표는 프로젝트 전체의 참고가 됩니다. 색이 나중에 조정되면 그 행만 바꾸면 됩니다.

HEX와 rgb를 맞추어 두기

프로젝트가 일부 색은 HEX로, 다른 색은 rgb로 저장한다면 누군가 하나만 고치고 다른 하나를 잊을 때 둘이 어긋나기 쉽습니다. 하나를 원본으로 정하고, 보통 HEX로, 필요할 때마다 변환기로 다른 하나를 얻으십시오.

관련 변환기

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

계산 예

이미지 편집기의 색 선택기가 사진의 강조색이 rgb(214, 98, 56)이라고 알려 준다고 해 봅시다. 세 개의 수를 입력해 #D66238을 읽습니다. 스타일시트에는 --accent: #D66238로 쓰고 버튼과 링크에 씁니다. 동료가 브랜드 가이드에서 이 색이 무엇이냐고 묻고, 코드를 보냅니다. 나중에 배너용 반투명 버전이 필요해서 HEX를 RGB로 변환해 rgba(214, 98, 56, 0.15)를 만듭니다. 두 변환 모두 정확하므로 배너는 버튼과 같은 색조입니다.

짧은 점검표

변환하기 전에

각 수가 0과 255 사이인지 확인하십시오. 투명도가 필요한지 정하십시오.

변환하는 동안

세 개의 수를 입력하고, 코드를 읽고, 해시 기호와 함께 복사하십시오.

변환한 뒤에

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

흔한 실수

앞자리 영을 빼기

각 쌍은 두 자리입니다. 7은 07입니다.

255를 넘는 수 쓰기

두 자리로 쓸 수 없습니다. 먼저 제한하십시오.

화면을 진실로 여기기

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

색은 기기에 남습니다

계산은 로컬에서 이루어집니다. 값은 여러분의 브라우저가 사용할 뿐 어디로도 전송되지 않습니다. 나중에 지울 것도, 만들 계정도 없습니다. 이것이 RGB를 HEX로 변환하는 간단한 방법입니다.

요약

여기서 RGB를 HEX로 변환하려면 세 개의 수를 입력하고 HEX 코드를 바로 읽으십시오. 변환은 색을 정확히 지킵니다. HEX와 rgb()는 빨강, 초록, 파랑의 0에서 255까지, 같은 세 개의 수를 두 가지로 표기한 것이므로 어림되는 것이 없고 왕복하면 처음으로 돌아옵니다. 투명도를 위한 네 번째 값도 옮겨져, rgba()는 #RRGGBBAA가 되고 그 반대도 됩니다. 두 표기 모두 sRGB를 설명하므로 그 밖의 색은 설명할 수 없습니다. 모든 쌍은 두 자리이므로 16 미만의 수에는 앞자리 영이 붙습니다. 아무것도 업로드되지 않습니다.