디지털 색채 이론과 팔레트 구성
색은 인상을 좌우하고 사용자의 행동을 유도하며 브랜드 정체성의 상당 부분을 떠받칩니다. 하지만 잘 어울리는 조합을 고르는 일은 취향의 문제가 아닙니다. 보기 좋은 팔레트 뒤에는 기하학적이고 수학적인 관계가 있습니다.
색 하나 고르는 건 쉽습니다. 어려운 건 서로 부딪치지 않는 다섯 개를 고르는 일입니다. 색은 옆에 무엇을 두느냐에 따라 달라 보이니까요. 이 도구는 형식 간 변환과 함께 기준색으로부터 조화로운 배색을 만들어 줍니다.
색 공간: HEX, RGB, HSL
화면은 빛을 내어 빨강·초록·파랑을 더하는 방식으로 색을 만듭니다. 다만 그 색을 적는 표기법은 여럿이고 각각 쓸모가 다릅니다.
HEX와 HEX8
16진수 표기는 웹에서 표준입니다. 빨강·초록·파랑 값을 16진법으로 적은 것으로, 우물 정 기호 뒤에 여섯 글자가 옵니다(#FF5733). 두 글자씩 각 채널에 대응합니다.
HEX8은 끝에 한 쌍을 더해 불투명도를 지정합니다. #FF573380은 #FF5733을 50% 불투명도로 쓴 것인데, 16진수 80이 10진수로 128이고 255의 절반쯤이기 때문입니다.
RGBA
각 빛 성분을 0에서 255 사이의 정수로, 알파 채널을 0과 1 사이의 소수로 적습니다. 따라서 rgba(255, 87, 51, 0.5)는 위의 HEX8과 정확히 같은 색입니다. 색을 계산으로 다룰 때 가장 편한 표기입니다.
HSLA
HEX와 RGB는 기계에게 편하고 사람에게는 꽤 불친절합니다. 빨강을 조금 어둡게 하려면 RGB에서는 숫자 세 개를 동시에 움직여야 합니다. HSLA는 색을 의미 있는 세 값으로 나눠 이 문제를 해결합니다.
- 색상(Hue): 색상환 위의 각도로 0~360. 0이 빨강, 120이 초록, 240이 파랑입니다.
- 채도(Saturation): 색의 순도로 0%(회색)에서 100%(완전한 색)까지.
- 명도(Lightness): 흰색이나 검은색이 섞인 정도로 0%(순검정)에서 100%(순백)까지.
- 알파: 투명도로 RGBA와 같습니다.
실무에서 가장 큰 이점은 명도만 움직여 음영과 상태 색, 버튼에 마우스를 올렸을 때의 색 같은, 을 만들 수 있다는 점입니다. 색상과 채도를 고정한 채 명도만 바꾸면 같은 계열임이 자연스럽게 유지됩니다.
| 형식 | 예시 | 사람이 읽기 | 적합한 용도 |
|---|---|---|---|
| HEX | #FF5733 | 낮음 | 일반 CSS, 디자인 자산, 브랜드 가이드. |
| HEX8 | #FF573380 | 낮음 | 현대적 CSS, 피그마 명세. |
| RGBA | rgba(255, 87, 51, 0.5) | 보통 | 동적 조작, 폭넓은 호환. |
| HSLA | hsla(11, 100%, 60%, 0.5) | 높음 | 디자인 시스템, 색 스케일, 상호작용 상태. |
배색 조화의 기하학
균형 잡힌 조합을 제안하기 위해, 이 도구는 360도 색상환 위에 기하학적 배치를 적용합니다.
단색 조화
하나의 색상에서 채도와 명도만 달리합니다. 색상이 바뀌지 않으므로 결과가 구조적으로 일관되며 절제된 인상을 줍니다. 색이 내용과 경쟁하지 않아야 하는 인터페이스에 잘 맞습니다.
유사 조화
색상환에서 이웃한 색들을 쓰며 보통 30~90도 범위입니다. 노을이나 숲처럼 자연에서 보는 배색을 재현해 편안하지만, 이웃한 색끼리는 서로 잘 구별되지 않으므로 명도 대비를 따로 챙겨야 합니다.
보색 조화
180도 떨어진 두 색을 씁니다. 가능한 최대의 대비를 만들어 특정 요소를 도드라지게 하는 데 효과적이며, 같은 이유로 넓은 면적에 쓰면 눈이 쉽게 피로해집니다.
3색 조화
120도씩 균등하게 떨어진 세 색입니다. 균형을 유지하면서 생기를 주지만 절제가 필요합니다. 보통 하나를 주조색으로 삼고 나머지 둘은 적은 면적에 씁니다.
분할 보색 조화
보색 조화의 변형으로, 기준색과 그 보색의 양옆 두 색을 씁니다. 보색의 대비를 상당 부분 유지하면서 긴장감은 훨씬 덜해 실제 인터페이스에서 다루기 쉽습니다.
색이 전하는 인상
- 빨강: 활력과 긴박함, 식욕. 요식업과 오락, 전자상거래 할인 표시에 흔합니다.
- 파랑: 신뢰와 안정. 금융과 소프트웨어, 의료, 소셜 서비스가 압도적으로 선택하는 색입니다.
- 초록: 성장과 건강, 자연. 환경 단체와 웰빙 브랜드에서 많이 씁니다.
- 노랑과 주황: 낙관과 친근함, 창의성. 공격적이지 않게 주의를 끌 때 좋습니다.
- 보라: 고급스러움과 신비. 화장품과 프리미엄 서비스가 자주 선택합니다.
- 검정과 어두운 무채색: 세련됨과 무게. 하이엔드 패션과 다크 모드 인터페이스의 기본 바탕입니다.
접근성: 읽히지 않는 팔레트는 소용없습니다
아무리 아름다운 조합이어도 저시력이나 색각 이상이 있는 사람이 내용을 읽지 못하면 의미가 없습니다. W3C의 WCAG는 두 가지 기준을 제시합니다.
- AA 등급: 본문 텍스트 4.5:1, 큰 텍스트 3:1 이상의 대비.
- AAA 등급: 본문 7:1, 큰 텍스트 4.5:1 이상.
실무에서는 밝은 팔레트라면 텍스트에 깊고 채도 있는 색을 고르고, 어두운 인터페이스라면 배경이 텍스트에 비해 충분히 어두운지 확인하면 됩니다. 각 조합을 확정하기 전에 실제 대비 값을 재 보는 편이 안전합니다.
CSS로 옮기기
현대 CSS에서 색을 관리하는 가장 실용적인 방법은 사용자 정의 속성입니다. 값을 한곳에 모아 두면 브랜드 색을 바꾸는 일이 스타일시트 전체에서 같은 색상 코드를 뒤지는 대신 한 줄을 고치는 일이 됩니다. :root에 팔레트를 선언하고 나머지 문서에서 var()로 참조하세요. 같은 구조 덕분에 나중에 다크 테마를 위해 값만 다시 정의하면 개별 컴포넌트는 손대지 않아도 됩니다.