A design system needs colours with jobs, not a list of favourites. Start from a primary colour and get every role in light, dark and high-contrast themes, each checked and explained.
Account overview
Secondary text explains the figures below.
● Success ▲ Warning ■ Error ◆ Information
Pass: Text and control contrast
All 7 key pairs reach their targets.
Check: Role distinction
Primary and secondary; Primary and information sit close together, so people may read them as the same role.
Check: Colour strength
All the colourful roles are equally strong, so nothing stands out. Consider a quieter accent.
Check: Success and error
These sit 6.4 apart in a deuteranopia simulation, so they could be confused. Always add an icon or a word.
Pass: Light and dark parity
The primary keeps its hue between light and dark, so both read as one brand.
Background #f7fafe
Almost white with a slight tint, which is gentler than pure white on large areas.
Surface #eef2f7
One step from the background, so that cards separate without needing a border.
Elevated surface #ffffff
The lightest surface, which reads as closest to the viewer.
Text primary #2c343c
Solved to at least 7:1 on the hardest surface, which leaves room for thin text.
Text secondary #5c646d
Reaches 4.5:1, so that quieter text stays readable.
Primary #2354b8
Your colour already reaches 4.5:1, so it is used unchanged in hue and very nearly in lightness.
Text on primary #ffffff
White or black, whichever gives more contrast on the primary fill.
Secondary #465c84
The primary hue with less chroma, so that it supports without competing.
Accent #c76a00
A hue well away from the primary, so that it draws the eye. Use it sparingly.
Border #7c8894
Reaches 3:1 for controls and boundaries that carry meaning. Decorative lines can be fainter.
Success #007835
A green at text contrast. Pair it with an icon or word, because many readers cannot separate it from red.
Warning #865900
An amber darkened to reach text contrast, since amber is otherwise too light to read.
Error #b02b27
A red at text contrast. Keep it for real errors, so that it keeps its meaning.
Information #0068a5
A blue at text contrast, chosen to stay clear of the primary where it can.
Use it to start the colour layer of a product or website, or to see whether an existing brand colour can carry buttons and text. Export the roles as CSS variables, SCSS, JSON, a JavaScript object, Tailwind theme values or plain tokens.
The contrast checks use the WCAG 2 ratio, which is a useful floor and not a full measure of readability. Passing them does not make a product accessible, because focus states, text size, motion and real use all matter.
Status colours are meant to go with an icon or a word. Colour alone does not tell everyone what a state means, whatever the numbers say. Brand rules and real interface testing come first.
The primary keeps its hue and is adjusted in OKLCH until it reaches the contrast each theme needs. Neutrals carry a small amount of hue so they do not look dead. Dark themes step surfaces up in lightness and lower chroma, since strong colour vibrates on a dark background. Each check is a stated rule, such as 4.5:1 for body text and 3:1 for interface parts, and you can read which rule produced each result.