Color Tokens
Color tokens can be accessed through the theme.colors object:
import { theme } from "@hitachivantara/uikit-react-core";
const MyComponent = () => (
<div style={{ color: theme.colors.primary }}>
This text uses the semantic primary color.
</div>
);Primary
Core brand colors used for main actions, primary buttons, and high-priority UI elements.
primary#2563EBprimaryDeep#1E40AFprimaryStrong#1D4ED8primarySubtle#BFDBFEprimaryDimmed#DBEAFEPositive
Colors that convey success, confirmation, progress, or completed states in the interface.
positive#059669positiveDeep#065F46positiveStrong#047857positiveDimmed#ECFDF5positiveSubtle#D1FAE5positiveBorder#A7F3D0Warning
Attention-grabbing tones that signal caution, potential issues, or important notices.
warning#F59E0BwarningDeep#B45309warningStrong#D97706warningDimmed#FFFBEBwarningSubtle#FEF3C7warningBorder#FDE68ANegative
Strong colors that indicate errors, critical alerts, or destructive and irreversible actions.
negative#DC2626negativeDeep#991B1BnegativeStrong#B91C1CnegativeDimmed#FEF2F2negativeSubtle#FEE2E2negativeBorder#FECACAInfo
Neutral tones used for tips, contextual content, and non-critical informative messages.
info#0EA5E9infoDeep#0369A1infoStrong#0284C7infoDimmed#F0F9FFinfoSubtle#E0F2FEinfoBorder#BAE6FDAccent
Vibrant complementary colors used for highlights, decorative elements, and emphasis.
accent#4F46E5accentDeep#3730A3accentStrong#4338CAaccentSubtle#E0E7FFaccentDimmed#EEF2FFaccentBorder#C7D2FEText
Colors used for readable body text, headings and captions.
text#334155textSubtle#64748BtextDisabled#A3A3A3textDimmed#94A3B8textLight#F8FAFCtextDark#334155Background
Surface colors applied to pages, sections, containers, modals, and overlays.
bgPage#F1F5F9bgContainer#F8FAFCbgPageSecondary#E2E8F0bgContainerSecondary#F1F5F9bgHoverbgDisabled#E5E5E5bgOverlayBorder
Subtle lines used to define component edges, dividers, inputs, and visual boundaries.
border#CBD5E1borderSubtle#E2E8F0borderStrong#64748BborderDisabled#A3A3A3