색상 코드 변환 — #3B82F6이 rgb(59, 130, 246)인 이유 - Tooly 가이드

2026. 08. 19

색상 코드 변환 — #3B82F6이 rgb(59, 130, 246)인 이유

HEX 여섯 자리는 빨강·초록·파랑을 16진수 두 자리씩 적어 둔 것입니다. 변환 규칙과 #FFF 같은 세 자리 축약형의 정확한 의미, 그리고 색만 바꿔 놓고 놓치기 쉬운 명도 대비 4.5:1 기준까지 정리했습니다.

디자이너에게 받은 색은 #3B82F6인데, 코드에서는 rgb(59, 130, 246)으로 적혀 있습니다. 둘은 같은 색입니다. 표기법만 다릅니다.

이 변환은 규칙이 단순해서 한 번 이해하면 도구 없이도 대충 읽을 수 있게 됩니다. 왜 여섯 자리인지, #FFF처럼 세 자리로 적은 건 무엇인지부터 정리합니다.

RGB ↔ HEX 변환기 바로 쓰기 →

여섯 자리는 세 덩어리입니다

화면의 색은 빨강(R)·초록(G)·파랑(B) 세 가지 빛의 세기를 섞어 만듭니다. 각 세기는 0부터 255까지 256단계입니다.

256단계를 16진수로 적으면 딱 두 자리가 됩니다. 16 × 16 = 256이기 때문입니다. 그래서 세 채널을 두 자리씩 이어 붙이면 여섯 자리가 나옵니다.

#3B82F6
 └┬┘└┬┘└┬┘
  R  G  B

3B → 3×16 + 11 = 59
82 → 8×16 + 2 = 130
F6 → 15×16 + 6 = 246

그래서 #3B82F6 = rgb(59, 130, 246)입니다.

16진수는 0~9 다음에 A~F를 씁니다. A=10, B=11, C=12, D=13, E=14, F=15입니다. FF가 15×16+15 = 255, 즉 그 채널의 최대값입니다.

HEX RGB 무슨 색
#FFFFFF rgb(255, 255, 255) 흰색 (세 채널 최대)
#000000 rgb(0, 0, 0) 검정 (세 채널 0)
#FF0000 rgb(255, 0, 0) 빨강
#808080 rgb(128, 128, 128) 회색 (세 채널 같은 값)

세 채널 값이 같으면 무채색(회색 계열)이 됩니다. #333, #666, #999가 자주 보이는 이유입니다.

#FFF는 왜 흰색인가 — 세 자리 축약

CSS에서 #FFF, #000, #3B8 같은 세 자리 표기를 봅니다. 규칙은 각 자리를 두 번 반복하는 것입니다.

  • #FFF → #FFFFFF
  • #ABC → #AABBCC
  • #3B8 → #33BB88

Tooly의 변환기도 이 규칙대로 처리합니다. #FFF를 넣으면 rgb(255, 255, 255)로 읽습니다.

주의할 점은 세 자리로는 모든 색을 적을 수 없다는 것입니다. 여섯 자리로 표현할 수 있는 색은 16⁶ = 16,777,216가지인데, 세 자리는 16³ = 4,096가지뿐입니다. #3B82F6처럼 두 자리가 서로 다른 색은 세 자리로 줄일 수 없습니다.

변환기 쓰는 법

