색은 고르는 게 아니라, 만드는 겁니다.

주니어 때 저는 시안마다 새 색을 골랐습니다. 헤더는 이 파랑, 버튼은 저 초록, 알림은 또 다른 빨강. 보기에는 다채로웠는데, 화면이 늘어날수록 색이 따로 놀았습니다. 선배가 제 시안을 보고 물었습니다. “이 회색은 어디서 나온 색이야?” 답을 못 했습니다. 그냥 ‘예뻐서’ 집은 회색이었거든요. 그날 이후로 저는 색을 ‘고르는 것’이 아니라 ‘만드는 것’으로 봅니다. 모든 색은 기준색에서 나와야 합니다.

그래서, 직접 만들어보세요

설명보다 빠릅니다. 아래에서 기준 색을 하나 고르면, 그 색에서 밝은 단계와 어두운 단계가 즉시 생깁니다. 색 하나가 어떻게 한 줄의 시스템이 되는지 눈으로 보세요.

틴트와 셰이드 — 한 색을 위아래로 늘리는 법

기준색에 흰색을 섞으면 밝아지고(틴트), 검정을 섞으면 어두워집니다(셰이드). 위 생성기의 한 줄이 바로 그 계단입니다. 왼쪽 끝은 거의 배경처럼 옅고, 오른쪽 끝은 글자로 써도 될 만큼 진합니다. 이렇게 5~9단계를 만들어 두면, 같은 색 가족 안에서 배경·옅은 테두리·기본 텍스트·호버 상태를 전부 해결합니다. 색을 늘리는 게 아니라 한 색을 깊게 파는 겁니다.

제가 위 생성기의 기본값으로 둔 기준색(#3fe6c0)을 실제로 계단으로 펼치면 이렇게 됩니다 — 한 색이 한 줄의 시스템이 되는 모습이에요.

왼쪽 옅은 단계는 배경·테두리로, 오른쪽 진한 단계(예: #10211e)는 그 위에 올릴 글자색으로 짝지어 둡니다.

메인·보조·액센트 — 색마다 ‘일’이 다릅니다

색은 개수가 아니라 역할로 셉니다. 메인은 브랜드를 알아보게 하는 색이라 넓고 차분하게 깝니다. 보조는 메인을 받쳐주는 톤이고, 액센트는 ‘여길 누르세요’라고 외치는 색입니다. 화면에서 가장 중요한 행동 하나(제출·구매·문의)에만 액센트를 쓰고 나머지는 비워 두면, 그 한 곳이 또렷하게 살아납니다. 액센트를 여기저기 쓰면 강조가 사라집니다.

대비는 ‘나중에 확인하는 것’이 아니라 ‘색을 만들 때 정하는 것’입니다

글자와 배경의 밝기 차이가 부족하면 저시력 사용자만이 아니라 밝은 야외에서 보는 사람도 못 읽습니다. 본문 텍스트는 배경과 대비비 4.5:1 이상을 권장합니다. 그래서 저는 단계를 만들 때부터 ‘이 단계 위에 어떤 단계의 글자를 올릴지’를 짝지어 둡니다. 옅은 틴트 위에는 진한 셰이드, 진한 셰이드 위에는 밝은 틴트. 단계를 미리 만들어 두면 이 짝을 고르기가 쉽습니다.

색만 바꿔도 사이트가 달라지나요?

달라집니다. 다만 색 하나를 바꾸는 게 아니라 색 시스템을 바꿔야 일관되게 달라집니다. 위 생성기에서 기준색을 바꿔보세요. 한 줄 전체가 함께 움직이죠. 실제 사이트에서도 기준색을 정하고 단계를 다시 생성하면 배경·테두리·텍스트·버튼이 한꺼번에 같은 톤으로 갑니다. 색을 ‘고르는 일’이 아니라 ‘시스템을 만드는 일’로 다루는 이유입니다.

색을 이렇게 보는 사람이, 사이트 전체를 만듭니다

색은 사이트에서 사용자가 가장 먼저 느끼는 인상입니다. 그 인상을 기준색 하나에서 체계로 키우는 사람이라면, 타이포도 대비도 버튼도 같은 태도로 다룹니다. Findable에서는 이런 색 시스템이 기본값입니다. 당신의 사이트, 어떤 기준색에서 시작해볼까요?

다른 담당자와의 연결

색은 혼자 일하지 않습니다. 색의 기본기는 컬러 담당자의 색 기초 노트에서, 글자가 읽히게 만드는 대비·접근성은 접근성 담당자의 노트에서, 색과 타이포가 어떻게 어울리는지는 타이포 담당자의 노트에서 이어집니다. 같은 시스템을 다른 자리에서 본 글들입니다.