[Meta][Colors] Borealis color palette for data visualizations

Colors New set of colors will bring a new aesthetic to our charts with the goal of creating a consistent look and feel with brand and the product itself.

We picked 10 shades from our new color spectrum that would form the starting point for charts, with a looping mechanism for high cardinality (lot of categories) that would keep on picking colors from the same spectrum up untill 30 categories.

Colors version: Oct 18 2024

10 base colors

'#00BEB8',
'#93E5E0',
'#599DFF',
'#B4D5FF',
'#ED6BA2',
'#FFBED5',
'#F66D64',
'#FFC0B8',
'#ED9E00',
'#FFD569',

11-30 Colors for high cardinality

'#00CBC5',
'#C0F1EE',
'#78B0FF',
'#D2E7FF',
'#F588B3',
'#FFD9E7',
'#FC8A80',
'#FFDAD5',
'#F5AF00',
'#FCE8B0',
'#5DD8D2',
'#D9FDFB',
'#96C3FF',
'#E5F1FF',
'#FBA3C4',
'#FFEBF5',
'#FFA59C',
'#FFE9E5',
'#FEC514',
'#FFF1CC',

Behind Text alternative This color palette would not require any alternative set of colors for charts with superimposed text, all colors picked have contrast with dark grey text higher than 4.5 (required by WCAG accessibility standards)

Neutral colors

Light mode

Muted Grey 10 - #F6F9FC
Muted Grey 30 - #D0D4DA
Muted Grey 60 - #989FAA
Muted Grey 90 - #666D78
Muted Grey 120 - #373D45

Dark mode:

Blue Grey 10 - #F6F9FC
Blue Grey 30 - #C9D4E6
Blue Grey 60 - #89A0C4
Blue Grey 90 - #546D95
Blue Grey 120 - #283C5C

Vis as text All colors have a contrast with background higher than 4.5

Vis as text (Light mode):

Color 0: Teal 100 - #007775
Color 1: Elastic Blue 100 - #004FC7
Color 2: Pink 100 - #A6005E
Color 3: Red 100 - #AF000E
Color 4: Yellow 100 - #8F4F00
Color 5: Green 100 - #00782D
Color 6: Purple 100 - #6E2EB6

Vis as text (dark mode):

Color 0: Teal 60 - #00BEB8
Color 1: Elastic Blue 60 - #599DFF
Color 2: Pink 60 - #ED6BA2
Color 3: Red 60 - #F66D64
Color 4: Yellow 60 - #ED9E00
Color 5: Green 60 - #00BD79
Color 6: Purple 60 - #B082F7

Gradients

Gradients that are currently used in charts such as heatmap should be replaced with new dedicated colors. (probably this will be automatically done by EUI)

Cool: from Blue Grey 10 (#F6F9FC) to Primary 60 (#599DFF)
Negative: from Blue Grey 10 (#F6F9FC) to Danger 60 (#F66D64)
Positive:from Blue Grey 10 (#F6F9FC) to Success 60 (#00BD79)
Grey: from Blue Grey 10 (#F6F9FC) to Shades 60 (#89A0C4)
Temperature: from Primary 60 (#599DFF) to Blue Grey 10 (#F6F9FC) to Danger 60 (#F66D64)
Complementary: from Primary 60 (#599DFF) to Blue Grey 10 (#F6F9FC) to Warning 60 (#ED9E00)
Status: from Success 60 (#00BD79) to Warning 30 (#FFD569) to Danger 60 (#F66D64)

Partition charts

Additional layers/metrics will decrease opacity (1.0 > 0.7 > 0.4)

Grid colors

Light mode: #E1E6EE
Dark mode: #283C5C

Grids will be aligned with the EUI color variable Borders/Subdued

Grid labels colors

Light mode: #666D78
Dark mode: #9EB1CF

Tooltip colors

Tooltip hover Light mode: #EDF1F7 Dark mode: #1B2D49

Tooltip selection Light mode: #E5E9F0 Dark mode: #223553

Tooltip selection color should be aligned with EUI variable Background/Base/Interactive/Select Tooltip hover color should be aligned with EUI variable Background/Base/Interactive/Hover

Additional dedicated semantic colors

There are specific contexts in which colors are used with a semantic meaning, it would be great to uniform this across the product, this set of colors reflects the current need on Discover and it is just a first attempt for an update, needs to be discussed.

Annotations

Color: #E54A91

### Related
- [ ] https://github.com/elastic/kibana/issues/196911

elastic / kibana

[Meta][Colors] Borealis color palette for data visualizations #196910