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

[gvnmagni]

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

Preview Give feedback

1. [Colors] High contrast color palette #196911
   1 of 2
   Feature:Lens Team:Visualizations +2
   

[elasticmachine]

Pinging @elastic/kibana-visualizations (Team:Visualizations)

[nickofthyme]

Closed by #201015