색상 코드는 화면에 표시할 색을 숫자와 문자로 지정하는 값입니다. 디자인에서 받은 색을 웹 페이지에 적용하거나 문서와 이미지의 색을 맞추려면, 코드 형식이 HEX인지 RGB인지 HSL인지 먼저 확인해야 합니다.
세 형식은 색을 표현하는 방법이 다를 뿐 같은 색을 가리킬 수 있습니다. W3C CSS Color 규격은 16진수 HEX 표기, rgb()·hsl() 함수, 이름 색상 등 여러 CSS 색상 문법을 정의합니다. 코드를 복사할 때는 앞의 #, 괄호, 구분 방식과 투명도 값을 빠뜨리지 않는 것이 중요합니다.
색상 코드 한눈에 보기
| 형식 | 구성 | 예시 | 잘 맞는 용도 |
|---|---|---|---|
| HEX | 16진수 RGB | #1E90FF | 짧은 코드 공유 |
| RGB | 빨강·초록·파랑 | rgb(30 144 255) | 채널값 조정 |
| HSL | 색상·채도·명도 | hsl(210 100% 56%) | 밝기와 채도 변형 |
| Alpha | 불투명도 | rgb(30 144 255 / 50%) | 반투명 배경 |
1. HEX 색상 코드 읽기
HEX 코드는 # 뒤에 16진수 문자를 붙입니다. 가장 흔한 #RRGGBB 형식은 빨강(R), 초록(G), 파랑(B)을 두 자리씩 적습니다. 각 채널은 00부터 FF까지이며, 00은 해당 빛이 없고 FF는 가장 강한 상태입니다.
#000000은 세 채널이 모두 00이라 검정, #FFFFFF는 모두 FF라 흰색입니다. #FF0000은 빨강 채널만 최댓값이므로 선명한 빨강입니다. 영문 A부터 F는 16진수 숫자에 포함되며 대문자와 소문자는 같은 값으로 처리됩니다.
3자리 HEX는 왜 가능한가요?
#RGB 형식은 각 문자를 두 번 반복한 #RRGGBB의 축약형입니다. #3AF는 #33AAFF와 같습니다. 각 쌍의 두 문자가 다른 색은 세 자리로 줄일 수 없습니다. 예를 들어 #34AAFF는 첫 채널이 34이므로 #3AF로 줄이면 다른 색이 됩니다.
2. RGB 값 이해하기
RGB는 빨강, 초록, 파랑 빛의 강도를 조합합니다. 일반적인 sRGB 8비트 채널에서는 각 값을 0부터 255까지 적습니다. rgb(255 255 255)는 흰색이고 rgb(0 0 0)은 검정입니다.
HEX의 두 자리 채널을 10진수로 바꾸면 RGB 값이 됩니다. 예를 들어 16진수 1E는 30, 90은 144, FF는 255이므로 #1E90FF와 rgb(30 144 255)는 같은 sRGB 색을 나타냅니다. 변환 도구를 쓸 때는 결과값과 색상 미리보기를 함께 확인하세요.
3. HSL 값 이해하기
HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 색을 설명합니다. 색상은 보통 0도부터 한 바퀴의 각도로, 채도와 명도는 백분율로 적습니다. 색상각을 유지한 채 명도만 조절하면 같은 계열의 밝고 어두운 변형을 만들기 쉽습니다.
채도가 0%에 가까워질수록 회색에 가까워지고, 명도가 0%면 검정, 100%면 흰색이 됩니다. 다만 HSL의 수치 변화가 사람이 느끼는 밝기 변화와 항상 일정한 것은 아닙니다. 본문 글자색처럼 읽기 쉬움이 중요한 경우에는 마지막에 실제 배경과의 명암비를 측정해야 합니다.
4. 투명도 Alpha 확인하기
CSS Color 규격은 색상과 함께 배경이 비치는 정도를 나타내는 알파 값을 사용할 수 있습니다. 현대식 rgb() 문법에서는 슬래시 뒤에 0부터 1 사이의 수나 백분율을 적습니다. 1 또는 100%는 완전 불투명, 0 또는 0%는 완전 투명입니다.
HEX에서는 #RRGGBBAA처럼 뒤에 두 자리를 더해 알파를 적을 수 있습니다. 여기서 마지막 AA가 불투명도입니다. 투명색은 배경색과 섞여 최종 화면 색이 달라지므로, 색상 코드 하나만 보고 글자 명암비를 판단하면 안 됩니다.
5. 색상 코드를 변환하는 순서
- 원본 코드가 HEX·RGB·HSL 중 무엇인지 확인합니다.
- 알파 값이 포함됐는지 살펴봅니다.
- 변환기에 원본 값을 그대로 입력합니다.
- 결과 코드와 미리보기 색이 같은지 비교합니다.
- 실제 배경 위에 적용해 명암비와 가독성을 측정합니다.
복사한 값 앞뒤에 따옴표나 세미콜론이 붙어 있다면 입력 칸이 이를 허용하는지 확인하세요. 이미지 편집기와 웹 도구가 지원하는 색 공간이 다르면 수치가 같아 보여도 화면 결과가 달라질 수 있습니다. 웹용 기본값은 sRGB인지 확인하는 편이 안전합니다.
6. 글자와 배경 명암비 확인하기
색상이 예쁘게 보이는 것과 글자가 잘 읽히는 것은 다른 문제입니다. WCAG 2.1의 최소 명암비 기준은 일반 크기 텍스트에 4.5:1, 큰 텍스트에 3:1을 제시합니다. 사용자 인터페이스 구성 요소와 의미가 필요한 그래픽에는 인접 색과 3:1 기준이 적용됩니다.
명암비 검사기에 글자색과 배경색 코드를 각각 입력해 결과를 확인하세요. 반투명 글자나 그라데이션 배경은 가장 불리한 지점을 기준으로 살펴야 합니다. 배경 사진 위의 글자는 단색 오버레이를 추가하거나 글자 주변 배경을 어둡게 해 읽기 쉬움을 높일 수 있습니다.
7. 색상만으로 정보를 구분하지 않기
성공은 초록, 오류는 빨강처럼 색 하나만으로 상태를 표시하면 색을 구분하기 어려운 독자가 의미를 놓칠 수 있습니다. 아이콘의 모양, 텍스트 레이블, 테두리 패턴을 함께 사용하세요. 그래프도 범례 색만 두지 말고 선 종류나 직접 레이블을 더하는 편이 좋습니다.
버튼의 선택 상태 역시 색 변화만 주지 말고 체크 표시나 굵기, 밑줄 같은 보조 신호를 넣습니다. 색상 코드를 고르는 단계에서부터 정보 전달 방식까지 점검하면 나중에 전체 팔레트를 다시 수정하는 일을 줄일 수 있습니다.
8. 자주 생기는 입력 오류
# 기호 누락
CSS에서 HEX 색상은 #으로 시작합니다. 숫자만 붙여 넣으면 다른 값으로 해석되거나 무효가 될 수 있습니다.
채널 순서 혼동
HEX와 RGB의 기본 순서는 빨강, 초록, 파랑입니다. BGR 순서를 쓰는 일부 환경의 값을 그대로 가져오면 다른 색이 됩니다.
알파 값 오해
8자리 HEX의 마지막 두 자리는 별도 색 채널이 아니라 투명도입니다. 6자리 색과 비교할 때는 배경과 합성된 결과를 확인해야 합니다.
인쇄 색과 화면 색 혼동
RGB·HEX는 화면의 빛을 기준으로 합니다. 인쇄물의 CMYK 변환 결과는 종이와 잉크, 색상 프로필에 따라 달라질 수 있으므로 인쇄용 교정이 필요합니다.
색상 코드 검수 체크리스트
- 코드 형식과 색 공간을 확인했나요?
- HEX의 #과 자릿수가 정확한가요?
- RGB 채널 순서가 올바른가요?
- 투명도 값과 실제 배경을 함께 봤나요?
- 본문 글자와 배경 명암비를 측정했나요?
- 색상 이외의 상태 표시도 제공했나요?
9. 팔레트를 저장하고 공유하는 방법
색상을 여러 개 쓸 때는 화면 캡처만 전달하지 말고 색 이름, 역할, 코드 형식, 불투명도를 표로 남기세요. 예를 들어 기본 배경, 본문 글자, 강조 버튼, 경고 상태처럼 용도를 붙이면 비슷한 색을 잘못 고르는 일을 줄일 수 있습니다. 같은 색을 HEX와 RGB로 중복 저장하기보다 기준 형식 하나를 정하고 필요한 환경에서 변환하는 편이 변경 이력을 추적하기 쉽습니다.
색 이름은 ‘파랑 1’보다 ‘기본 링크’, ‘주요 버튼 배경’처럼 쓰임을 나타내는 표현이 좋습니다. 나중에 파랑을 다른 색으로 바꾸더라도 이름을 다시 고칠 필요가 적습니다. 다크 모드를 제공한다면 밝은 배경용 팔레트와 어두운 배경용 팔레트를 구분하고, 각 조합의 명암비 결과도 함께 기록하세요.
파일이나 문서에 코드를 적을 때는 #RRGGBB처럼 자릿수를 통일하고 알파가 있으면 별도 열에 표시합니다. 반투명 색은 아래 배경에 따라 결과가 달라지므로 ‘50% 파랑’만 적지 말고 어떤 배경 위에서 사용하는지도 남겨야 합니다. 그라데이션은 시작색·끝색·방향·중간 지점을 함께 기록합니다.
검수용 표에는 실제 색상 견본과 코드 텍스트를 모두 넣으세요. 견본만 있으면 정확한 값을 복사하기 어렵고, 코드만 있으면 육안으로 다른 색을 발견하기 어렵습니다. 마지막으로 흑백 화면에서도 정보 구조가 유지되는지 확인하면 색상 의존 문제를 빠르게 찾을 수 있습니다.
자주 묻는 질문
HEX와 RGB 중 무엇을 써야 하나요?
웹에서는 둘 다 사용할 수 있습니다. 짧게 공유하려면 HEX가 편하고, 채널값이나 투명도를 수치로 조정하려면 rgb()가 읽기 쉬울 수 있습니다.
HEX 영문은 대문자로 써야 하나요?
아닙니다. A부터 F는 대소문자를 구분하지 않습니다. 다만 프로젝트 안에서는 한 가지 표기 방식으로 통일하면 비교가 쉽습니다.
8자리 HEX는 무엇인가요?
#RRGGBBAA 형식으로, 마지막 두 자리가 알파 채널입니다. 모든 도구가 같은 입력 형식을 지원하는지 확인하세요.
같은 코드인데 화면마다 색이 다른 이유는 무엇인가요?
디스플레이 특성, 밝기 설정, 색상 프로필, 브라우저와 앱의 색 관리 차이 때문일 수 있습니다. 코드 일치와 물리적 화면 일치는 별개입니다.
명암비만 통과하면 읽기 쉬운가요?
명암비는 중요한 최소 조건이지만 글자 크기, 굵기, 행간, 배경 무늬도 가독성에 영향을 줍니다. 실제 화면 크기에서 함께 확인하세요.
색상 추출기로 뽑은 값이 정확한가요?
원본 이미지의 압축, 그라데이션, 그림자, 색상 프로필에 따라 픽셀마다 값이 다를 수 있습니다. 넓은 단색 영역에서 여러 지점을 비교하세요.
마무리
색상 코드는 형식만 바꿔도 같은 색을 표현할 수 있습니다. HEX·RGB·HSL 구조를 이해하고 알파와 색 공간을 확인한 뒤, 실제 배경에서 명암비와 상태 구분까지 검수하면 재사용하기 좋은 색 체계를 만들 수 있습니다.