Color Palette
The UI Kit color palette is designed to provide consistent visual language for data-rich enterprise applications. Each color spans from 50 (lightest) to 950 (darkest), offering flexibility and accessibility across light and dark modes.
Avoid using raw palette values directly in your code. Use color tokens
instead (e.g. theme.colors.primary) to ensure visual consistency, theme
support, and accessibility across the system.
If needed (e.g. for data visualizations or custom elements), you can access palette values via the theme.palette object:
import { theme } from "@hitachivantara/uikit-react-core";
const MyComponent = () => (
<div style={{ color: theme.palette.blue[500] }}>
This text uses a raw palette color.
</div>
);Slate
50
100
200
300
400
500
600
700
800
900
950
Neutral
50
100
200
300
400
500
600
700
800
900
950
Blue
50
100
200
300
400
500
600
700
800
900
950
Red
50
100
200
300
400
500
600
700
800
900
950
Amber
50
100
200
300
400
500
600
700
800
900
950
Orange
50
100
200
300
400
500
600
700
800
900
950
Yellow
50
100
200
300
400
500
600
700
800
900
950
Lime
50
100
200
300
400
500
600
700
800
900
950
Green
50
100
200
300
400
500
600
700
800
900
950
Teal
50
100
200
300
400
500
600
700
800
900
950
Cyan
50
100
200
300
400
500
600
700
800
900
950
Sky
50
100
200
300
400
500
600
700
800
900
950
Indigo
50
100
200
300
400
500
600
700
800
900
950
Violet
50
100
200
300
400
500
600
700
800
900
950
Fuchsia
50
100
200
300
400
500
600
700
800
900
950
Pink
50
100
200
300
400
500
600
700
800
900
950
Rose
50
100
200
300
400
500
600
700
800
900
950
Purple
50
100
200
300
400
500
600
700
800
900
950
Emerald
50
100
200
300
400
500
600
700
800
900
950