The problem

In EUI are providing multiple color palettes but we are not providing a component that allows users to pick them.

In Maps we are using the following pattern to pick a color palette:

And in our charts section in EUI we have a similar pattern:

Not providing this pattern as a component can lead to different implementations.

Also, we only have one qualitative palette. Allowing different teams to pick different solutions can lead to different issues:

• Most of the available community palettes are not colorblind-safe
• They don't look good in light and dark themes

Can we provide more qualitative palettes that work in light and dark themes and provide a11y?

The solution

The idea is to provide in EUI a component to pick different types of palettes. Allows, customization and allows users to test the palettes in different scenarios (different themes, different data viz).

Color Palette Picker Component

A color palette picker component that allows picking a specific type of palette. Also, it should allow users to create their customized palette.

Color Palette Picker Widget

It would be great to have a way to test/preview all EUI palettes on different data viz. The following image is an initial design idea:

Figma Prototype

You can find it here