LobeChatLobeHub
UI
Components
Chat
Mobile
Awesome
Brand
Mdx
Color
Changelog
Ctrl K
ColorScales

ColorScales

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.

import { ColorScales } from '@lobehub/ui/color';
NPM
UNPKG
BundlePhobia
PackagePhobia
Anvaka Graph
Source
Edit

Resources

Lobe UI-AIGC Components
Lobe Icon-AI / LLM Icon Collection
Lobe Charts-Modern Charts
Lobe TTS-TTS / STT Library

Community

Report Bug
Request Feature

Help

GitHub
Changelog

More Products

🤯 Lobe Chat-AI / LLM Chat Framework
🧸 Lobe Vidol-Virtual Idols for EveryOne
🅰️ Lobe Theme-Stable Diffusion Extension
🌐 Lobe i18n-AI i18next CLI
Copyright © 2022-2025
Made with 🤯 by LobeHub
LobeHub

Primary

Colors

Red

Volcano

Orange

Gold

Yellow

Lime

Green

Cyan

Blue

Geekblue

Purple

Magenta

Neutral

Gray

Extra Neutral

Mauve

Olive

Sage

Sand

Slate

1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA
1
2
3
4
5
6
7
8
9
10
11
light
lightA
dark
darkA