RGB-HEX 색상 변환기

RGB와 HEX 색상 시스템

RGB (빨강, 초록, 파랑)과 HEX (16진수)는 같은 색상을 나타내는 두 가지 방법입니다. 단, 표기 방식만 다릅니다. 두 가지 색상 모델 모두는 빨강, 초록, 파랑의 세 가지 기본 색상을 다르게 강도에 따라 혼합하여 색상을 표현합니다. 웹 디자인, CSS, 그래픽 디자인, 사진 편집, 디지털 아트와 같은 분야에서 두 가지 시스템을 이해하는 것은 필수적입니다.

RGB 모델에서, 각 채널 (빨강, 초록, 파랑)은 0에서 255까지의 강도 값을 가집니다. 0은 해당 색상이 없으며, 255는 최대 강도를 나타냅니다. 모든 세 채널이 255로 설정하면 흰색 (rgb(255,255,255))이 되고, 모든 채널이 0으로 설정하면 검은색 (rgb(0,0,0))이 됩니다. 256개의 가능성 있는 값이 있는 3개의 채널과 256³ = 16,777,216개의 고유한 색상 (약 16.7백만)을 표현할 수 있습니다.

HEX 모델에서, 같은 세 채널은 각 2자리 16진수 숫자 (00에서 FF)로 표현됩니다. 16진수는 0에서 9까지의 숫자와 A에서 F까지의 문자를 사용하며, A=10, B=11, C=12, D=13, E=14, F=15입니다. 16진수 FF는 15×16 + 15 = 255를 나타냅니다. 따라서 #FFFFFF = rgb(255,255,255) = 흰색입니다. 변환은 단순히 10진수 (10진수)에서 16진수 (16진수)로의 변환입니다.

RGB를 HEX로 변환하는 방법: 단계별

각 RGB 채널을 HEX로 변환하려면, 채널 값을 16으로 나누고, 나머지를 2자리 16진수 숫자로 변환합니다.

1. 채널 값 (0-255)을 취합니다.
2. 16으로 나눕니다: 몫 = 첫 번째 16진수 자리, 나머지 = 두 번째 16진수 자리
3. 10-15 (A-F) 사이의 값이면 두 자리 16진수 숫자로 변환합니다.
4. 첫 번째 자리 + 두 번째 자리 = 2자리 16진수 값
5. G와 B 채널에 대해 반복합니다.
6. #: + R_16 + G_16 + B_16

예: rgb(255, 99, 71)에서 HEX (토마토 빨간색)를 변환합니다.

• R=255: 255÷16=15 나머지 15 → F + F → FF
• G=99: 99÷16=6 나머지 3 → 6 + 3 → 63
• B=71: 71÷16=4 나머지 7 → 4 + 7 → 47
• 결과: #FF6347

웹에서 사용하는 일반적인 색상: RGB와 HEX 참조

웹에서 가장 일반적으로 사용되는 색상에 대한 포괄적인 참조 표입니다.

RGB와 HEX를 사용하는 CSS와 웹 디자인

CSS는 여러 색상 형식을 지원합니다. HEX와 RGB는 가장 일반적이지만, 현대 CSS는 더 넓은 색상 범위의 디스플레이를 위한 oklch 및 oklch 색상 공간과 함께 이름 색상 및 HSL을 지원합니다.

CSS에서 색상을 지정할 수 있습니다.

• 색상: #FF6347; (HEX)
• 색상: rgb(255, 99, 71); (RGB)
• 색상: rgba(255, 99, 71, 0.5); (RGB + 알파 투명도, 0=투명, 1=불투명)
• 색상: hsl(9, 100%, 64%); (색상, 채도, 명도)
• 색상: tomato; (CSS 이름 색상)

HEX 코드는 각 쌍이 반복되는 경우 3자리 짧은 형식으로 작성할 수 있습니다: #FF0000 = #F00, #FFFFFF = #FFF, #336699는 단축할 수 없습니다. 단축은 모든 브라우저에서 지원되는 타이핑 시간을 절약합니다.

디자인 일관성을 위해, 현대 디자인 시스템 (Material Design, Tailwind CSS, Bootstrap)은 HEX 코드로 지정된 색상 팔레트를 사용합니다. Tailwind CSS는 예를 들어, 10가지 중립색 (gray-100부터 gray-900)으로 구성된 22가지 색상 패밀리를 제공하며, 모든 색상은 구성 파일에서 HEX 코드로 지정됩니다.

