Shades of Gray with color-mix()

Greys. Who doesn’t love ’em? In relation to constructing web sites, it may be useful having just a few shades of gray at your disposal, irrespective of your color palette. We use them for borders and refined dividers, shadows, and to point state modifications with out overwhelming the person with color. Some designers really feel {that a} web site wants fairly just a few shades of gray so as to convey subtleties. I as soon as labored on a venture that actually had 50 shades of gray.

In case your native language is American English, you is likely to be somewhat vexed by my spelling of “gray” right here. Sorry, not sorry. Fortunately, CSS named colors are very inclusive relating to greys. All flavours of gray are available US/UK variants — take your decide from these beauties:

• lightgrey/lightgray
• gray/grey
• darkgrey/darkgray (which is lighter than gray/grey!)
• lightslategrey/lightslategray
• slategrey/slategray
• darkslategrey/darkslategray
• dimgrey/dimgray
• whitesmoke (technically a gray)
• silver (additionally gray)

They’re in all probability not going to chop it for all of your UI wants although. What we would like is a pleasant choice of greys that complement our color palette. We may after all use a color picker and our favorite design software (boring). Or we may create a palette of greys with the CSS color-mix() operate (yaaaay!). Let’s go together with the second possibility.

A primer on color-mix()

The color-mix() operate allows us to combine percentages of two colours and output the end result. To make use of it, we have to specify three arguments: the color interpolation technique, and the 2 colors we wish to combine. We will specify the proportions of every color as percentages. If we omit these they’ll be combined 50/50, or we will specify certainly one of them and the opposite shall be scaled in order that they toal 100%.

/* 50% crimson, 50% blue */
color-mix(in srgb, crimson, blue)

/* 60% crimson, 40% blue */
color-mix(in srgb, crimson 60%, blue)

/* 60% crimson, 40% blue */
color-mix(in srgb, crimson, blue 40%)

If we wish to get into the particulars there’s a bit extra to discover, particularly relating to understanding how totally different color interpolation strategies function. I wrote a primer on color-mix() for MDN when you’re , and loads of cleverer folks have written extensively concerning the internal workings of varied color areas, gamuts and interpolation strategies. I like to recommend Chris Lilley’s discuss from CSS Day if you wish to get a deal with on simply how mind-bending color could be. If ever there was a subject that’s ripe for melting your mind, it’s color on the net. However assuming you simply wish to combine a few colors, color-mix() itself on the entire it’s fairly intuitive.

What even is gray, anyway?

Let’s get again to gray (the lesser recognized Amy Winehouse album). We’re taught as youngsters that gray comes from mixing black and white. That’s true in that it actually provides us shades of gray, however relating to design, our selections of gray are usually much less black and white (LOL). We would wish to use hotter or cooler gray tones, which combine in somewhat little bit of color, and but we’ll nonetheless check with the outcomes as “gray” in our color palette or design system.

Easy greys with color-mix()

We will combine black and white with the color-mix() operate to create varied shades of gray, from gentle to darkish. Right here we’ll combine them in increments of 20%, from 20% black/80% white to 80% black/20% white, storing these as customized properties in order that we will use them anyplace in our CSS. (The preliminary --grey variable, as we noticed within the earlier instance, resolves to 50% black/50% white).

:root {
  --grey: color-mix(in oklch, black, white);

  --grey-20: color-mix(in oklch, black 20%, white);
  --grey-40: color-mix(in oklch, black 40%, white);
  --grey-60: color-mix(in oklch, black 60%, white);
  --grey-80: color-mix(in oklch, black 80%, white);
}

We solely want to incorporate a proportion for certainly one of our colors (black on this case), the second shall be implied.

After all, when you actually do need 50 shades of gray, go forward and create as many variables as you want. Heck, even stick some calc() in there, I don’t thoughts.

:root {
  --steps: 50;
  --increment: calc(100% / var(--steps));

  --grey-1: color-mix(in oklch, black var(--increment), white);
  --grey-2: color-mix(in oklch, black calc(var(--increment) * 2), white);
  --grey-3: color-mix(in oklch, black calc(var(--increment) * 3), white);
  /* and so forth. */
}

A aspect observe on color areas (I’ll preserve it temporary, I promise): We’re utilizing oklch right here as a result of colors on this house are perceptually uniform. That signifies that the share distinction between the colors (properly, greys) shall be perceived by the viewer as being equal. If we examine the identical 5 shades of gray within the srgb house we will see there’s a distinction.

See the Pen
Shades of gray with color-mix() by Michelle Barker (@michellebarker)
on CodePen.

Lea Verou has an amazing article on LCH colors in CSS, together with what perceptual uniformity really means.

Gray tones

Now let’s create some hotter and cooler gray tones by mixing one other color with our gray variables. Sure, that’s proper, we will combine the colors which can be output from color-mix().

For our cooler greys, we’ll combine in somewhat little bit of blue. We’re utilizing the CSS named color blue, which equates to rgb(0 0 255), however be at liberty to make use of any blue or blue-ish color in no matter color house takes your fancy. We’re going to combine the identical quantity of color into every of our gray shades, so let’s create a “mixer” customized property. That approach, if we wish to tinker with our blue tone we solely have one place we have to do it.

:root {
  --blue-mixer: blue 10%;
}

Then we’ll use color-mix() to combine this into our unique set of greys, creating a brand new set of customized properties:

:root {
  --blue-grey: color-mix(in oklch, var(--grey), var(--blue-mixer));

  --blue-grey-20: color-mix(in oklch, var(--grey-20), var(--blue-mixer));
  --blue-grey-40: color-mix(in oklch, var(--grey-40), var(--blue-mixer));
  --blue-grey-60: color-mix(in oklch, var(--grey-60), var(--blue-mixer));
  --blue-grey-80: color-mix(in oklch, var(--grey-80), var(--blue-mixer));
}

Maybe these are too blue for you? You possibly can, after all tone down or dial up the blue by adjusting the share worth within the --blue-mixer customized property.

We will do the identical with a crimson hue to create some heat greys too. Take a look at the total demo beneath. Who mentioned gray must be boring?

See the Pen
Shades of gray with color-mix() by Michelle Barker (@michellebarker)
on CodePen.