color-mix()

기본 색 하나로 팔레트 전체

기본 색 하나만 고르면 밝은색/어두운색/hover/테두리/반투명을 브라우저가 계산해요. 단계별로 색을 손으로 정의할 필요가 없어요.

#4f46e5

자동 생성된 팔레트

밝게 60%

밝게 30%

기본

기본

hover

어둡게 30%

소프트 배경

테두리

반투명 25%

버튼 / 카드 미리보기

소프트 카드

배경은 기본 색에 흰색을 많이 섞은 연한 톤이에요.

반투명 배지

light-dark() 패널

light-dark()로 칠한 패널

위 토글로 color-scheme를 바꾸면 글자색/배경색이 한 줄짜리 규칙에서 자동으로 전환돼요. 라이트/다크용 CSS를 두 번 쓰지 않았어요.

생성되는 CSS

.btn {
  --base: #4f46e5;
  /* 기본 색 하나에서 전부 파생 - 색을 여러 벌 손으로 정의할 필요가 없다 */
  background: var(--base);
  border: 1px solid color-mix(in srgb, var(--base) 85%, black);
}
.btn:hover {
  /* 검정을 살짝 섞어 hover 색을 그 자리에서 만든다 */
  background: color-mix(in srgb, var(--base) 88%, black);
}
.card {
  background: color-mix(in srgb, var(--base) 12%, white); /* 소프트 배경 */
}
.badge {
  background: color-mix(in srgb, var(--base) 25%, transparent); /* 반투명 */
}

/* light-dark(): color-scheme에 맞춰 라이트면 첫 값, 다크면 둘째 값을 자동 선택 */
.panel {
  color-scheme: light dark;
  background: light-dark(white, #0f172a);
  color: light-dark(#0f172a, #e2e8f0);
}