Colors

Each PrimeReact theme exports its own color palette.

Getting Started

Colors are exported as CSS variables and used with the standard var syntax such as var(--text-color).


<span style={{ color: var(--text-color) }} />

General Colors

These are common variables used throughout the theme.

Variable	Description
--text-color	Font text color.
--text-secondary-color	Muted font text color with a secondary level.
--primary-color	Primary color of the theme.
--primary-color-text	Text color when background is primary color.
--font-family	Font family of the theme.
--inline-spacing	Spacing between to adjacent items.
--border-radius	Common border radius of elements.
--focus-ring	Box shadow of a focused element.
--mask-bg	Background of an overlay mask.

Color Palette

A palette consists of 9 colors where each color provides tints/shades from 50 to 900.


<div style={{ backgroundColor: var(--blue-500) }} />

blue-50

blue-100

blue-200

blue-300

blue-400

blue-500

blue-600

blue-700

blue-800

blue-900

green-50

green-100

green-200

green-300

green-400

green-500

green-600

green-700

green-800

green-900

yellow-50

yellow-100

yellow-200

yellow-300

yellow-400

yellow-500

yellow-600

yellow-700

yellow-800

yellow-900

cyan-50

cyan-100

cyan-200

cyan-300

cyan-400

cyan-500

cyan-600

cyan-700

cyan-800

cyan-900

pink-50

pink-100

pink-200

pink-300

pink-400

pink-500

pink-600

pink-700

pink-800

pink-900

indigo-50

indigo-100

indigo-200

indigo-300

indigo-400

indigo-500

indigo-600

indigo-700

indigo-800

indigo-900

teal-50

teal-100

teal-200

teal-300

teal-400

teal-500

teal-600

teal-700

teal-800

teal-900

orange-50

orange-100

orange-200

orange-300

orange-400

orange-500

orange-600

orange-700

orange-800

orange-900

bluegray-50

bluegray-100

bluegray-200

bluegray-300

bluegray-400

bluegray-500

bluegray-600

bluegray-700

bluegray-800

bluegray-900

purple-50

purple-100

purple-200

purple-300

purple-400

purple-500

purple-600

purple-700

purple-800

purple-900

red-50

red-100

red-200

red-300

red-400

red-500

red-600

red-700

red-800

red-900

gray-50

gray-100

gray-200

gray-300

gray-400

gray-500

gray-600

gray-700

gray-800

gray-900

primary-50

primary-100

primary-200

primary-300

primary-400

primary-500

primary-600

primary-700

primary-800

primary-900

Surfaces

In addition, a theme brings a special palette called surfaces that can be used as the base when designing the surface layers and separators.

surface-0

surface-50

surface-100

surface-200

surface-300

surface-400

surface-500

surface-600

surface-700

surface-800

surface-900

A theme also exports named surfaces for common use cases.

Variable	Description
--surface-ground	Base ground color.
--surface-section	Color of a section on a ground surface.
--surface-card	Color of a surface used as a card.
--surface-overlay	Color of overlay surfaces.
--surface-border	Color of a divider.
--surface-hover	Color of an element in hover state.