Skip to content

Color Palette generators

Use these color palette generators to create colors that are compatible with your Home Assistant Material 3 theme that matches the lightness and WCAG contrast guidelines to make your card stand out!

Accessible Palette Color System Generator

With the Accessible palette website, you can create Material Design color systems with consistent lightness and contrast. Nice for your custom colors to create matching pairs!

This is your go-to tool for creating lightness compatible colors to add to your Material 3 theme!


Accessible Palette Color System Generator

Color Designer to Create Tints and Shades

Color Designer is great for creating tints and shades, among a few other color combinations.

These tints and shades use the HSL (Hue, Saturation, Lightness) representation of the RGB color model. These are not fully accurate compared to the human perception of lightness. Use the previous one, the accessible palette generator for a better match!


Color Designer Tints and Shades Generator

Paletton Color Palette Generator

Paletton is one of the nice color palette generators around.


Paletton Color Palette Generator

Material Design Palette Generator

Another one is the MCG generator. It is build on the Material Design color scheme, and can generate any swatch based on the central color.


Material Design Color Palette Generator

CIELab colors used for the Cx numbered Example Themes

(From the github page): is a color tool based on human perception. lets you work with colors based on human perception, instead of based on how screens display them.

With, you can:

  • Explore a selected set of color palettes from various brands and design systems, and see how they look in CIELab.
  • Build your own color palette, visualize it in CIELab, and export it into code.

CIELab Custom Color Example

Back to top