RGBA와 알파 투명도

RGBA는 RGB에 알파 채널을 추가합니다. 알파 채널은 투명도를 제어합니다. 알파 값은 0 (완전히 투명, 보이지 않음)에서 1 (완전히 불투명, 투명도 없음)까지 범위에 있습니다. 분수 값은 반투명한 색상을 생성합니다.

예시: rgba(0, 0, 0, 0.5)는 반투명한 검은색 (투명한 오버레이와 같습니다). rgba(255, 255, 255, 0.8)는 80% 불투명한 흰색입니다. 이 기능은 오버레이 효과, 유리 같은 UI 요소 및 마우스 오버 상태 강조에 널리 사용됩니다.

최신 CSS에서는 HEX에 알파도 있습니다: 8자리 HEX 코드에서 마지막 2자리는 알파를 지정합니다. #FF6347CC는 80% 투명한 토마토입니다 (HEX에서 CC는 204, 204/255 ≈ 0.8). 이 형식은 CSS Color Level 4 사양에서 소개되었으며 모든 현대 브라우저에서 지원됩니다.

RGBA와 HEX는 인간에게 더 쉬운 형식입니다: rgba(255, 99, 71, 0.8) vs #FF6347CC. 사용하는 형식은 개인의 선호도와 도구에 따라 달라집니다 - 디자인 도구 (Figma)에서는 HEX를 표시하고 내보냅니다. 반면 CSS 전처서 (Sass, Less)는 RGBA를 읽기 쉽게 사용합니다.

디자이너를 위한 색상 이론의 기초

RGB 색상 모델을 이해하는 것은 색상 이론을 이해하는 것과 함께 가깝습니다. RGB는 적색 모델입니다 - 색상을 추가하여 생성합니다. R+G+B를 최대 강도로 혼합하면 흰색 (모든 빛)이 됩니다. 이는 색상 (pigment/인쇄)에서 뺄셈 색상 (모두의 색상 = 검정)과 반대입니다.

상보 색상은 RGB에서 색상轮에 반대에 위치합니다. 빨간색 (FF0000)과 시안색 (00FFFF)은 상보 색상입니다 - 시안색의 RGB는 빨간색의 비트WISE 반대입니다 (0,255,255 vs 255,0,0). 유사하게, 파란색과 노란색, 녹색과 분홍색. 상보 색상은 서로 옆에 놓여있을 때 최대 대조와 시각적 진동을 생성합니다.

색상 조화는 함께 작동하는 색상을 선택하는 지침을 제공합니다: 인접한 색상 (인접한 색상轮), 삼각 색상 (균등하게 분포한 세 가지 색상), 분할 상보 색상, 및 사각 색상 (네 가지 색상이 사각형을 형성합니다). 이러한 관계는 디자이너가 의도적이고 시각적으로 균형 잡힌 색상 팔레트를 만들 수 있도록 도와줍니다.

접근성 및 대조: WCAG (웹 콘텐츠 접근성 지침)은 텍스트와 배경 간의 최소 대조비를 요구합니다: 일반 텍스트는 4.5:1, 대형 텍스트는 3:1. 대조비는 RGB 값의 상대 명암에서 계산됩니다. 많은 온라인 도구는 WCAG 준수 여부를 확인합니다 - 이는 저시력 또는 색맹 사용자에게 중요합니다.

RGB를 넘어가는 색상 공간: HSL, HSB, CMYK

RGB는 색상을 선택하는 데 항상 가장 직관적인 시스템이 아닙니다. 다른 색상 공간은 다양한 사용 사례에 더 유용할 수 있습니다:

HSL은 디자이너에게 특히 유용합니다: 색상은 0°=빨간색, 120°=녹색, 240°=파란색을 선택합니다. 채도는 얼마나 두드러지게 색상을 선택하는지 제어합니다 (0%는 회색, 100%는 순수한 색상). 명도는 밝기를 제어합니다 (0%는 검정, 50%는 순수한 색상, 100%는 흰색). 명도만 조정하여 색상과 채도를 유지하면 일관된 색상 스케일을 생성합니다 - 브랜드 색상에 대한 호버 상태, 비활성 상태 및 톈/그레이드에 유용합니다.