What colors are in the Fintech Trust palette?

The Fintech Trust palette has 5 colors: #0B1020, #16233F, #2F6BFF, #6FA8FF, #E8EEFB.

Where can I use this palette?

It's a Dark palette — well suited to dark mode, dashboards, gaming ui, hero sections.

Is the Fintech Trust palette accessible?

Its darkest and lightest colors have a contrast ratio of 16.28:1. 4 color pairs in it meet WCAG AA for text.

How do I use this palette in CSS?

Copy the CSS custom properties (:root variables) from the Export section, or grab any single hex with one click.

Can I export the Fintech Trust palette?

Yes — export to CSS, SCSS, Tailwind config or JSON, or copy all hex codes at once.

Text #0B1020 Jet Black Secondary #16233F Navy Primary #2F6BFF Royal Blue Accent #6FA8FF Cornflower Blue Surface #E8EEFB Cool White

Fintech Trust

Professional Dashboards & banking 5 colors

A deep navy base keeps balances calm while a single electric blue does all the pushing. Nothing else is allowed to shout.

Open in generator All palettes

Text Jet Black — #0B1020

Secondary Navy — #16233F

Primary Royal Blue — #2F6BFF

Accent Cornflower Blue — #6FA8FF

Surface Cool White — #E8EEFB

Contrast matrix

Text on Surface 16.28 AAA

Primary on Surface 3.87 AA Large

Text on Secondary 1.21 Fail

Surface on Primary 3.87 AA Large

Accent on Text 7.86 AAA

Ratios are WCAG 2 contrast between the roles as assigned above. AA needs 4.5:1 for body text, 3:1 for large text.

Export tokens

:root {
  --text: #0B1020;
  --secondary: #16233F;
  --primary: #2F6BFF;
  --accent: #6FA8FF;
  --surface: #E8EEFB;
}

$fintech-trust-text: #0B1020;
$fintech-trust-secondary: #16233F;
$fintech-trust-primary: #2F6BFF;
$fintech-trust-accent: #6FA8FF;
$fintech-trust-surface: #E8EEFB;

// tailwind.config.js — theme.extend.colors
colors: {
  'fintech-trust': {
    'text': '#0B1020',
    'secondary': '#16233F',
    'primary': '#2F6BFF',
    'accent': '#6FA8FF',
    'surface': '#E8EEFB',
  },
}

{
    "fintech-trust": {
        "text": {
            "value": "#0B1020",
            "type": "color"
        },
        "secondary": {
            "value": "#16233F",
            "type": "color"
        },
        "primary": {
            "value": "#2F6BFF",
            "type": "color"
        },
        "accent": {
            "value": "#6FA8FF",
            "type": "color"
        },
        "surface": {
            "value": "#E8EEFB",
            "type": "color"
        }
    }
}

{
    "text": "#0B1020",
    "secondary": "#16233F",
    "primary": "#2F6BFF",
    "accent": "#6FA8FF",
    "surface": "#E8EEFB"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#0B1020
#16233F
#2F6BFF
#6FA8FF
#E8EEFB

Download for Procreate

How the roles work

SurfaceThe lightest color — page and card backgrounds.

TextThe darkest color — body text and high-contrast UI.

PrimaryThe most chromatic middle — buttons, links, the one color that pushes.

AccentThe second most chromatic — badges, highlights, states.

SecondaryEverything else — fills, borders, supporting surfaces.

Fintech Trust

Contrast matrix

Export tokens

How the roles work

Related palettes