양방향으로 동작합니다. 어느 쪽을 고치든 반대쪽이 따라옵니다.

  1. 변환기를 엽니다. 처음에는 흰색(#FFFFFF)으로 시작합니다.
  2. HEX → RGB: 위쪽 HEX 칸에 #3B82F6을 붙여넣습니다. R·G·B 칸이 59 / 130 / 246으로 바뀝니다.
  3. RGB → HEX: R·G·B 칸의 숫자를 고치면 HEX 값이 즉시 갱신됩니다.
  4. 미리보기 상자에 실제 색이 채워지므로 눈으로 확인할 수 있습니다.
  5. 복사 버튼으로 HEX 값을 클립보드에 담습니다.

동작을 확인해 두면 좋은 세 가지가 있습니다.

  • 0~255 밖의 숫자는 잘립니다. R에 300을 넣으면 255로, -20을 넣으면 0으로 바뀝니다.
  • 해석할 수 없는 HEX를 넣으면 검정(#000000)으로 되돌아갑니다. 오타가 나면 색이 사라진 것처럼 보이는데, 고장이 아니라 이 규칙 때문입니다.
  • # 기호는 있어도 없어도 인식합니다.

색만 맞춰 놓고 놓치기 쉬운 것 — 명도 대비

색상 코드를 정확히 옮겨도 화면에서 글자가 안 읽히는 일이 있습니다. 배경과 글자의 명도 대비가 부족한 경우입니다.

한국인터넷진흥원은 웹 접근성 안내에서 "모든 텍스트의 명도대비는 4.5 : 1 이상을 유지하여 제공"하라고 밝히고 있습니다. 근거는 한국형 웹 콘텐츠 접근성 지침(KWCAG)입니다. 공공기관 사이트나 접근성 인증을 준비하는 서비스라면 지켜야 하는 기준입니다.

여기서 헷갈리기 쉬운 지점이 있습니다. 명도 대비는 색상 코드를 눈으로 봐서는 알 수 없습니다. #777777 위에 #888888을 얹으면 숫자는 한 칸 차이지만 사람 눈에는 거의 구분되지 않습니다. 반대로 노랑과 검정처럼 코드가 크게 달라 보이는 조합이 대비는 아주 높습니다.

대비 값은 두 색의 상대 휘도를 각각 구한 뒤 (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05)로 계산합니다. 채널별로 감마 보정이 들어가기 때문에 R·G·B를 단순 평균 내는 것과는 다릅니다.

이 변환기는 코드를 바꿔 주는 도구이지 대비를 계산해 주지는 않습니다. 배경색과 글자색 후보를 이 도구로 정리한 다음, 대비 검사는 별도 도구나 브라우저 개발자 도구로 확인하는 순서가 안전합니다.

자주 하는 실수

투명도를 여섯 자리에 넣으려는 경우
#3B82F6에는 투명도가 없습니다. CSS에서는 여덟 자리(#3B82F680)나 rgba(59, 130, 246, 0.5)로 따로 적습니다. 이 변환기는 여섯 자리 기준이라, 여덟 자리를 넣으면 앞 여섯 자리만 읽습니다.

인쇄물 색을 그대로 가져오는 경우
인쇄물은 일반적으로 CMYK를 씁니다. RGB는 빛을 더해 밝아지는 방식이고 CMYK는 잉크를 더해 어두워지는 방식이라, 같은 숫자로 옮겨 적을 수 없습니다. 화면에서 선명하던 색이 인쇄물에서 탁해 보이는 일이 여기서 생깁니다.

대문자·소문자를 다르게 취급하는 경우
#3b82f6과 #3B82F6은 같은 색입니다. 표기만 다릅니다.

자주 묻는 질문

RGB와 HEX 중 어느 쪽을 써야 하나요?
결과는 같습니다. CSS에서는 HEX가 짧아 자주 쓰이고, 투명도를 함께 다루거나 색을 계산해서 만들 때는 rgb()·rgba()가 편합니다.

#FFF와 #FFFFFF는 정말 같은 색인가요?
같습니다. 세 자리 표기는 각 자리를 두 번 반복한 것으로 해석됩니다.

색상 코드만 알면 브랜드 색을 똑같이 재현할 수 있나요?
화면에서는 대체로 그렇습니다. 다만 모니터 보정 상태와 색 프로파일에 따라 보이는 색은 조금씩 달라집니다. 인쇄까지 가면 CMYK 변환이 따로 필요합니다.

R·G·B에 소수점을 넣으면 어떻게 되나요?
채널 값은 0~255의 정수 단계입니다. 소수를 넣어야 할 만큼 미세한 조정이 필요하다면 색상 자체를 다시 고르는 편이 낫습니다.

함께 보면 좋은 것

색을 정한 다음 이미지로 내보낼 때는 포맷 선택이 따라옵니다. 로고나 아이콘처럼 색이 단순한 이미지는 JPG를 PNG로 바꾸는 기준을 먼저 보면 도움이 됩니다. 사진 파일이 무거워 화면 로딩이 느리다면 이미지 압축으로 용량을 줄일 수 있습니다.

RGB ↔ HEX 변환기 열어 보기 →

이 글은 2026년 8월 19일 기준으로 작성했습니다. 명도 대비 기준은 한국인터넷진흥원 웹 접근성 안내 문구를 인용했으며, 인증 심사 기준은 지침 개정에 따라 달라질 수 있습니다.

목록