색상 포맷이 중요한 이유
CSS에서 설정하는 모든 색상은 여러 형식으로 표현할 수 있습니다. `#3B82F6`으로 쓰든, `rgb(59, 130, 246)`으로 쓰든, `hsl(217, 91%, 60%)`으로 쓰든 결과는 동일한 파란색입니다. 어떤 상황에서 어떤 포맷을 쓸지 알면 프론트엔드 개발이 훨씬 수월해집니다.
HEX: 웹의 고전 표기법
16진수 색상 표기는 웹 초창기부터 쓰여온 방식입니다. `#FF6347`은 세 쌍의 16진수로, `FF`는 빨간색(255), `63`은 초록색(99), `47`은 파란색(71)을 나타냅니다. 각 쌍은 `00`부터 `FF`까지 256가지 값을 가지며, 1,600만 가지 이상의 색상을 표현합니다.
Hex는 간결하고 어디서나 지원됩니다. 단점은 직관적으로 파악하기 어렵다는 것입니다. `#3D9970`만 보고 따뜻한 색인지 차가운 색인지 바로 알기 힘듭니다. 각 쌍의 두 자리가 같을 때 단축 표기를 쓸 수 있습니다. `#F06`은 `#FF0066`과 같습니다.
RGB / RGBA: 채널 직접 제어
`rgb()` 함수는 화면이 빨강·초록·파랑 빛을 혼합해 색을 만드는 원리와 직접 대응됩니다. 값 범위는 0~255입니다. 순수 빨강은 `rgb(255, 0, 0)`, 흰색은 `rgb(255, 255, 255)`, 검정은 `rgb(0, 0, 0)`입니다.
`rgba()`는 0(완전 투명)~1(완전 불투명)의 알파 채널을 추가합니다. 오버레이, 그림자, 다양한 배경 위의 UI 요소에 필수적입니다. 최신 CSS에서는 `rgb(255 0 0 / 0.5)`처럼 통합 문법도 사용할 수 있습니다.
HSL: 사람을 위한 색상 모델
HSL은 색조(Hue), 채도(Saturation), 명도(Lightness)의 약자로, 인간이 색을 인식하는 방식에 훨씬 가깝게 설계됐습니다.
**색조(Hue)**는 색상환에서의 위치를 0~360도로 나타냅니다. 빨강은 0°, 초록은 120°, 파랑은 240°입니다. **채도(Saturation)**는 0%(회색)~100%(완전 채색)로 선명함을 표현합니다. **명도(Lightness)**는 0%(검정)~50%(순수 색상)~100%(흰색) 범위입니다.
HSL의 실용적 강점은 색상 변형이 직관적이라는 점입니다. 호버 시 버튼을 밝게 하려면 명도 값만 올리면 됩니다. 차분한 버전을 만들려면 채도를 낮추면 됩니다. HSL 기반 디자인 시스템은 임의의 HEX 문자열로 구성된 것보다 훨씬 유지보수하기 쉽습니다.
색상 조화 이해하기
**보색(Complementary)**은 색상환에서 정반대에 위치합니다. 파랑-주황, 빨강-초록처럼 강한 대비를 주지만 과하면 눈이 피로해집니다.
**유사색(Analogous)**은 색상환에서 인접한 색입니다. 파랑-청록-초록처럼 부드럽고 통일감이 있어 배경이나 중립적 UI 영역에 자주 씁니다.
**삼색 조화(Triadic)**는 120° 간격의 세 가지 색으로, 다양성과 균형을 동시에 잡습니다.
웹 인터페이스에서는 브랜드 주색 하나, 행동 유도용 강조색 하나, 텍스트와 배경용 중립 팔레트로 구성하는 게 일반적입니다.
WCAG 명도 대비: 접근성은 선택이 아닙니다
WCAG는 저시력자나 색각 이상이 있는 사람도 텍스트를 읽을 수 있도록 최소 명도 대비를 규정합니다.
- 일반 텍스트: **4.5:1** 이상 (WCAG AA)
- 큰 텍스트(18pt 이상 또는 굵은 14pt): **3:1** 이상 (WCAG AA)
- 향상된 가독성: **7:1** 이상 (WCAG AAA)
흔한 실패 사례: 흰 배경의 밝은 회색 텍스트, 비슷한 색조 배경의 컬러 텍스트, 낮은 대비의 입력 필드 플레이스홀더. 측정하면 모두 쉽게 고칠 수 있습니다.
접근성 높은 색상 팔레트 만들기
브랜드 주색으로 시작해 명도를 조절해 스케일을 만드세요. 일반적인 디자인 시스템은 흰색에 가까운 50부터 검정에 가까운 900까지 9단계를 정의하고, 브랜드 주색을 500에 배치합니다.
모든 텍스트-배경 조합을 WCAG 기준으로 확인하세요. 밝은 배경의 어두운 텍스트와 어두운 배경의 밝은 텍스트는 거의 항상 통과합니다. 위험 구간은 중간 명도의 색을 텍스트나 배경으로 쓸 때입니다.
색상만으로 정보를 전달하지 마세요. 남성의 약 8%는 색각 이상을 가집니다. 아이콘, 패턴, 레이블을 함께 활용하세요.
실용 팁 정리
HEX, RGB, HSL은 수학적으로 동일합니다. 디자인 토큰과 CSS 변수에는 HEX를, 프로그래밍적 색상 조작에는 HSL을, 투명도가 필요할 때는 RGBA를 쓰세요. 텍스트 색상 조합을 확정하기 전 명도 대비를 반드시 확인하고, 임의의 hex 코드를 코드베이스 전체에 흩뿌리기보다 제한된 기준 색상 세트를 중심으로 팔레트를 구성하세요.