Shades of Blue
A complete guide to blue shades with hex codes, RGB, and HSL values. From deep navy to pale ice blue — every shade with copy-ready colour values.
Blue is one of the most versatile colours in UI design. It signals trust, stability, and calm — which is why it dominates fintech, SaaS, and healthcare products. The range from deep navy to pale ice blue gives designers a wide spectrum to work with, from high-contrast dark backgrounds to subtle tinted whites.
Using Blue Shades in UI Design
Dark blues like Navy Blue and Royal Blue work well as primary brand colours, hero backgrounds, and sidebar fills. They pair naturally with white text and carry enough contrast to meet WCAG AA requirements at normal text sizes.
Mid-range blues like Ocean Blue and Sky Blue are ideal for interactive elements — buttons, links, and focus rings — where the colour needs to stand out against both light and dark backgrounds without being overpowering.
Light blues like Pale Blue, Ice Blue, and Frost Blue are useful as surface tints, hover states, and subtle borders. They create depth in a design without introducing a second hue.
Accessibility Notes
The darker half of this range (Navy through Sky Blue) provides sufficient contrast against white text for WCAG AA compliance. The lighter half works best with dark text — use #1a1a1a or #0a0a0a for body text on any shade lighter than Light Blue.
Never rely on blue alone to convey state or meaning — approximately 8% of men have some form of colour vision deficiency that affects how they perceive blue, particularly when distinguishing it from greens or purples (such as in tritanopia or deuteranopia). If a form field turns blue to signal an error, or a status badge uses blue to show a completed state, a significant portion of your users might miss the cue entirely. Always pair color shifts with icons, text labels, or distinct structural changes.