색상 코드 변환기

HEX 색상 코드와 RGB 값을 서로 변환합니다.

HEX

rgb(94, 234, 212)

HEX와 RGB, 웹 디자인에서 색상 표현하는 두 방식

HEX는 색상을 16진수 6자리(#RRGGBB)로, RGB는 빨강·초록·파랑 값을 0~255 숫자로 표현해요. 결국 같은 색을 다른 방식으로 적은 것뿐이라, 디자인 툴과 코드 사이를 오갈 때 서로 변환이 필요합니다.

예시: 순수 검정은 HEX로 #000000, RGB로는 (0, 0, 0)입니다.

#fff처럼 세 자리로 넣으면 각 글자를 두 번씩 반복해 #ffffff로 바꾼 뒤 계산합니다. 여섯 자리 코드는 앞에서부터 두 자리씩 잘라 빨강, 초록, 파랑 값으로 읽습니다. 대문자와 소문자를 섞어 넣어도 결과는 같습니다.

입력칸은 HEX 하나뿐이고 rgb 값은 결과로만 나옵니다. rgb 숫자를 넣어 HEX를 얻는 반대 방향은 이 페이지에서 지원하지 않습니다. 투명도가 붙은 여덟 자리 코드를 넣으면 앞 여섯 자리만 읽고 뒤 두 자리는 버립니다.

HEX가 뭔가요?

웹에서 색을 16진수로 적는 방식입니다. #RRGGBB 여섯 자리로, 두 자리씩 빨강·초록·파랑의 세기를 00부터 ff까지 나타내며 이는 십진수 0부터 255에 해당합니다.

3자리 HEX도 되나요?

예, #fff처럼 3자리로 입력해도 자동 변환됩니다.

값을 잘못 넣으면 어떻게 되나요?

결과가 갱신되지 않고 직전 값이 그대로 남습니다. 16진수로 읽을 수 없는 글자가 섞이면 계산을 건너뛰기 때문에, 미리보기 색과 코드가 맞지 않으면 입력을 다시 확인합니다.

rgb 값을 HEX로 되돌릴 수 있나요?

이 도구로는 안 됩니다. 입력칸이 HEX 하나라 HEX에서 rgb 방향으로만 계산합니다. 반대로 바꾸려면 세 숫자를 각각 16진수 두 자리로 적어 이어 붙여야 합니다.

복사한 값을 CSS에 바로 쓸 수 있나요?

쓸 수 있습니다. 결과가 rgb(94, 234, 212)처럼 CSS 표기 그대로 나오므로 color나 background 속성값에 붙여 넣으면 되고, RGB 복사 버튼을 쓰면 괄호까지 함께 복사됩니다.

미리보기 상자는 무엇을 보여주나요?

입력한 코드를 그대로 배경색으로 칠한 상자입니다. 숫자만으로는 색을 가늠하기 어려우므로, 코드를 고칠 때마다 색이 어떻게 달라지는지 눈으로 확인할 수 있습니다.