Color Resources

There's no one-size-fits-all when it comes to choosing the perfect tool for your needs.

From color contrast plugins for Figma to web-based contrast grids, we've collected the tools that we know and love, all in one place.

Starting a new project or brand? Your color palette sets the tone for the entire design. Sometimes you need a little help to inspire new color combinations.

Her are our favorite tools to generate palettes. These are your starting point, they likely won’t meet your a11y needs by default.

Now that you have created your accessible color palette, you can use that palette to create stunning gradient backgrounds. In this section we will share some code snippets and resource to help you generate these gradients in CSS.

Remember to maintain your color contrast ratios!

The times of RGB/HSL colors might be over soon! Meet high-definition colors with LCH, okLCH, LAB, okLAB that give access to 50% more colors — available in modern displays and supported by modern browsers

Read how Stripe approached their color system.

For those on the autism spectrum, particular colors can profoundly influence how they experience their environment. This guide is here to help you identify the most effective hues for an optimized and comfortable space and experience —and discover what colors are best suited to some individuals on the spectrum.

Having light and dark mode options has become more standard these days. Did you know that dark mode or night mode is often preferred for users with low vision? In this section we will share resources on how to design dark mode interfaces and some tools that might be helpful.