The ColorScales component is a memoized component used to display a color scale. It receives props containing the name of the scale, the color scale items, and a number representing the index of the mid-highlight. The component renders a set of ScaleRow components, each representing a different part of the color scale.
ColorScales
import { ColorScales } from '@lobehub/ui/color';Primary
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Colors
Red
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Volcano
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Orange
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Gold
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Yellow
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Lime
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Green
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Cyan
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Blue
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Geekblue
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Purple
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Magenta
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Neutral
Gray
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Extra Neutral
Mauve
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Olive
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Sage
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Sand
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
Slate
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA