RGB⇄16진수(HEX) 색상 코드 변환 도구｜무료・가입 불필요
RGB 값이나 16진수(HEX) 색상 코드를 입력하면 즉시 반대 방향으로 변환됩니다. "RGB를 16진수로 변환"과 "16진수를 RGB로 변환" 양쪽 모두 지원하며, 변환 결과를 CSS나 디자인 툴에 바로 붙여넣을 수 있습니다. 무료로 가입 없이 이용 가능합니다.
10진수 (Base 10)
| R | |
|---|---|
| G | |
| B |
16진수 (Base 16)
| # |
|---|
RGB와 16진수 컬러 코드의 관계
화면상의 색은 빨강·초록·파랑 세 가지 빛을 얼마나 섞느냐로 정해집니다. 각각의 세기를 0부터 255까지의 수치로 나타낸 것이 RGB 형식이고, 같은 값을 16진수 두 자리씩으로 고쳐 늘어놓은 것이 #RRGGBB라는 16진수 컬러 코드입니다. 즉 양자는 같은 색을 다른 표기로 나타내고 있을 뿐이며, 이 도구는 그 상호 변환을 수행합니다.
왜 두 가지 표기가 있는가 하면 용도가 다르기 때문입니다. 16진수는 여섯 글자로 색을 나타낼 수 있어 CSS나 디자인 도구에서 주고받기에 적합합니다. 한편 RGB는 각 성분의 수치가 직접 보이기 때문에 빨강을 조금 강하게 하는 것 같은 조정이 하기 쉬워집니다. 작업에 따라 가려 쓸 수 있도록 양쪽 형식을 모두 확인할 수 있게 하고 있습니다.
컬러 코드 변환 사용 방법
- 변환하고 싶은 값을 입력합니다 10진수 칸에 R·G·B의 값을 넣거나, 16진수 칸에 컬러 코드를 입력합니다. 어느 쪽에서도 변환할 수 있습니다.
- 다른 쪽 형식을 확인합니다 입력과 동시에 대응하는 값이 표시됩니다. 그대로 복사해 CSS나 디자인 도구에 붙여 넣을 수 있습니다.
- 값을 조정해 색을 시험합니다 10진수 쪽의 수치를 올리고 내리면 색의 변화를 알기 쉬워집니다. 노린 색에 가까워지게 하면서 확인할 수 있습니다.
더 잘 활용하기 위한 팁
- CSS에서는
#RRGGBB형식과rgb(R, G, B)형식 모두로 색상을 지정할 수 있습니다. - R(빨강)·G(초록)·B(파랑) 각 채널의 값은 0〜255（16진수로 00〜FF）입니다.
- 흰색은
#FFFFFF（255, 255, 255）, 검정은#000000（0, 0, 0）입니다. - Figma·Adobe XD 등의 디자인 툴은 두 형식 모두 지원하므로 값을 복사하는 것만으로 변환을 적용할 수 있습니다.
- 단축형
#FFF는#FFFFFF（흰색）의 약기로, CSS에서 유효한 표기 중 하나입니다.
컬러 코드 변환의 활용 상황
디자인에서 코딩으로 넘기기
디자인 도구가 RGB로 표시하고 있는 색을, CSS에서 쓰는 16진수 형식으로 고칠 수 있습니다. 수작업에 의한 변환 실수를 막을 수 있습니다.
브랜드 컬러를 정확히 재현하기
지정된 색이 한쪽 형식으로만 손에 있는 경우에, 다른 쪽으로 변환해 통일할 수 있습니다. 자료와 웹에서 색이 어긋나는 것을 막을 수 있습니다.
색을 조금씩 조정하기
16진수 그대로는 가감의 짐작이 서지 않는 조정도, RGB의 수치로 고치면 직관적으로 할 수 있습니다. 밝기나 색감의 미세 조정에 적합합니다.
기존 사이트의 배색을 알아보기
개발자 도구에서 주운 컬러 코드를 변환하면, 각 색 성분의 세기를 수치로 파악할 수 있습니다.
컬러 코드의 용어
- RGB
- 빨강·초록·파랑 빛의 세기로 색을 나타내는 방식입니다. 각각 0부터 255까지의 값을 가지며, 세 가지 모두가 255면 흰색이 됩니다.
- 16진수
- 0부터 F까지 16종류로 수를 나타내는 기법입니다. 0부터 255까지를 꼭 두 자리로 나타낼 수 있어 컬러 코드에 쓰이고 있습니다.
- 축약 표기
#FFF처럼 세 자리로 줄인 표기법입니다. 각 성분의 두 자리가 같은 문자일 때만 쓸 수 있습니다.- 24비트 컬러
- 각 성분에 8비트씩 할당하는 방식입니다. 합계로 약 1,677만 색을 표현할 수 있습니다.
- 채널
- 색을 구성하는 개개의 성분을 말합니다. RGB에서는 빨강·초록·파랑이 각각 하나의 채널에 해당합니다.
자주 묻는 질문
#FFFFFF와 #ffffff는 CSS에서 동일한 색상으로 처리됩니다.#AABBCC → #ABC）. #1DA1F2 같은 값은 단축할 수 없습니다.
여담 ― 색의 신비 ― 인간의 눈과 1677만 색의 세계
인간의 눈이 식별할 수 있는 색의 수는 약 1,000만 색이라고 알려져 있습니다（개인차 있음）. RGB 24비트 컬러（각 채널 8비트）는 16,777,216색（약 1,677만 색）을 표현할 수 있으며, 이는 인간의 식별 능력을 훨씬 뛰어넘는 색수입니다.
유명 브랜드 색상을 RGB로 나타내면: 트위터 블루 #1DA1F2（29, 161, 242）, 구글 레드 #EA4335（234, 67, 53）, LINE 그린 #00B900（0, 185, 0）등입니다. 티파니의 아이코닉한 블루 「Tiffany Blue」는 #0ABAB5에 가까운 색으로, 상표 등록된 색 중 하나입니다.
흥미로운 이야기로, CSS에 「rebeccapurple（#663399）」라는 색 이름이 존재합니다. 이는 CSS 사양 책정자 Eric Meyer의 딸 Rebecca（향년 6세）를 추모하기 위해 CSS 커뮤니티가 제안하여 2014년 정식 채택된 것입니다. 엔지니어 커뮤니티에 깊이 새겨진 에피소드로 지금도 전해지고 있습니다.