ع

Trust Blue

A dependable blue scale for finance, SaaS and enterprise.

≈ Oxford Blue
≈ Cobalt Blue
≈ Info Blue
≈ Light Steel Blue
≈ Cool White

Color codes

HEXRGBHSLCMYK
hsl(214, 68%, 14%)cmyk(81%, 47%, 0%, 77%)
hsl(213, 65%, 33%)cmyk(79%, 43%, 0%, 46%)
hsl(215, 65%, 53%)cmyk(73%, 42%, 0%, 16%)
hsl(210, 57%, 78%)cmyk(28%, 14%, 0%, 9%)
hsl(213, 53%, 97%)cmyk(4%, 2%, 0%, 2%)

CSS

:root {
  --trust-blue-1: #0B1F3A;
  --trust-blue-2: #1D4E89;
  --trust-blue-3: #3A7BD5;
  --trust-blue-4: #A7C7E7;
  --trust-blue-5: #F2F6FB;
}

How these colors work together

This is a monochromatic palette built around a single hue. Overall it reads cool. Lightness spans 83 points, which sets how much contrast you can create.

4 of 10 color pairs reach the 4.5:1 contrast needed for normal text. The most readable pair is ⁦#0B1F3A⁩ on ⁦#F2F6FB⁩ (15.22:1).

Trust Blue — readable text using the best pair.

Suggested applications

  • Reports, dashboards and business websites.
  • Interface themes: use the lightest color for backgrounds and the darkest for text.
  • Brand kits, social graphics and presentations.

#blue#business#saas

Check accessibility Simulate color blindness CSS variables

Frequently asked questions

How do I use the Trust Blue palette?
The Trust Blue palette has 5 colors. Use one dominant color for large areas, a supporting color for secondary elements and the most saturated color sparingly as an accent.
Which colors in this palette are best for text?
Use ⁦#0B1F3A⁩ on ⁦#F2F6FB⁩: it has a contrast ratio of 15.22:1.
Can I download this palette?
Yes. Export it as PNG, SVG, CSS variables, JSON or plain text with the buttons above the color table.

More palettes

Slate and Teal#1E293B #334155 #64748B #0D9488 #CCFBF1Modern Consulting#14213D #FCA311 #E5E5E5 #FFFFFF #000000Healthcare Calm#0F4C5C #2A9D8F #8ECAE6 #E9F5F2 #FFFFFFQuiet Studio#F4F1EC #D9D3C7 #B7AD9C #6F6A60 #2D2B28Color Block#FF006E #FB5607 #FFBE0B #3A86FF #8338ECFrost#F0F8FF #D6E6F2 #A9C6DE #5B84B1 #1C3D5A