Blue ranges from quiet slate to intense cobalt. Choose whether it should carry the reading structure, the primary action or the brand accent before applying it across a page.
Finding palettes for this category.
Adding the next 30 matching palettes.
For interfaces, darker blues often work well for navigation or text-adjacent surfaces while mid blues carry links and primary actions. Very light blues can support selected rows or informational surfaces, but they still need sufficiently dark text.
Build the page from the pale warm canvas, then separate sections with dusty mauve. Keep the violet-gray midtones for large shapes rather than assuming they work for small text.
Ink on Canvas: 12.91:1. Other pairs need their own check.
Use the light canvas for the reading experience and the near-black for headings. Let blue carry actions; violet and pink can distinguish two promotional areas without filling every component.
Ink on Canvas: 18.81:1. Other pairs need their own check.
Use navy for content, pale blue for secondary surfaces and amber only for non-semantic decoration.
Ink on Canvas: 12.29:1. Other pairs need their own check.
| Role | Practical direction |
|---|---|
| Foundation | Choose navy or off-white for the main canvas depending on theme. |
| Primary | Use one mid/deep blue consistently for the main action family. |
| Secondary | A lighter or less saturated blue can support secondary controls and graphics. |
| Accent | Introduce a non-blue color only when hierarchy or data differentiation benefits from it. |