Ocean Product
#03045E#0077B6#00B4D8#90E0EF#CAF0F8
The navy-to-cyan progression creates a usable depth scale. Treat #03045E as the anchor, #0077B6 as a strong action color, and the two palest blues as surfaces rather than text colors.
Blue Color Palettes with HEX Codes
Blue can span quiet product neutrals, vivid cyan accents, and deep navy foundations, so a useful blue palette needs more than five similar swatches. Build a clear tonal range, then decide which blue is structural, which is interactive, and whether a contrasting accent is needed.
Showing 30 palettes
Browse filters
Browse by color, mood, style, or theme. Pick a tag to see matching palettes.
How to build with blue 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.
SaaS Blue
#0A1128#001F54#034078#1282A2#FEFCFB
This set has a near-black navy and an off-white endpoint, so it can support a complete light interface. #1282A2 is better as an accent or data color than as body text on white without checking contrast.
Soft Sky
#1D3557#457B9D#A8DADC#F1FAEE#E63946
The red #E63946 intentionally breaks the blue family. Use it for a small emphasis or status role so primary actions are not visually indistinguishable from every blue element.
Assign colors to real roles
| 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. |
Good use cases
- SaaS and product interfaces that need a broad interactive blue scale.
- Editorial or campaign layouts combining navy structure with bright accents.
- Dashboards where multiple blue tones represent ordered intensity, not unrelated categories.
Mixing fresh colors...
Colorrow is arranging palettes for your selected style.
Adding more palettes...
Adding the next 30 matching palettes.