PatternFly v6 chart color tokens.
Hex values verified against patternfly-react test snapshots (light theme).
Use multiOrdered for categorical data (bars, pie slices) and multiUnordered
for time-series with multiple series (stacked area, multi-line).
Blue 100 — #92c5f9. Lightest, used for tertiary fills.
Blue 200 — #4394e5. Secondary series.
Blue 300 — #0066cc. Primary series / active states.
Blue 400 — #004d99. Dark series.
Blue 500 — #003366. Darkest series.
Green 100 — #bde5b8.
Green 200 — #7cc674.
Green 300 — #4cb140.
Green 400 — #38812f.
Green 500 — #23511e.
Teal 100 — #a2d9d9.
Teal 200 — #73c5c5.
Teal 300 — #009596.
Teal 400 — #005f60.
Teal 500 — #003737.
Gold 100 — #f9e0a2.
Gold 200 — #f6d173.
Gold 300 — #f4c145.
Gold 400 — #f0ab00.
Gold 500 — #c58c00.
Orange 100 — #f4b678.
Orange 200 — #ef9234.
Orange 300 — #ec7a08.
Orange 400 — #c46100.
Orange 500 — #8f4700.
Axis line and tick color — #c7c7c7.
Grid line color — #c7c7c7.
Tick label and legend text color — #383838.
Default chart background — #ffffff.
Blue color family — five shades of PF6 blue from primary outward.
Use this when you want a monochromatic, on-brand palette (e.g. a grouped bar chart where each series is a different blue shade). Ordered from most to least prominent so the first series draws the eye.
Bar.fromData categories values
|> Bar.withColors Colors.blueFamilyMulti-ordered color scale for categorical data — cycles through blue, green, teal, gold, orange for maximum categorical contrast.
Bar.fromData categories values
|> Bar.withColors Colors.multiOrderedMulti-unordered color scale for time-series data — keeps series visually distinct across a full time axis (area charts, multi-line charts).
White — #ffffff.
Black — #151515.
PF6 primary blue —
#0066cc.