Grayscale Design is a Color Value-First approach for design.

Color Value is one of the most important attributes of design and art. But... all too often it just gets discarded like a wet sock. 🧦 ewww... nobody wants that!

It's time to bring Color Value to center stage! 🤘

Try Color Palette Generator → or read on...

In web design/development, you hear a lot about making your websites more "accessible". And one aspect of that accessibility is making sure there's enough contrast between your background and your content. For example:

ALL THE FEELS!

Y U HATE ME?

Getting the right contrast is super important for your design, and is easy to do if you're only using black and white... but getting the contrast just right with color is another story...

PROBLEM: Getting great contrast using color is tough.

Without understanding color value well, picking colors is kinda like Bingo night without the glorious geriatric comradery. (Shout out to my Granny! Love you!)

White text on a blue background (even a lighter blue) is likely going to have better contrast and readability than white text on a yellow background.

NOT TOO BAD

I NEED HELP!

SOLUTION: Don't use color.*

* At least not at first. Let me explain...

What if... you designed everything in grayscale first... to get the contrast just right. And then, you came back when you were done and swapped out those grays with colors that had the same color value?

Hold up... but can't you already do that with HSL (Hue, Saturation, Lightness) format? TL;DR: Doesn't work because "Lightness" is not Color Value. Oh, by the way, it's pretty much the same story for HSV (Hue, Saturation, Value). 😿

HSL Debunked: Both colors below have 70% Lightness, but the yellow-brown has a much lighter color value. You can tell by how easy it is to read the gray text on one and not the other. 🤦‍♂️

hsl(50, 50%, 70%)

hsl(0, 50%, 70%)

Not so easy, eh? You can't just swap one color for another and expect the same result... unless you use Luminance!

gold-500 / #EAB436

red-500 / #EAAEAB

Here, the text appears to have the same contrast with the background because they have the same Luminance (or "apparent lightness" or "color value")!

Using a consistent palette that's Color Value-First and Luminance-Based makes finding good color combos WAY easier too. Finally, you don't have to fiddle with that color picker for eternity!

As if it wasn't obvious enough already, the colors in the last example were generated (easily) using the grayscale design Luminance-Based Color Palette Generator. You gotta try it out! 🚀

...Wait, did someone say, "Bingo!"? 😜

What is Grayscale Design?