이 편에서 만드는 파일

web-practice/
└── portfolio/
    └── css/
        └── styles.css   ~ (tokens 레이어의 색 토큰을 oklch + color-mix()로 교체)

개념 정리

지금까지 색 토큰은 #0969da처럼 hex로 적혀 있습니다. hex(정확히는 sRGB)는 디자이너가 직접 고른 값을 담기엔 문제가 없지만, 코드로 톤을 계산하려 하면 한계가 드러납니다. #0969da를 20퍼센트 더 밝게 만들려고 hsl()로 바꿔 밝기(lightness)만 올려도, 색상에 따라 사람 눈에는 밝기가 고르게 늘지 않습니다. 같은 밝기 증가분이라도 파란색은 아주 밝아 보이고 노란색은 거의 안 밝아 보이는 식입니다. hsl의 밝기 축이 사람의 실제 색 지각과 어긋나 있기 때문입니다.

oklch()는 사람의 색 지각에 맞춰 설계된 색 공간입니다. 좌표 세 개로 색을 표현합니다.

oklch(66% 0.18 254);
/*    L    C    H  */

hsl과 다른 점은, oklch에서는 L 값을 고정한 채 H만 바꿔도 눈에 보이는 밝기가 거의 그대로 유지된다는 것입니다. 그래서 “이 파란색과 밝기가 같은 초록색”을 코드로 계산해서 만들 수 있습니다.

hex → oklch 값 계산

design-spec의 --color-primary: #0969da를 oklch로 옮기는 절차는 다음과 같습니다.

1. 브라우저 개발자 도구의 색상 선택기(Elements → Styles에서 색상 값 옆 네모를 클릭)를 열면 hex·rgb·hsl·oklch 표기를 순환해서 보여줍니다. #0969da를 oklch로 전환하면 oklch(54.6% 0.192 253.7)에 가까운 값이 나옵니다.
2. 이 좌표를 그대로 쓰지 않고 소수 둘째 자리로 반올림해 oklch(55% 0.19 254)로 정리합니다. 토큰 값은 사람이 읽고 조정할 것이므로 지나치게 긴 소수를 남기지 않습니다.
3. 같은 방식으로 나머지 색을 옮깁니다.

무채색(--color-bg, --color-surface, --color-text)은 C 값이 0에 가깝습니다. H(색상)는 채도가 거의 없을 때는 의미가 작아지지만 표기 규칙상 남겨 둡니다.

color-mix()로 톤 변형 만들기

design-spec에는 --color-primary-hover: #0550ae처럼 hover용 색이 디자이너가 손으로 고른 값으로 이미 정해져 있었습니다. color-mix()를 쓰면 이 값을 별도로 관리하지 않고 기본 색에서 계산해 낼 수 있습니다.

color-mix(in oklch, oklch(55% 0.19 254) 80%, black 20%);

in oklch는 어느 색 공간에서 섞을지 지정합니다. 위 식은 “--color-primary 80퍼센트에 검정 20퍼센트를 섞는다”는 뜻이며, 결과는 원래 색보다 살짝 어두운 톤이 됩니다. black 대신 white를 섞으면 밝은 톤(비활성 상태 등)을 만들 수 있습니다.

흔한 오해

“oklch로 바꾸면 색이 눈에 띄게 달라진다”고 생각하기 쉽지만, 반올림 오차 범위 안에서는 원래 hex와 거의 같은 색으로 보입니다. oklch로 옮기는 목적은 눈에 보이는 색을 바꾸는 것이 아니라, 이후 색 계산(color-mix(), 다크모드 반전)을 예측 가능하게 만드는 것입니다.

실습

/* portfolio/css/styles.css */
@layer tokens {
  :root {
    /* --color-* : oklch로 교체 */
    --color-bg: oklch(100% 0 0);
    --color-surface: oklch(97% 0.003 260);
    --color-text: oklch(24% 0.006 260);
    --color-text-muted: oklch(46% 0.012 250);
    --color-primary: oklch(55% 0.19 254);
    --color-border: oklch(87% 0.006 250);
    --color-accent: oklch(50% 0.19 350);
 
    /* hover·비활성 톤은 color-mix()로 계산 */
    --color-primary-hover: color-mix(in oklch, var(--color-primary) 80%, black 20%);
    --color-primary-muted: color-mix(in oklch, var(--color-primary) 20%, var(--color-bg) 80%);
    --color-accent-hover: color-mix(in oklch, var(--color-accent) 80%, black 20%);
    --color-border-strong: color-mix(in oklch, var(--color-border) 60%, var(--color-text) 40%);
  }
}

/* portfolio/css/styles.css */
@layer components {
  .hero .button {
    background-color: var(--color-primary);
  }
 
  .hero .button:hover {
    background-color: var(--color-primary-hover);
  }
 
  .project-card-badge-muted {
    background-color: var(--color-primary-muted);
    color: var(--color-primary);
  }
 
  .field input:focus,
  .field textarea:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-border-strong);
  }
}

직접 해보기

1. --color-accent를 기준으로 color-mix()를 이용해 --color-accent-muted(연한 배경용)를 만들어 보세요. --color-primary-muted와 같은 비율(20%/80%)을 씁니다.
2. .project-card에 border: 1px solid var(--color-border)가 있다면, hover 시 --color-border-strong으로 바뀌는 규칙을 추가해 보세요.

:root {
  --color-accent-muted: color-mix(in oklch, var(--color-accent) 20%, var(--color-bg) 80%);
}
 
.project-card:hover {
  border-color: var(--color-border-strong);
}

자주 하는 실수

확인 문제

참고 자료

• MDN — oklch() 
• MDN — color-mix()