Supercharge your colors with the PostCSS color() function
Tags: postcss, css, color, svg
Published: 2019-10-25 09:17:20


Colors provide an atmosphere crucial to our design. They communicate design intentions and send a message to the people. 

In this article, we will take a look how using plugins for [PostCSS](https://github.com/postcss/postcss) can help us in defining a color theme for our website and how to use colors across our project.

## What is the color function?

CSS color function is a [W3C draft](https://drafts.csswg.org/css-color/#modifying-colors) proposed by [Tab Atkins](https://github.com/tabatkins) which will help us to modify base color with the assistance of color-adjusters like hue, saturation, lightness, tint, opacity, etc. If you are familiar with a graphic software like Photoshop, Affinity Photo or any similar software and its adjustments tools, this will sound familiar.

In our case we will use a tool called [postcss-color-function](https://github.com/postcss/postcss-color-function) - *a plugin to transform [W3C CSS color function](http://dev.w3.org/csswg/css-color/#modifying-colors) to more compatible CSS.* 

What is so wonderful about this? After browsers start to fully support specification and implement it, we can kick out the plugins and start using browser native CSS parsing for color function.

## Defining our color theme

To create a functional color theme, we have to define the right colors for our project. The initial setup is important since it will help us create a starting point for simple color usage across all the (Post)CSS files.

We will use a color naming tool from [Colblindor](http://www.color-blindness.com/color-name-hue/) to assign a name to our hex colors. For this demo, we will use color palette created from the Star Wars™ The Last Jedi poster.

{% twitter 886335965744082944 %}

![Color scheme](https://thepracticaldev.s3.amazonaws.com/i/kxidk4t3m38i01ahiaru.png)

Now we will define variables* using the [postcss-simple-vars](https://github.com/postcss/postcss-simple-vars) plugin which gives us the ability to write and use JS-like variables we're familiar from `Sass`. 

```
/** Brand colors **/
$cinnabar: #DF3D2F;
$seal-brown: #080202;

/** Theme colors **/
$color-primary: $cinnabar;
$color-secondary: $seal-brown;
```

We're finished with our setup. From now on - we will use only theme colors in our project.

**You can also use CSS variables which are W3C CR and not fully supported by all browsers. In our workflow we use PostCSS, and I'll use it in the following examples.*



## Practical use cases

There's a lot of stuff we can do with color functions, and I'll cover some of them in following examples. I won't include all the adjusters; you can find them in documentation and explore in detail by yourself. 

The color function accepts many color spaces - you can use RGB, HSL/hwb, browser colors and HEX values and manipulate them.

With the right combination of PostCSS plugins (for nesting, variables and color function) we can quickly create consistent and easily maintainable pseudo states for buttons in our project.

**Button pseudo state**

Our HTML code:

```
<button type="submit">Join me!</button>
```

combined with our PostCSS...

```
button {
  ...
  box-shadow: 1px 1px 3px color(black a(0.2));
  background-color: $color-primary;

  &:hover,
  &:active {
    background-color: color($color-primary lightness(+5%));
    box-shadow: 0px 3px 10px color(black a(0.4));
  }
  
  &:focus {
    background-color: color(black blackness(+10%));
  }
}
```

...gives us a great level of control over the `button` element. We can change our base colors as many times as we want without thinking about what will happen with the pseudo states.

As you can see from compiled CSS, all values are *readable* for all browsers.

```
button {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  background-color: #DF3D2F;
}

button:hover,
  button:active {
  background-color: rgb(226, 83, 70);
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4);
}

button:focus {
  background-color: rgb(196, 58, 46);
}
```



**View functional example on CodePen:**

{% codepen https://codepen.io/mihaeltomic/pen/przMrG/ default-tab=result %}

## Using color function with postcss-inline-svg

One of the tools we use in our everyday projects is [postcss-inline-svg](https://github.com/TrySound/postcss-inline-svg) - "*a plugin to inline SVG and customize its styles*". I find the combination of these two plugins handy. Since CodePen does not support inline-svg plugin, I'll try to reproduce it through images and code examples.

**Source PostCSS**

```
.icon--empire {
    background-image: svg-load(../images/icon-delete.svg, fill: color($color-secondary lightness(+30%)));

  &:hover {
      background-image: svg-load(../images/icon-delete.svg, fill=$color-primary);
  }
}
```


**Compiled CSS**

```
.icon--empire {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23030303' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");

  &:hover {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23DF3D2F' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
      
  }
}
```



PostCSS would produce an SVG icon in `base64` after compiling. 

![](/img/blog/SuperchargeColorFunction/empire-crest.svg)

**The good** 

The good thing about this approach is that you can generate icons easily through CSS and have color control for fill and stroke. All icons are in one place and can be used across as utils.

**The bad**

There's no way (as far as I know) to add CSS classes and animate SVG through CSS paths or other elements in SVG. Also, there's no SVG code in our markup.



## To wrap it up

The **color() function** is a **powerful tool** and can be used in many creative ways. After browsers start to support it fully, we will see its full potential. For now, we have tools to help us unlock that potential and use its benefits today.


---

This one is an old article I wrote for [Mono](https://mono.software/2017/08/08/supercharge-your-colors/), but I feel it also belongs here, on Dev.to community.