Supercharge your colors with the PostCSS color() function

Mihael Tomić — Fri, 25 Oct 2019 09:17:20 +0000

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 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 proposed by Tab Atkins 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 - a plugin to transform W3C CSS color function 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 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.

// Detect dark theme var iframe = document.getElementById('tweet-886335965744082944-986'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=886335965744082944&theme=dark" }

Now we will define variables* using the 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:

Using color function with postcss-inline-svg

One of the tools we use in our everyday projects is 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.

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.