HEX 색상 코드를 RGB로 변환하는 방법
HEX와 RGB는 정확히 동일한 색상을 작성하는 두 가지 방법입니다. 디자이너와 개발자는 둘 사이를 끊임없이 오갑니다 — CSS 시트의 HEX, JavaScript 애니메이션의 RGB, 디자인 도구의 HSL. 이들의 관계를 이해하면 색상 작업이 훨씬 단순해집니다.
HEX가 작동하는 방식
#FF5733과 같은 HEX 색상 코드는 빨강, 녹색 및 파랑 채널을 나타내는 6자리 16진수입니다:
| 부분 | 16진수 | 10진수 | 채널 |
|---|---|---|---|
| FF | FF | 255 | 빨강 |
| 57 | 57 | 87 | 녹색 |
| 33 | 33 | 51 | 파랑 |
각 채널은 00(0, 색상 없음)에서 FF(255, 최대 강도)까지 범위입니다. 따라서 #FF5733은 강한 빨강, 적당한 녹색, 약간의 파랑을 의미합니다 — 따뜻한 주황빛 빨강이 됩니다.
HEX를 RGB로 변환하는 방법
- HEX 코드 입력 — #FF5733과 같은 코드를 입력하거나 붙여넣거나 색상 선택기를 사용하세요.
- RGB 값 확인 — 빨강, 녹색 및 파랑(각각 0-255)의 동등물을 확인하세요.
- 모든 형식으로 복사 —
rgb(255, 87, 51), 개별 채널 또는 HSL과 같은 다른 형식으로 값을 가져오세요.
일반적인 색상 코드
| 색상 | HEX | RGB |
|---|---|---|
| 흰색 | #FFFFFF | rgb(255, 255, 255) |
| 검은색 | #000000 | rgb(0, 0, 0) |
| 빨강 | #FF0000 | rgb(255, 0, 0) |
| 녹색 | #00FF00 | rgb(0, 255, 0) |
| 파랑 | #0000FF | rgb(0, 0, 255) |
| 노랑 | #FFFF00 | rgb(255, 255, 0) |
팁
- CSS에서 HEX 사용 —
color: #FF5733은 스타일시트에서color: rgb(255, 87, 51)보다 더 깔끔하고 일반적입니다. - 투명도에 RGB 사용 — 반투명 색상이 필요할 때
rgba(255, 87, 51, 0.5)를 사용하세요. 표준 HEX에 알파를 추가하는 방법은 없습니다(8자리 HEX가 존재하지만 브라우저 지원이 다양함). - 3자리 단축 —
#F00은#FF0000과 동등합니다. 각 쌍이 동일한 숫자를 가질 때 공간을 절약하기 위해 사용하세요. - 색상 선택기가 더 빠름 — 올바른 색상을 찾고 있다면 HEX 값을 추측하는 대신 시각적 선택기를 사용하세요. 만족하면 코드를 복사하세요.
자주 묻는 질문
HEX를 RGB로 수동으로 어떻게 변환합니까?
16진수 코드를 세 쌍으로 자르세요(예: #FF8800은 FF, 88, 00이 됨). 각 쌍을 16진수에서 10진수로 변환하세요. FF = 255, 88 = 136, 00 = 0. 결과는 rgb(255, 136, 0)입니다.
3자리 HEX 코드는 어떻습니까?
3자리 HEX는 각 숫자가 두 배가 되는 단축형입니다. #F80은 #FF8800과 동등합니다. 대부분의 변환기는 두 형식을 자동으로 처리합니다.
HEX 또는 RGB를 언제 사용해야 합니까?
HEX는 더 컴팩트하고 CSS에서 더 일반적입니다. RGB는 코드에서 채널을 개별적으로 조작하거나 투명도를 위해 rgba()를 사용해야 할 때 더 좋습니다. 둘 다 동일한 색상을 나타냅니다.
HEX 코드의 # 기호는 무엇을 나타냅니까?
샵(#)은 값이 16진수 색상 코드임을 나타내는 접두사입니다. 값 자체의 일부가 아닙니다. 일부 도구는 샵이 있거나 없는 코드를 받아들입니다.