HEX → RGB 색상 변환기

HEX와 RGB: 같은 색을 표현하는 두 가지 방법

화면에서 보이는 모든 색은 세 가지 빛으로 혼합됩니다. 빨간색, 녹색, 파란색. 셋 모두 최대치이면 흰색, 모두 끄면 검은색이 됩니다. HEX와 RGB는 단순히 세 채널 각각의 밝기를 설명하는 두 가지 표기법입니다. 정확히 같은 색을 가리키므로, 좋은 변환기는 실제 색조를 바꾸지 않고 두 표기 체계 사이를 번역할 뿐입니다. 이 도구가 하는 일이 바로 그것이며, 브라우저 내에서 완전히 처리되면서 눈으로 직접 결과를 확인할 수 있는 실시간 색상 견본을 보여줍니다.

HEX 코드 읽는 방법

HEX 색상 코드는 #1E90FF처럼 생겼습니다. 해시 기호는 시작을 나타낼 뿐이고, 그 뒤의 여섯 문자가 #RRGGBB 패턴으로 이루어진 세 쌍입니다. 첫 번째 쌍은 빨간색, 두 번째는 녹색, 세 번째는 파란색입니다. 각 쌍은 16진수(즉 16진법)로 표현된 숫자로, 숫자는 0-9에 이어 A, B, C, D, E, F가 10부터 15를 나타냅니다. 한 쌍은 00(채널 완전히 꺼짐)부터 FF(완전히 켜짐)까지의 값을 가질 수 있습니다. 일반 10진수로는 0부터 255까지의 범위로, RGB가 사용하는 것과 같은 척도입니다. 채널당 256가지 수준으로, 6자리 형식은 16,777,216가지의 서로 다른 색을 표현할 수 있습니다.

양방향 변환, 예시로 살펴보기

HEX에서 RGB로 변환하려면, 코드를 세 쌍으로 나누고 각각을 16진수에서 일반 10진수로 변환합니다. #1E90FF를 예로 들겠습니다. 빨간색 쌍 1E는 1 곱하기 16에 14(E)를 더한 값으로, 30입니다. 녹색 쌍 90은 9 곱하기 16에 0을 더한 값으로, 144입니다. 파란색 쌍 FF는 15 곱하기 16에 15를 더한 값으로, 255입니다. 따라서 #1E90FF는 rgb(30, 144, 255)가 됩니다. 익숙한 닷지 블루입니다.

반대 방향도 같은 과정을 역으로 수행합니다. 각 RGB 숫자를 두 자리 16진수로 씁니다. 순수한 빨간색 rgb(255, 0, 0)은 FF, 00, 00을 주고, 이것이 합쳐져 #FF0000이 됩니다. 기억할 점은 값이 16 미만이어도 두 자리가 모두 필요하므로, 5는 5가 아닌 05로 씁니다. 변환기가 그 패딩을 자동으로 처리해주지만, 손으로 직접 할 때는 실수하기 쉽습니다.

각 형식이 사용되는 곳

HEX는 웹의 일상적인 언어입니다. CSS, HTML, 그리고 작성하는 대부분의 코드가 HEX 코드를 사용하는데, 간결하고 복사하기 쉽기 때문입니다. RGB는 디자인과 이미지 도구에서 자주 등장합니다. Figma, Photoshop, Sketch, Illustrator는 보통 0-255 범위의 슬라이더나 필드를 표시하며, 화면 녹화나 비디오 앱도 종종 RGB를 기대합니다. 따라서 스타일시트에서 HEX 코드를 가져와 디자인 패널에 입력하기 위한 RGB 형식이 필요하거나, 반대 방향으로 변환해야 하는 경우가 자주 생깁니다. 그 왕복 여정 때문에 변환기가 편리한 것입니다. 하나를 번역하는 것이 아니라 서로 맞는 색상 세트 전체를 만들어야 한다면, 컬러 팔레트 생성기가 더 나은 출발점이며, 이와 같은 더 많은 유틸리티는 개발자 도구에서 찾을 수 있습니다.

알파, 불투명도, HSL

두 표기법 모두 투명도를 추가하는 확장 형식이 있습니다. RGB는 rgba(30, 144, 255, 0.5)가 되며, 네 번째 값은 알파로, 0은 완전히 투명하고 1은 완전히 불투명합니다. HEX는 같은 목적으로 네 번째 쌍을 추가하여 8자리 #RRGGBBAA 코드를 만들며, 예를 들어 80은 약 50% 불투명도입니다. 일부 변환기는 HSL(색조, 채도, 밝기)도 제공하는데, 이는 사람이 색을 생각하는 방식으로 색을 설명합니다. 색조환에서 색조를 선택한 다음, 선명도와 밝기를 조절합니다. HSL은 다른 팔레트가 아닌 다른 사고 모델이므로, 세 개의 숫자를 개별적으로 조작하지 않고 색을 더 밝게 하거나 더 차분하게 만들고 싶을 때 더 직관적일 수 있습니다.

자주 묻는 질문