HEX에서 RGB 색상 변환 방법: 디자이너와 개발자 가이드

컬러 모델은 색상을 디지털로 표현하는 수학적 시스템입니다. 웹 개발, 그래픽 디자인, 브랜딩 등 시각적 분야에서 일한다면 최소 세 가지 모델을 이해해야 합니다: HEX, RGB, HSL. 각각 상황에 따라 장점이 다릅니다.

현대 CSS는 세 가지 형식을 모두 지원합니다. 같은 빨간색을 이렇게 쓸 수 있습니다:

• HEX: #FF0000
• RGB: rgb(255, 0, 0)
• HSL: hsl(0, 100%, 50%)

세 가지 모두 정확히 같은 색상을 만들지만, 용도가 다릅니다. HEX는 CSS에서 간결합니다. RGB는 빛의 혼합을 생각할 때 직관적입니다. HSL은 색조를 바꾸지 않고 밝기나 채도를 조절할 때 이상적입니다.

NexTools 색상 변환기로 모든 형식 간 즉시 변환하고 실시간 미리보기를 확인할 수 있습니다.

HEX(16진수) 형식은 # 기호와 6자리 16진수(0-9, A-F)로 색상을 표현합니다. 숫자는 쌍으로 그룹화됩니다: 처음 두 자리는 빨강, 다음 두 자리는 초록, 마지막 두 자리는 파랑.

구조: #RRGGBB

각 쌍은 00(10진수 0, 해당 색상 없음)에서 FF(10진수 255, 최대 강도)까지:

HEX 약어: 각 쌍의 숫자가 같으면 줄일 수 있음: #FF0000 = #F00. 하지만 #A1B2C3은 줄일 수 없음.

투명도가 있는 HEX: 알파(불투명도)용 2자리 추가: #FF000080은 50% 불투명도의 빨강.

RGB 모델은 가산 혼합에 기반합니다. 각 성분은 0에서 255까지이며, 혼합하면 1,677만 개의 색상이 생성됩니다.

CSS에서: rgb(빨강, 초록, 파랑)

실용 예시:

• rgb(255, 165, 0) = 주황
• rgb(128, 0, 128) = 보라
• rgb(0, 128, 128) = 청록

투명도 포함(RGBA): rgba(255, 0, 0, 0.5) = 50% 불투명도의 빨강.

HEX→RGB 변환: 각 16진수 쌍을 10진수로 변환. #3A7BF2: 3A=58, 7B=123, F2=242. 결과: rgb(58, 123, 242).

RGB→HEX 변환: 각 10진값을 2자리 16진수로 변환. rgb(58, 123, 242): 58=3A, 123=7B, 242=F2. 결과: #3A7BF2.

HSL 모델은 색상을 이해하기 쉬운 세 차원으로 나눕니다:

• Hue(색조): 기본 색상, 0~360도. 0°/360°=빨강, 120°=초록, 240°=파랑.
• Saturation(채도): 색의 "선명함", 0%(회색)~100%(순색).
• Lightness(밝기): 밝고 어둡기, 0%(검정)~100%(흰색). 50%가 순색.

HSL의 장점: 파란 버튼 hsl(220, 80%, 50%)의 호버 시 더 밝은 버전을 원한다면, 밝기만 높이면 됩니다: hsl(220, 80%, 60%).

팔레트 생성기로 색상 조합을 실험해 보세요.

웹 디자인에서 가장 자주 볼 수 있는 색상과 그 변환값:

색상 선택기로 모든 웹사이트의 정확한 색상을 찾으세요.

RGB와 HEX가 화면용(빛)이라면, CMYK(시안, 마젠타, 옐로, 블랙)는 인쇄용(잉크) 모델입니다.

인쇄 시 색상이 다르게 보이는 이유: 화면은 빛을 발하고(RGB), 종이는 빛을 반사합니다(CMYK). CMYK의 색역이 RGB보다 작아 화면의 일부 선명한 색상은 종이에서 정확히 재현할 수 없습니다.

• 일렉트릭 블루와 네온 그린은 CMYK에서 선명도가 떨어짐
• 빨간색과 주황색은 대체로 잘 유지됨
• CMYK의 순수 검정은 C:75 M:68 Y:67 K:90("리치 블랙"이라 불림)

색상 선택은 미적 감각만의 문제가 아닙니다. WCAG 2.1 가이드라인은 텍스트와 배경 사이의 최소 대비 비율을 규정합니다:

• AA(최소): 일반 텍스트 4.5:1, 큰 텍스트 3:1
• AAA(최적): 일반 텍스트 7:1, 큰 텍스트 4.5:1

대비 검사 도구로 항상 색상 조합의 대비를 확인하세요.

사실: 남성의 약 8%, 여성의 약 0.5%가 어떤 형태의 색각 이상을 가지고 있습니다. 중요한 정보를 전달할 때 색상에만 의존하지 마세요.

모던 웹 개발에서 색상은 테마와 다크 모드를 위해 CSS 커스텀 프로퍼티(CSS 변수)로 관리됩니다:

:root {
  --color-primary: #C75B39;
  --color-background: #FFFFFF;
  --color-text: #1A1A1A;
}
.dark {
  --color-primary: #E8956E;
  --color-background: #1A1A1A;
  --color-text: #F5F5F5;
}

이 방식으로 사이트 전체 팔레트를 변경하려면 변수만 수정하면 됩니다.

팁: 다크 테마를 만들 때 색상을 단순히 반전시키지 마세요. 채도를 약간 낮추고 순수 검정 대신 따뜻한 회색을 사용하세요(#000000 대신 #1A1A1A).

그라디언트 생성기로 테마용 커스텀 CSS 그라디언트를 만드세요.