[Lobsters 요약] CSS의 oklch() 함수를 활용한 동적 색상 팔레트 생성 기법
3
설명
CSS의 oklch() 함수와 상대 색상 기능을 활용하여 단일 색상 코드로부터 동적으로 색상 팔레트를 생성하는 기법이 소개되었습니다.
이 기법은 웹사이트의 색상 관리를 효율화하고 유지보수성을 높이는 데 기여합니다.
2026년 4월 29일 기준으로, 이 기술은 웹 디자인의 새로운 가능성을 제시하고 있습니다.
### 배경 설명
웹 디자인에서 색상 관리는 일관성 유지와 효율적인 유지보수를 위해 중요한 과제입니다. 기존에는 디자이너나 개발자가 직접 다양한 색상 값을 정의하거나, JavaScript를 사용하여 동적으로 색상을 생성하는 경우가 많았습니다. 이는 작업의 복잡성을 증가시키고, 색상 변경 시 상당한 노력이 필요했습니다. 특히, 웹사이트 전체에 걸쳐 일관된 색상 톤을 유지하면서도 다양한 명도와 채도를 가진 색상들을 생성하는 것은 까다로운 작업이었습니다.
최근 CSS 표준에 추가된 oklch() 색상 함수는 색상을 명도(Lightness), 채도(Chroma), 색조(Hue)의 세 가지 축으로 표현할 수 있게 하여, 색상 간의 관계를 직관적으로 이해하고 조작할 수 있도록 합니다. 이러한 oklch() 함수와 CSS 변수, 그리고 `calc()` 함수를 결합하면, 단 몇 개의 기본 색상 코드만으로도 복잡하고 일관성 있는 색상 팔레트를 프로그래밍 방식으로 생성할 수 있습니다. 이는 웹 디자인 프로세스를 간소화하고, 디자이너와 개발자가 색상 시스템을 더욱 유연하게 관리할 수 있도록 돕는 중요한 발전입니다.
### okclh() CSS 함수 소개
okclh() CSS 함수는 색상을 명도(Lightness), 채도(Chroma), 색조(Hue)의 세 가지 구성 요소로 정의하여 색상을 생성하는 기능입니다. 예를 들어, 웹사이트에서 사용되는 파란색 `#007ab8`은 oklch() 함수를 통해 `oklch(55.48% 0.131 241.70)`으로 표현될 수 있습니다. 이 함수의 가장 큰 장점은 색조(Hue) 값을 고정한 상태에서 명도와 채도를 조절하여 다양한 톤의 색상을 쉽게 생성할 수 있다는 점입니다. 예를 들어, `oklch(48% 0.131 241.70)`과 같이 명도를 낮추면 더 어두운 파란색 계열을 만들 수 있습니다. oklch() 외에도 rgb(), oklab() 등 다양한 색상 함수가 존재하지만, oklch()는 색상 조작의 직관성 면에서 유리하다고 평가됩니다.
### 상대 색상(Relative Colors)과 동적 색상 생성
okclh() 함수를 사용하여 색상 팔레트를 수동으로 생성하는 것은 번거로울 수 있습니다. 여기서 상대 색상 기능이 유용하게 사용됩니다. `from` 연산자와 함께 기존 색상 값(HEX 코드 또는 다른 색상 함수)을 전달하면, oklch() 함수는 해당 색상을 자동으로 l, c, h 값으로 변환합니다. 예를 들어, `:root { --color-blue: oklch(from #007ab8 l c h); }`와 같이 정의할 수 있습니다. 더 나아가, `calc()` 함수를 활용하여 이러한 변환된 값들을 프로그래밍 방식으로 조절할 수 있습니다. `:root { --color-blue-darker: oklch(from #007ab8 calc(l - 0.05) c h); }`와 같이 명도를 5% 낮추는 방식으로 더 어두운 파란색을 생성할 수 있습니다. 이 기능은 원본 색상 값을 직접 알 필요 없이 동적으로 색상을 조정할 수 있게 해줍니다.
### 11가지 색상 팔레트 자동 생성
단일 HEX 코드 `#007ab7`로부터 11가지 색상으로 구성된 팔레트를 생성하는 과정은 다음과 같습니다. 먼저, 기본 색상을 CSS 변수 `--color`로 정의합니다. 이후 `--color-05`부터 `--color-95`까지의 변수를 생성하며, 각 변수에 대해 `oklch(from var(--color) [명도 조절값] c h)` 형태로 정의합니다. 초기에는 명도만 조절하고 채도(c)는 그대로 유지합니다. 하지만 가장 밝거나 어두운 색상의 채도가 과도하게 높아 보일 수 있으므로, `calc()` 함수와 수학적 연산을 사용하여 팔레트의 양 끝으로 갈수록 채도를 점진적으로 낮춥니다. 예를 들어, `--color-05`의 채도는 `calc(0.08 * (c / .2))`와 같이 계산하여 원본 채도 값보다 낮게 설정합니다. 이 과정을 통해 시각적으로 더욱 조화롭고 부드러운 색상 팔레트를 얻을 수 있습니다.
### 수동 채도 조절 및 CSS의 프로그래밍적 특성
특정 색상의 채도가 너무 높거나 낮아 원하는 결과가 나오지 않을 경우, 수동으로 채도를 조절할 수 있는 기능도 제공됩니다. 이를 위해 `--chroma`라는 새로운 CSS 변수를 도입하고, `calc()` 함수 내에서 기본값 `c / .2` 대신 `--chroma` 변수를 사용하도록 설정합니다. 예를 들어, `#007ab7` 색상의 기본 채도 값은 약 `0.65`인데, `--chroma`를 `0.95`로 설정하면 훨씬 더 밝고 생생한 색상을 얻을 수 있습니다. 이처럼 CSS 변수와 `calc()` 함수를 조합하면, 복잡한 색상 조작을 프로그래밍 방식으로 수행할 수 있으며, 이는 CSS가 단순한 스타일링 언어를 넘어 강력한 프로그래밍 언어로서의 면모를 갖추고 있음을 보여줍니다. 이러한 기능은 Kelp UI와 같은 라이브러리에 통합되어 더욱 편리하게 사용될 것으로 기대됩니다.
### 가치와 인사이트
CSS의 `oklch()` 함수와 상대 색상, 그리고 `calc()` 함수를 결합하는 기법은 웹 디자인에서 색상 팔레트 생성 및 관리의 효율성을 극적으로 향상시킵니다. 단일 기본 색상 코드로부터 동적으로 다양한 명도와 채도를 가진 일관성 있는 색상 세트를 생성할 수 있어, 디자인 시스템 구축 및 유지보수에 드는 시간과 노력을 크게 절감할 수 있습니다. 또한, 디자이너와 개발자는 색상 시스템을 더욱 유연하게 제어하고 실험할 수 있게 되며, 이는 웹사이트의 시각적 통일성과 사용자 경험을 개선하는 데 직접적으로 기여합니다. 이 접근 방식은 CSS가 단순한 스타일링을 넘어 복잡한 로직을 처리할 수 있는 프로그래밍적 능력을 갖추고 있음을 명확히 보여줍니다.
### 기술·메타
- CSS
- oklch()
- Relative Colors
- CSS Variables
- calc()
- Kelp UI (fork)
### 향후 전망
CSS의 `oklch()` 함수와 상대 색상 기능을 활용한 동적 색상 생성 기법은 웹 디자인 커뮤니티에서 점차 채택될 것으로 예상됩니다. 이는 웹 표준의 발전과 함께 더욱 정교하고 사용자 친화적인 색상 관리 도구 및 라이브러리의 등장을 촉진할 것입니다. 경쟁 측면에서는, 이러한 고급 CSS 기능을 지원하는 디자인 시스템 프레임워크나 UI 라이브러리들이 주목받을 가능성이 높습니다. 또한, 개발자들은 JavaScript에 의존하지 않고 순수 CSS만으로도 복잡한 시각 효과를 구현할 수 있게 됨에 따라, 웹 성능 최적화에도 긍정적인 영향을 미칠 수 있습니다. 앞으로 이 기술이 어떻게 발전하고 다양한 프로젝트에 적용될지 주목할 필요가 있습니다.
📝 원문 및 참고
- Source: Lobsters
- 토론(Lobsters): [lobste.rs](https://lobste.rs/s/ipiook/generative_colors_with_css)
- 원문: [링크 열기](https://gomakethings.com/articles/generative-colors-with-css/)
---
출처: Lobsters · [원문 링크](https://gomakethings.com/articles/generative-colors-with-css/)
신고 · 불법·유해·아동 안전(CSAE) 관련 콘텐츠
댓글 0
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.