RGB 색상 코드 이해 - 16진수부터 실전 활용까지 완벽 정리
빨강 초록 파랑 세 숫자로 1670만 가지 색이 만들어지는 원리부터 헥스 코드 읽는 법, 방송 오버레이와 웹 디자인에 바로 쓰는 실전 활용법까지 정리합니다.
방송 오버레이를 만들거나 채널 배너를 디자인하다 보면 #FF5733 같은 알 수 없는 코드를 입력하라는 칸을 마주합니다. 디자인 프로그램에서 마음에 드는 색을 골랐는데, OBS나 다른 도구에 옮기려니 숫자로 적어야 합니다. 이때 RGB 색상 코드의 원리를 알면 색을 정확히 옮기고, 미세하게 조정하는 일이 훨씬 수월해집니다.
RGB 색상 코드란 무엇인가
RGB는 빨강(Red), 초록(Green), 파랑(Blue) 세 가지 빛을 섞어 색을 만드는 방식입니다. 모니터, 스마트폰, TV처럼 빛을 직접 내보내는 화면은 모두 이 방식을 씁니다. 물감처럼 섞을수록 어두워지는 것이 아니라, 빛을 섞을수록 밝아지는 가산 혼합이라는 점이 핵심입니다.
각 색은 0부터 255까지 256단계의 밝기를 가집니다. 빨강 256단계 곱하기 초록 256단계 곱하기 파랑 256단계를 계산하면 약 1,670만 가지 색이 나옵니다. 우리가 화면에서 보는 거의 모든 색이 이 세 숫자의 조합으로 만들어집니다.
왜 하필 0부터 255까지일까
컴퓨터는 색 정보를 8비트 단위로 저장합니다. 8비트로 표현할 수 있는 경우의 수가 정확히 256가지(0부터 255)이기 때문에 각 색상 채널이 이 범위를 갖게 됐습니다. 세 채널을 합치면 24비트, 그래서 RGB를 트루컬러(24비트 색상)라고 부르기도 합니다.
RGB는 색을 섞는 것이 아니라 빛의 밝기를 조절하는 것입니다. 세 숫자가 모두 0이면 검정, 모두 255이면 흰색이 됩니다.
16진수 헥스 코드 읽는 법
웹과 디자인 도구에서 가장 자주 보는 #FF5733 형태가 바로 헥스 코드입니다. 맨 앞 우물 정 기호 다음에 여섯 자리가 오는데, 두 자리씩 끊어서 각각 빨강, 초록, 파랑을 나타냅니다.
- FF - 빨강 값 (16진수 FF = 10진수 255, 최대치)
- 57 - 초록 값 (16진수 57 = 10진수 87)
- 33 - 파랑 값 (16진수 33 = 10진수 51)
16진수는 0부터 9까지 쓰고, 10부터 15까지는 A, B, C, D, E, F로 표기합니다. 그래서 한 자리로 0부터 15, 두 자리로 0부터 255를 표현할 수 있습니다. 두 자리면 십의 자리가 16배수입니다. 예를 들어 5×16 더하기 7로 87이 됩니다.
자주 쓰는 색의 코드
| 색상 | 헥스 코드 | RGB 값 |
|---|---|---|
| 빨강 | #FF0000 | 255, 0, 0 |
| 초록 | #00FF00 | 0, 255, 0 |
| 파랑 | #0000FF | 0, 0, 255 |
| 흰색 | #FFFFFF | 255, 255, 255 |
| 검정 | #000000 | 0, 0, 0 |
| 회색 | #808080 | 128, 128, 128 |
RGB와 다른 색상 표현 방식 비교
색을 숫자로 적는 방법은 RGB만 있는 것이 아닙니다. 작업 목적에 따라 더 편한 방식이 다릅니다.
| 방식 | 표기 예시 | 특징 |
|---|---|---|
| 헥스 | #FF5733 | 웹 디자인 표준, 짧고 복사가 쉬움 |
| RGB | rgb(255, 87, 51) | 값을 직관적으로 조정하기 쉬움 |
| RGBA | rgba(255, 87, 51, 0.5) | 투명도(알파) 조절 가능, 0.5는 반투명 |
| HSL | hsl(11, 100%, 60%) | 색조 채도 명도로 분리, 색감 조정에 유리 |
방송 오버레이에서 글자 뒤 배경을 반투명하게 깔고 싶다면 RGBA가 유용합니다. 마지막 값(알파)을 0으로 하면 완전 투명, 1로 하면 완전 불투명입니다. 채팅 위젯이나 알림창 배경을 은은하게 만들 때 0.3에서 0.6 사이를 자주 씁니다.
같은 계열에서 채도나 밝기만 미세하게 바꾸고 싶을 때는 HSL이 편합니다. 색조(Hue)는 그대로 두고 명도(Lightness)만 올리면 같은 색의 밝은 버전이 됩니다. RGB로는 세 숫자를 동시에 조정해야 해서 까다로운 작업입니다.
실전에서 색상 코드 활용하기
색상 코드를 안다는 것은 단순히 색을 입력하는 데 그치지 않습니다. 채널 전체의 색감을 일관되게 유지하는 무기가 됩니다.
- 브랜드 색 고정 - 로고, 오버레이, 썸네일에 쓰는 핵심 색의 헥스 코드를 메모해 두면 어느 도구에서든 똑같은 색을 재현할 수 있습니다.
- 가독성 확보 - 배경과 글자 색의 밝기 차이가 충분해야 잘 읽힙니다. 어두운 배경에는 흰색에 가까운 글자, 밝은 배경에는 검정에 가까운 글자가 기본입니다.
- 포인트 색 한정 - 화면 전체에 강한 색을 여러 개 쓰면 산만합니다. 후원 알림이나 강조 요소에만 포인트 색 한두 개를 쓰는 편이 깔끔합니다.
색 대비를 점검하는 기준
웹 접근성 기준에서는 일반 텍스트의 경우 배경과 글자의 명도 대비가 4.5대 1 이상을 권장합니다. 숫자까지 맞추기 어렵다면, 회색조로 바꿨을 때도 글자가 또렷이 보이는지 눈으로 확인하는 것만으로도 큰 실수를 줄일 수 있습니다.
색상 코드 다루는 도구와 팁
색상 코드를 직접 손으로 계산할 일은 많지 않습니다. 대부분의 디자인 도구와 브라우저 개발자 도구에 색상 추출기(스포이드)가 들어 있어, 화면의 색을 클릭하면 헥스 코드를 바로 알려줍니다.
웹 작업을 하다 보면 색상 코드 외에도 다양한 데이터 변환이 필요할 때가 있습니다. 예를 들어 색상값이나 한글이 포함된 주소를 링크에 넣을 때 깨지는 경우가 있는데, 이럴 때는 URL 인코더 같은 변환 도구로 안전한 형식으로 바꿔 두면 문제를 피할 수 있습니다. 송출 환경을 점검할 때 내 IP 주소 확인 도구로 현재 네트워크 상태를 함께 살펴보는 것도 방송 안정성에 도움이 됩니다.
색상 코드를 외울 필요는 없습니다. 다만 #FF5733이 빨강은 최대, 초록과 파랑은 낮은 주황빛이라는 정도만 읽을 수 있어도 작업 속도가 달라집니다. 자주 쓰는 채널 색 서너 개의 헥스 코드를 적어 두고, 새 오버레이나 썸네일을 만들 때마다 같은 코드를 입력하는 습관부터 들여 보시기 바랍니다.
