Tailwind v4와 oklch로 1인 개발자 브랜드 색 만들기

혼자 만든 화면이 어딘가 "AI가 뽑은 듯" 보일 때가 있어요. 원인을 따라가 보면 색인 경우가 많아요. 보라색 그라디언트, 순수한 검정과 회색, 무지개처럼 쓴 강조색. 라이프케어로그를 다듬으면서 색부터 다시 잡았고, 그 도구가 Tailwind v4와 oklch였어요.

왜 hex가 아니라 oklch인가

oklch는 사람 눈이 느끼는 밝기를 기준으로 색을 다루는 방식이에요. oklch(밝기 채도 색상) 세 값으로 적어요. hex(#6366f1)는 숫자만 봐선 얼마나 밝은지 가늠이 안 되지만, oklch는 밝기 값 하나만 바꿔도 색감을 유지한 채 밝기를 조절할 수 있어요. 라이트·다크 모드를 만들 때 이 점이 특히 편해요.

Tailwind v4는 설정을 CSS의 @theme 블록에서 직접 잡기 때문에, 색 토큰을 oklch로 선언해 두고 전역에서 변수처럼 쓰면 돼요.

무채색을 '살짝 물들이기'

가장 크게 바뀐 건 회색이었어요. 순수한 회색(#888) 대신, 브랜드 색조를 아주 옅게 섞은 무채색을 써요. 채도를 0.005~0.01 정도만 넣는 거예요.

• 배경: 차가운 흰색 대신 살짝 따뜻한 크림 톤
• 본문 글자: 순수 검정 대신 아주 어두운, 약간 색이 도는 톤

눈에 띄게 화려하진 않지만, 화면 전체에 통일감이 생기고 "기성품 느낌"이 빠져요.

순수 회색·보라 그라디언트(왼쪽) vs 살짝 물들인 무채색·단색 강조(오른쪽)

라이트와 다크를 한 번에

oklch의 진짜 장점은 여기서 나와요. 같은 색상·채도를 두고 밝기 값만 뒤집으면 다크 모드가 거의 풀려요. 크림색 배경(밝기 높음)을 아주 어두운 톤(밝기 낮음)으로 내리고, 글자는 반대로 올리는 식이죠. 다크 모드라고 배경을 순수 검정으로 두지 않는 것도 중요해요. 살짝 색이 도는 어두운 톤이 눈에 더 편해요.

• ✓무채색에 채도 0.005~0.01
• ✓강조는 한 색
• ✓다크는 순수검정 말고 어두운 틴트

정리하며

색은 취향처럼 보이지만, 사실 규칙으로 잡을 수 있어요. oklch로 밝기를 다루고, 무채색을 살짝 물들이고, 강조색은 하나로 절제하는 것. 이 세 가지만 지켜도 화면이 한결 차분해져요.

브랜드는 거창한 로고가 아니라 이런 작은 일관성에서 쌓여요. 다음에 화면이 어딘가 어색하게 느껴진다면, 색부터 한 줄씩 의심해 보세요.