CSS / 2026 모던 CSS 2026.06.02

Part 7: 색상과 수학 함수 (oklch, color-mix, clamp)

2026년 기준으로 CSS는 색상 표현과 수학 연산에서도 상당히 발전했습니다. 기존에 사용하던 rgb나 hsl보다 더 나은 색상 공간이 등장했고, 반응형 값을 쉽게 만들 수 있는 수학 함수들도 추가되었습니다. 이번 파트에서는 실무에서 특히 유용한 기능들을 중심으로 자세히 알아보겠습니다.

1. 왜 새로운 색상 공간이 필요한가?

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

[모양톡+하드 꿀쿼카]

₩12,900

₩25,800

마리오케이스

2026 최단기간 한번에 합격하는 정보보안기사

₩39,000

크몽

[패션특가] [1+1 특가] 아디다스 SS 써밋 남성 골프바지 일자핏 골프팬츠 남자 골프웨어 IQ2921 IS0541 IU2823 IU2824

₩129,000

₩220,000

딜팡

기존에 많이 사용하던 hsl이나 rgb는 인간의 시각과 잘 맞지 않는 경우가 많습니다. 예를 들어 같은 채도라고 해도 색상에 따라 밝기가 다르게 느껴지는 문제가 있었습니다. 이런 문제를 해결하기 위해 등장한 것이 oklch입니다.

oklch는 인간의 시각에 더 가까운 색상 공간으로, 명도(Lightness), 채도(Chroma), 색상(Hue)을 독립적으로 조절하기가 훨씬 쉽습니다. 특히 디자인 시스템에서 색상 팔레트를 만들 때 매우 유용합니다.

:root {
  --primary: oklch(62% 0.25 260);
  --primary-light: oklch(85% 0.12 260);
  --primary-dark: oklch(48% 0.28 260);
  
  --danger: oklch(58% 0.28 25);
  --success: oklch(65% 0.22 145);
  --warning: oklch(75% 0.18 85);
}

2. color-mix()로 색상 섞기

color-mix()는 두 개의 색상을 섞을 수 있게 해주는 강력한 함수입니다. 이전에는 Sass의 mix() 함수를 사용해야 했지만, 이제는 네이티브 CSS로 가능합니다.

.button {
  background-color: var(--primary);
  color: white;
}

.button:hover {
  background-color: color-mix(in oklch, var(--primary) 85%, black);
}

.button:active {
  background-color: color-mix(in oklch, var(--primary) 70%, black);
}

또한 투명도를 섞을 수도 있습니다.

.overlay {
  background-color: color-mix(in oklch, black 40%, transparent);
}

3. clamp(), min(), max()로 반응형 값 만들기

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

clamp()는 최소값, 권장값, 최대값을 지정해서 반응형 값을 만들 수 있게 해줍니다. 미디어 쿼리를 쓰지 않고도 폰트 크기나 간격을 유연하게 조절할 수 있습니다.

h1 {
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  line-height: 1.2;
}

.section {
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 60px);
}

.card {
  padding: clamp(20px, 4vw, 40px);
  gap: clamp(16px, 3vw, 32px);
}

min()과 max()도 자주 사용됩니다.

.container {
  width: min(100%, 1200px);
}

.sidebar {
  width: max(280px, 25%);
}

4. 실무에서 자주 쓰이는 조합

:root {
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  --spacing-unit: clamp(8px, 1.5vw, 16px);
}

.text {
  font-size: var(--font-size-base);
  line-height: 1.7;
}

.card {
  padding: calc(var(--spacing-unit) * 3);
  gap: var(--spacing-unit);
}