# Calculating Color: Dynamic Color Theming with Pure CSS

DevFeed: [Calculating Color: Dynamic Color Theming with Pure CSS](<https://devfeed.tech/articles/calculating-color-dynamic-color-theming-with-pure-css-28789.md>)

Original publisher: [Read original article](<https://una.im/css-color-theming/>)

Published: 2019-12-05T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [color](<https://devfeed.tech/topics/color.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Vanilla JavaScript](<https://devfeed.tech/topics/vanilla-js.md>)

Tags: [color](<https://devfeed.tech/tags/color.md>), [css](<https://devfeed.tech/tags/css.md>), [internet-explorer](<https://devfeed.tech/tags/internet-explorer.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [properties](<https://devfeed.tech/tags/properties.md>), [property](<https://devfeed.tech/tags/property.md>), [themes](<https://devfeed.tech/tags/themes.md>), [variable](<https://devfeed.tech/tags/variable.md>)

## AI overview

This tutorial explains how to build dynamic color themes using pure CSS, custom properties, HSL values, and calc(). It demonstrates recreating common color transformations, including lightening, darkening, analogous, complementary, and triadic colors, without JavaScript or a CSS preprocessor for modern browsers.

## Source excerpt

Did you know that you can build custom dynamic color themes without the use of JavaScript or a CSS preprocessor!? Read on!