HEX와 RGB 색상 변환 원리
웹 화면의 색은 빨강(Red), 초록(Green), 파랑(Blue) 빛의 강도를 조합해 표현할 수 있습니다. RGB의 각 채널은 보통 0부터 255까지의 정수를 사용합니다. 예를 들어 rgb(255, 0, 0)은 빨강이 최대이고 나머지 두 채널이 0인 순수한 빨간색입니다. 세 채널이 모두 0이면 검정, 모두 255이면 흰색이 됩니다. 이 색상 도구는 입력한 RGB 숫자를 확인한 뒤 각 값을 두 자리 16진수로 바꾸고 차례대로 이어 HEX 코드로 표시합니다. 반대로 HEX는 두 자리씩 끊어 16진수를 10진수로 읽어 RGB 값을 계산합니다.
HEX 색상은 #RRGGBB 구조입니다. 16진수 한 자리는 0부터 9와 A부터 F를 사용하므로 한 채널의 00은 0, FF는 255를 뜻합니다. #2F7D68이라면 2F는 빨강 47, 7D는 초록 125, 68은 파랑 104가 됩니다. #0F8 같은 세 자리 축약형은 각 글자를 두 번 반복한 #00FF88과 같습니다. 이 도구는 3자리 입력을 6자리 대문자 형식으로 정규화해 복사하기 쉽게 보여 줍니다. 투명도를 포함한 4자리 또는 8자리 HEX는 현재 지원하지 않으므로 알파 값은 CSS에서 별도로 지정해야 합니다.
색상 선택기는 브라우저와 운영체제가 제공하는 기본 인터페이스를 사용합니다. 마우스, 트랙패드, 터치 또는 키보드로 색을 고르면 HEX와 RGB 입력칸이 즉시 같은 색으로 바뀝니다. 반대로 유효한 HEX 값을 입력하거나 RGB 세 채널을 모두 입력해도 선택기 값이 동기화됩니다. 실제 선택창의 모양, 스포이트 제공 여부와 색 영역은 기기마다 다를 수 있습니다. 또한 모니터 색상 프로필, 밝기, 주변 조명에 따라 같은 코드가 다르게 보일 수 있으며 인쇄물의 CMYK 색상과도 정확히 일치하지 않습니다.
결과에는 HSL 참고값과 검정·흰색 글자 대비비도 함께 표시합니다. HSL은 색상각(Hue), 채도(Saturation), 명도(Lightness)로 같은 색을 표현하는 방식이며 CSS 작성이나 색상 변형에 편리합니다. 대비비는 WCAG에서 사용하는 상대 휘도 계산식을 적용한 참고값입니다. 일반적인 본문 텍스트는 보통 4.5:1 이상, 큰 글자는 3:1 이상을 목표로 하지만 글꼴 두께와 크기, UI 상태 등 다른 조건도 함께 검토해야 합니다. 이 도구가 더 높은 대비의 검정 또는 흰색을 안내하더라도 최종 디자인은 실제 페이지 전체에서 접근성 검사를 진행하세요.
선택한 마지막 색상은 다음 방문 때 이어서 사용할 수 있도록 현재 브라우저의 localStorage에 사용자 설정으로만 저장됩니다. 계정이나 서버와 동기화되지 않으며 브라우저 데이터를 지우면 함께 삭제됩니다. 변환 계산에는 외부 API나 외부 색상 라이브러리를 사용하지 않습니다. 따라서 네트워크 연결이 느린 환경에서도 페이지가 이미 열려 있다면 색상 코드를 즉시 바꿀 수 있습니다.
색상 도구 사용 방법
HEX를 RGB로 변환
#을 포함한 3자리 또는 6자리 HEX 코드를 입력하고 변환 버튼을 누릅니다. 잘못된 문자나 자리 수가 있으면 입력칸 가까이에 오류 설명이 표시됩니다.
RGB를 HEX로 변환
R, G, B에 각각 0~255 정수를 입력합니다. 어느 RGB 칸을 마지막으로 수정했는지 확인해 그 값을 기준으로 HEX 코드와 미리보기를 갱신합니다.
색상 선택기로 고르기
색상 영역을 누르고 원하는 색을 고르면 모든 코드가 자동으로 맞춰집니다. 변환 후 복사 버튼을 누르면 HEX, RGB, HSL과 대비값을 한 번에 복사합니다.
구체적인 상황으로 이해하는 활용 예시
다음 세 상황은 도구의 처리 과정과 결과 해석을 설명하기 위한 가상 예시입니다. 입력 조건을 바꾸면 결과도 달라지므로 자신의 조건과 비교해 확인하세요.
1. 브랜드 초록색의 RGB 확인
#2F7D68을 입력하면 2F는 47, 7D는 125, 68은 104이므로 RGB 47·125·104가 됩니다. 코드 형식을 바꿔도 같은 sRGB 색을 표현합니다. 웹 문서에서는 속성에 맞는 형식으로 넣고 실제 배경과 글자 조합의 대비를 별도로 확인해야 합니다.
2. 검정과 흰색의 대비를 비교
검정 #000000과 흰색 #FFFFFF의 상대 휘도는 각각 0과 1입니다. 대비 계산은 (1 + 0.05) ÷ (0 + 0.05)로 21:1입니다. 이 수치는 색 조합의 대비를 뜻하며 작은 글씨 크기, 글꼴, 흐린 화면과 이미지 배경 등 다른 가독성 요소를 자동 해결하는 것은 아닙니다.
3. 같은 색을 배경과 글자에 지정
배경과 글자를 모두 #808080으로 지정하면 두 휘도가 같아 대비비는 1:1입니다. 화면에서 글자가 보이지 않는 이유를 수치로 확인하는 사례입니다. 색이 서로 다르더라도 휘도가 비슷하면 대비가 낮을 수 있으므로 색상 이름이나 채도만 보고 읽기 쉬울 것이라고 판단하지 마세요.