# Change the color of a webpage dynamically using JS and CSS

> Learn how to change a web page colors on the fly with JavaScript and the CSS filter property, switching between pastel, grayscale, and normal modes.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2023-11-08 | Topics: [JavaScript](https://flaviocopes.com/tags/js/) | Canonical: https://flaviocopes.com/change-the-color-of-a-webpage-dynamically-using-js-and-css/

Here’s how to dynamically change a web page’s colors using the CSS filter property and [JavaScript](https://flaviocopes.com/javascript/):

```javascript
<a href='javascript:document.querySelector("html").setAttribute("style","filter: saturate(60%) brightness(80%);")'>
  pastel
</a>

<a href='javascript:document.querySelector("html").setAttribute("style","filter: grayscale(100%); ")'>
  grayscale
</a>

<a href='javascript:document.querySelector("html").setAttribute("style","filter:  ")'>
  normal
</a>
```