This is not a palette generator.
‍
I built Color Grid to help other designers not only create palettes but also help them understand what goes into an "accessibility-first" color system. The creation of this tool started in 2017 when my developer Reid Braswell created a version of this tool for me when I reworked CarMax's entire color system. 8 years later I learned Cursor so I could create a modern version that anyone could use.

You might have heard the phrase “accessible color system" or “accesibility baked in" said a lot in past years but it rarely gets a proper definition. Here's my attempt.

Here's a secret that IBM Carbon, Google Material, and Salesforce Lightning have known for awhile.

Colors with the same perceptual lightness value in the CIE-LAB color space have the same contrast ratios. This means you can ensure accessible combinations if every palette adheres to the same lightness values.

This secret is the reason I built Color Grid. Every designer should be able to benefit from this knowledge but have the flexibility to create their own palettes.

The definition of smoothness is where Color Grid can get subjective which is why every input in the tool can be changed by the user. But one thing that makes any system set up for success is the idea of symmetry. Equal values of light and dark swatches and the concept of "pairings".

Each swatch in your palette benefits from having a counterpart so that light mode and dark mode is easy to implement. For example, a swatch with a lightness value of 82 should have a counterpart with a lightness value of 18. This pairing concept allows you to swap the swatches between light mode and dark mode and contrast ratios remain nearly identical.