ColorChart's color prop takes and array of swatch objects and renders a Swatch for each one. At the very minimum each object must include a color key.
Each Swatch is capable of rendering three different text elements: A heading, label, and the value. Each of those is rendered automatically using the heading, label, and color keys inside the swatch object respectively.
Heading
Value
Label
Label
Value
const colors = [
{
label: '900',
color: '#1A237E'
},
{
label: '800',
color: '#283593'
},
{
heading: 'Teal',
label: '700',
color: '#303F9F',
}
];
<ColorChart colors={colors} />900
#1A237E
800
#283593
700
#303F9F
600
#3949AB
Indigo
#3F51B5
500
400
#5C6BC0
300
#7986CB
200
#9FA8DA
100
#C5CAE9
50
#E8EAF6
900
#004D40
800
#00695C
700
#00796B
600
#00897B
Teal
#009688
500
400
#26A69A
300
#4DB6AC
200
#80CBC4
100
#B2DFDB
50
#E0F2F1
900
#311B92
800
#4527A0
700
#512DA8
600
#5E35B1
Deep Purple
#673AB7
500
400
#7E57C2
300
#9575CD
200
#B39DDB
100
#D1C4E9
50
#EDE7F6
Example using dynamic swatch label and copy color to clipboard on click:
Evening Sea
#004D40
Genoa
#00695C
Pine Green
#00796B
Elf Green
#00897B
Persian Green
#009688
Keppel
#26A69A
Tradewind
#4DB6AC
Monte Carlo
#80CBC4
Jagged Ice
#B2DFDB
Aqua Squeeze
#E0F2F1