Blue Colour Scale

The complete blue palette from deep navy to light periwinkle, representing innovation and trust.

Blue 900

RGB(5, 9, 56)
rgb(255, 255, 255)

Blue 800

RGB(10, 18, 112)
rgb(255, 255, 255)

Blue 700

RGB(21, 32, 168)
rgb(255, 255, 255)

Blue 500

RGB(43, 54, 217)
rgb(255, 255, 255)

Blue 400

RGB(91, 102, 242)
rgb(255, 255, 255)

Blue 300

RGB(127, 136, 250)
rgb(255, 255, 255)

Blue 100

RGB(165, 171, 255)
rgb(255, 255, 255)

Color Values

Blue 900: #050938 - Deepest navy, use for dark backgrounds

Blue 800: #0A1270 - Dark blue, use for secondary backgrounds

Blue 700: #1520A8 - Rich blue, use for hover states

Blue 500: #2B36D9 - Primary blue (Palatinate Blue)

Blue 400: #5B66F2 - Bright blue, use for active states

Blue 300: #7F88FA - Light blue, use for highlights

Blue 100: #A5ABFF - Lightest blue, use for subtle accents

Usage Guidelines

Use Blue 500 as the primary brand color for buttons and CTAs

Darker shades work well for text on light backgrounds

Lighter shades are ideal for backgrounds and subtle highlights

Maintain sufficient contrast ratios for accessibility (WCAG AA)

© DEMOS. All rights reserved 2026

Search...