생원색 배지 대신 채도 낮춘 oklch 상태색으로 대시보드 톤 잡기

대시보드 화면을 SNS에 올렸는데 돌아온 반응이 "빨간 배지는 뭐예요?"였던 적이 있어요. 브랜드 주색은 파랑인데, 보는 사람 눈에는 초록과 빨강만 남은 거죠. 1인 브랜드는 화면 캡처가 곧 광고 소재라서, 상태 배지 색이 그대로 브랜드 인상이 돼요.

생원색 배지가 브랜드를 지우는 이유

플랜비처럼 멤버·회비·출전 로테이션을 한 화면에 모으는 운영 도구는 상태 표시가 유난히 많아요. 납부·미납·보류 같은 값에 #ff0000, #00cc00을 그대로 쓰면 화면에서 가장 채도 높은 색이 배지가 되고, 주색은 배경으로 밀려요. 직접 만들어 보니 문제는 두 가지였어요. 하나는 시선 순서가 뒤집히는 것. 다른 하나는 화면마다 rgb 값이 조금씩 달라서, 캡처를 나란히 두면 같은 "미납"인데 색이 안 맞는 것.

hsl로 채도만 낮춰 봤더니 다른 문제가 생겼어요. 같은 채도·밝기 값을 줘도 노랑은 환하고 파랑은 어둡게 보여요. 사람 눈이 색상마다 밝기를 다르게 느끼는데, hsl은 그 차이를 반영하지 않거든요.

oklch로 상태색 묶기

oklch는 명도(L) 01, 채도(C), 색상(H) 0360도 세 값으로 색을 적어요. 지각 균일 색공간이라 L을 같게 두면 색상이 달라도 비슷한 밝기로 보여요. 그래서 규칙이 단순해져요. 명도와 채도를 고정하고, 색상만 돌리는 거예요.

:root {
  --ink: oklch(0.25 0.02 260);
  --status-ok:    oklch(0.72 0.10 155);
  --status-warn:  oklch(0.76 0.10 80);
  --status-alert: oklch(0.68 0.10 25);
  --status-na:    oklch(0.70 0.02 260);
}
 
.badge {
  background: color-mix(in oklch, var(--badge-color) 16%, transparent);
  color: color-mix(in oklch, var(--badge-color) 55%, var(--ink));
  border: 1px solid color-mix(in oklch, var(--badge-color) 35%, transparent);
}
.badge-ok    { --badge-color: var(--status-ok); }
.badge-warn  { --badge-color: var(--status-warn); }
.badge-alert { --badge-color: var(--status-alert); }
.badge-na    { --badge-color: var(--status-na); }

채도 0.10은 여러 번 돌려 보니 "색은 있는데 소리는 안 지르는" 정도였어요. 중립(na)만 채도를 0.02로 내려서 "해당 없음"이 배경에 묻히게 했고요. 토큰은 4개면 충분해요. 상태가 하나 늘어도 색상 값 하나만 더 고르면 되니까요.

1인 브랜드가 얻는 것

스크린샷 자산이 하나로 묶여요. 랜딩 페이지, X 게시물, 앱 소개 이미지에 같은 화면을 잘라 써도 톤이 같아서 시리즈처럼 보여요. 적용해 봤더니 카드뉴스 도표에도 이 토큰 4개를 그대로 옮겨 쓸 수 있었고, 콘텐츠 만들 때마다 색 고르던 시간이 사라졌어요.

다크모드도 쉬워져요. 명도만 낮추고 채도와 색상은 그대로 두면 같은 상태색으로 읽혀요. 테스트해 보면 라이트·다크 두 벌 캡처를 나란히 놓아도 같은 브랜드로 보여요.

접근성 검사가 편해지는 건 덤이에요. 배지 글자는 본문 기준 4.5:1, 아이콘 같은 UI 요소는 3:1 대비를 넘겨야 하는데, 채도를 낮추면 명도를 움직일 여지가 커져서 대비 맞추기가 수월했어요. 브라우저 개발자 도구 색상 피커에서 바로 확인돼요.

정리

배지는 정보고, 브랜드 색은 인상이에요. 둘이 채도 싸움을 하면 항상 배지가 이기고 브랜드가 져요. 상태색은 명도·채도 고정에 색상만 회전, 토큰은 중립 포함 4개. 이 규칙 하나로 대시보드 캡처가 마케팅 자산으로 바뀌었어요. 플랜비 회비 화면을 같은 눈으로 다시 보면, 먼저 보여야 할 건 미납 빨강이 아니라 동호회의 얼굴이에요.