브랜드 컬러는 로고 색 하나를 고르는 일로 끝나지 않습니다. 그 색이 버튼, 링크, 배경, 테두리까지 번지도록 코드 위에 뼈대를 세워 두는 일에 가깝습니다. 아래 예제는 모두 그대로 복사해 확인할 수 있습니다.
49.1 기준색을 변수 하나로 못박기
브랜드색은 여기저기 흩뿌리지 말고 한 곳에 선언해 둡니다. 나중에 색을 바꿀 때 이 한 줄만 고치면 화면 전체가 따라옵니다.
:root {
--brand: #2563eb;
}
.header { background: var(--brand); }
.link { color: var(--brand); }
헤더와 링크가 같은 변수를 바라봅니다. 색이 코드 곳곳에 하드코딩되어 있으면 리브랜딩 한 번에 파일을 뒤지지만, 변수 하나면 끝납니다.
49.2 의미로 이름 붙이기
변수 이름에 파랑 같은 색 이름을 박으면 나중에 색을 초록으로 바꿨을 때 이름이 거짓말을 합니다. 역할로 이름을 붙입니다.
:root {
--color-primary: #2563eb;
--color-accent: #f59e0b;
--color-text: #1f2937;
--color-surface: #ffffff;
--color-border: #e5e7eb;
}
primary는 핵심 행동, accent는 튀어야 할 강조, surface는 바탕입니다. 값이 무슨 색이든 역할 이름은 그대로라서 코드가 색에 휘둘리지 않습니다.
49.3 상태색은 기준색에서 파생
버튼의 호버와 눌림 색을 따로 손으로 고르면 미묘하게 어긋납니다. 기준색의 명도만 조절해 뽑아내면 한 계열로 딱 맞습니다.
:root {
--brand-h: 221;
--brand-s: 83%;
--primary: hsl(var(--brand-h) var(--brand-s) 53%);
--primary-hover: hsl(var(--brand-h) var(--brand-s) 46%);
--primary-active: hsl(var(--brand-h) var(--brand-s) 38%);
}
.btn { background: var(--primary); color: #fff; }
.btn:hover { background: var(--primary-hover); }
.btn:active { background: var(--primary-active); }
hue와 채도는 고정하고 명도만 한 칸씩 내렸습니다. 상태가 바뀌어도 같은 파랑 안에서 움직이니 자연스럽습니다.
49.4 color-mix로 옅은 변형 만들기
배경에 깔 아주 옅은 브랜드 톤이 필요할 때가 있습니다. 흰색과 섞어 버리면 손으로 hex를 계산할 필요가 없습니다.
:root {
--primary: #2563eb;
--primary-soft: color-mix(in oklab, var(--primary), white 88%);
--primary-tint: color-mix(in oklab, var(--primary), white 70%);
}
.notice {
background: var(--primary-soft);
border: 1px solid var(--primary-tint);
color: var(--primary);
}
기준색 하나에서 배경, 테두리, 글자색이 전부 흘러나옵니다. 알림 박스 하나가 브랜드색만으로 통일감 있게 완성됩니다.
49.5 브랜드 hue를 머금은 회색
완전한 무채색 회색은 브랜드색 옆에서 살짝 붕 뜹니다. 회색에 브랜드 hue를 아주 조금 섞으면 화면이 한 덩어리로 묶입니다.
:root {
--brand-h: 221;
--gray-50: hsl(var(--brand-h) 14% 97%);
--gray-200: hsl(var(--brand-h) 12% 90%);
--gray-500: hsl(var(--brand-h) 8% 55%);
--gray-800: hsl(var(--brand-h) 14% 22%);
}
.card {
background: var(--gray-50);
border: 1px solid var(--gray-200);
color: var(--gray-800);
}
채도를 10퍼센트 안팎으로만 줘도 회색이 브랜드 편으로 아주 조금 기웁니다. 순회색과 나란히 두면 차이가 보입니다.
49.6 강조색 하나 더 고르기
primary만으로는 세일 배지나 알림처럼 튀어야 할 자리가 심심합니다. 색상환에서 각을 벌려 accent를 정합니다.
:root {
--brand-h: 221;
--primary: hsl(var(--brand-h) 83% 53%);
/* 보색 근처로 벌려 강조색 */
--accent: hsl(calc(var(--brand-h) + 160) 90% 50%);
}
.badge-new {
background: var(--accent);
color: #fff;
}
기준 파랑에서 160도 떨어뜨려 주황빛 강조색을 얻었습니다. accent는 넓게 쓰지 말고 정말 튀어야 할 한두 곳에만 아껴 씁니다.
49.7 두 겹으로 나눈 토큰
원시 색 토큰과 그 색을 쓰는 자리 토큰을 나눠 두면 관리가 쉬워집니다. 값은 아래에 모으고, 위에서는 역할 이름만 부릅니다.
:root {
/* 원시 토큰 */
--blue-500: #2563eb;
--gray-100: #f3f4f6;
/* 시맨틱 별칭 */
--button-bg: var(--blue-500);
--button-text: #ffffff;
--page-bg: var(--gray-100);
}
.btn { background: var(--button-bg); color: var(--button-text); }
body { background: var(--page-bg); }
버튼 색을 통째로 바꾸고 싶으면 button-bg가 가리키는 원시 토큰만 갈아 끼우면 됩니다. 색값과 쓰임새가 분리되어 있어서 손댈 자리가 분명해집니다.
49.8 링크와 방문한 링크
링크도 브랜드색을 쓰되 상태마다 조금씩 달라야 어디를 눌렀는지 보입니다. 기준색에서 명도만 조절해 상태를 나눕니다.
:root {
--brand-h: 221;
--brand-s: 83%;
}
a { color: hsl(var(--brand-h) var(--brand-s) 48%); }
a:hover { color: hsl(var(--brand-h) var(--brand-s) 40%); }
a:visited { color: hsl(calc(var(--brand-h) + 40) 45% 45%); }
기본 링크는 또렷한 브랜드 파랑, 호버는 살짝 진하게, 방문한 링크는 hue를 조금 틀어 차분한 보라빛으로 물러섭니다. 셋 다 같은 뿌리에서 나와 이질감이 없습니다.
49.9 다크 배경용 변형 미리 잡기
같은 브랜드색이 어두운 배경에서는 눈부실 수 있습니다. 밝은 테마와 어두운 테마의 브랜드색을 한 쌍으로 준비해 둡니다.
:root {
--primary: hsl(221 83% 53%);
}
@media (prefers-color-scheme: dark) {
:root {
--primary: hsl(221 62% 63%); /* 채도 낮추고 명도 올림 */
}
}
.btn { background: var(--primary); color: #fff; }
버튼 코드는 그대로 두고 변수 값만 테마에 따라 갈립니다. 브랜드색을 처음 정할 때 어두운 배경용 짝까지 함께 잡아 두면 나중이 편합니다.
49.10 정리
브랜드 컬러는 색을 고르는 감각보다 변수를 어떻게 짜느냐의 문제에 가깝습니다. 기준색을 한 곳에 못박고, 역할로 이름을 붙이고, 상태색과 옅은 변형은 명도와 color-mix로 파생시키고, 회색에도 브랜드 hue를 살짝 섞으면 화면 전체가 한 색에서 뻗어 나온 것처럼 묶입니다. 색 하나를 바꿔야 할 날이 오면 그 설계가 값을 합니다.