개발자로서 디자이너가 건네주는 색상 코드를 그저 복사 붙여넣기만 하던 시절이 있었습니다. #FF5733이 무슨 색인지 감도 안 오고, RGB와 HSL의 차이도 몰랐죠. 그런데 사이드 프로젝트를 하면서 직접 색상을 골라야 하는 상황이 되니, 기본적인 색상 이론을 모르면 답이 없더라고요. 이 글은 그때 공부했던 내용을 정리한 겁니다.
웹에서 색상을 표현하는 세 가지 방법
웹에서 색상을 지정하는 방식은 여러 가지가 있지만, 실무에서 주로 쓰는 건 세 가지입니다.
HEX (헥스 코드)
가장 많이 보는 형식입니다. #으로 시작하고 6자리 16진수로 구성됩니다. 앞에서부터 2자리씩 빨강(R), 초록(G), 파랑(B) 값을 나타냅니다. #FF0000은 빨강 최대, 초록 0, 파랑 0이니까 순수한 빨간색입니다. 간결해서 CSS에서 널리 사용되지만, 직관적으로 어떤 색인지 바로 떠올리기 어렵다는 단점이 있습니다.
RGB
빨강, 초록, 파랑 각각의 값을 0부터 255까지 숫자로 지정합니다. rgb(255, 0, 0)은 HEX의 #FF0000과 같은 빨간색입니다. 투명도가 필요할 때는 rgba를 써서 네 번째 값으로 알파(0~1)를 추가할 수 있습니다. 프로그래밍적으로 색상을 조작할 때 유리합니다.
HSL
색조(Hue), 채도(Saturation), 밝기(Lightness)로 색상을 표현합니다. 개인적으로 가장 직관적인 방식이라고 생각합니다. 색조는 0~360도(색상환의 각도), 채도와 밝기는 0~100% 범위입니다. hsl(0, 100%, 50%)이 빨간색이고, 여기서 밝기만 80%로 올리면 연한 빨간색이 됩니다. 색상 팔레트를 만들 때 HSL이 훨씬 편합니다.
색상환과 조화로운 배색
색상환(Color Wheel)은 색상들을 원형으로 배치한 것입니다. 이걸 기반으로 여러 배색 기법이 만들어졌는데, 자주 쓰이는 세 가지를 소개합니다.
- 보색 배색(Complementary): 색상환에서 정반대에 위치한 두 색을 조합합니다. 파란색과 주황색, 빨간색과 초록색 같은 조합이죠. 대비가 강해서 주목성이 높습니다. CTA 버튼에 배경과 보색 관계인 색을 쓰면 눈에 확 띕니다.
- 유사색 배색(Analogous): 색상환에서 서로 이웃한 색들을 씁니다. 파랑-청록-초록 같은 조합입니다. 자연스럽고 편안한 느낌을 줘서 배경이나 전체적인 분위기를 잡을 때 좋습니다.
- 삼색 배색(Triadic): 색상환에서 120도 간격으로 세 색을 선택합니다. 빨강-노랑-파랑이 대표적이죠. 다채롭지만 균형 잡힌 느낌을 줍니다. 다만 세 색을 동일한 비율로 쓰면 산만해질 수 있어서, 보통 하나를 주색으로 쓰고 나머지를 보조색으로 사용합니다.
접근성: 색상 대비가 중요한 이유
색상을 예쁘게 조합하는 것도 중요하지만, 모든 사용자가 잘 볼 수 있느냐도 생각해야 합니다. 전 세계 남성의 약 8%가 색각 이상(색맹, 색약)을 가지고 있다는 통계가 있습니다. 또한 밝은 햇빛 아래에서 스마트폰을 볼 때, 대비가 낮은 텍스트는 거의 읽히지 않습니다.
WCAG(Web Content Accessibility Guidelines)는 텍스트와 배경 사이의 최소 대비 비율을 규정하고 있습니다. 일반 텍스트는 4.5:1 이상, 큰 텍스트(18px 이상 볼드 또는 24px 이상)는 3:1 이상이어야 합니다. 연한 회색 텍스트에 흰색 배경을 쓰는 디자인이 세련돼 보일 수 있지만, 대비 비율을 확인해보면 기준에 못 미치는 경우가 생각보다 많습니다.
웹 디자인에서 흔히 하는 색상 실수
1. 너무 많은 색상 사용
한 페이지에 5가지 이상의 주요 색상을 쓰면 시각적으로 혼란스러워집니다. 보통 주색 1개, 보조색 1~2개, 그리고 중립색(회색 계열)으로 구성하는 것이 좋습니다.
2. 색상만으로 정보 전달
빨간색은 오류, 초록색은 성공이라는 관례가 있지만, 색각 이상이 있는 사용자는 이 차이를 인식하지 못할 수 있습니다. 아이콘이나 텍스트로 보완해야 합니다.
3. 다크 모드를 고려하지 않은 색상 선택
라이트 모드에서 잘 보이던 색상이 다크 모드에서는 눈이 아프거나 안 보일 수 있습니다. 채도를 낮추고 밝기를 조절한 다크 모드 전용 팔레트를 따로 준비하는 것이 바람직합니다. HSL을 사용하면 밝기(L)와 채도(S) 값만 조절해서 쉽게 변환할 수 있습니다.
실전: 색상 팔레트 만드는 과정
제가 프로젝트에서 실제로 사용하는 방법을 공유합니다. 먼저 브랜드나 프로젝트의 성격에 맞는 주색 하나를 정합니다. 그 다음 색상환을 기준으로 보색이나 유사색 중 보조색을 하나 고릅니다. 그리고 HSL 방식으로 밝기를 단계별로 조절해서 같은 색조의 밝은 버전(배경용)과 어두운 버전(텍스트용)을 만듭니다. 마지막으로 색상 대비 검사 도구로 접근성 기준을 충족하는지 확인합니다.
이 과정이 번거로워 보일 수 있지만, 처음에 제대로 설정해두면 이후 개발이 훨씬 수월해집니다.
정리
색상 이론을 깊이 파고들면 끝이 없지만, 웹 개발자로서 알아야 할 핵심은 이 정도입니다. HEX, RGB, HSL의 차이를 이해하고, 기본적인 배색 원리를 알고, 접근성을 챙기면 충분합니다. 나머지는 경험과 도구가 채워줄 것입니다.