What colors are in the Analytics Indigo palette?

The Analytics Indigo palette has 5 colors: #1A1B3A, #4338CA, #818CF8, #F5A524, #F4F5FB.

Where can I use this palette?

It's a Vibrant palette — well suited to landing pages, social media graphics, creative branding, calls to action.

Is the Analytics Indigo palette accessible?

Its darkest and lightest colors have a contrast ratio of 15.30: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 Analytics Indigo palette?

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

Text #1A1B3A Navy Primary #4338CA Cerulean Secondary #818CF8 Cornflower Blue Accent #F5A524 Orange Surface #F4F5FB White Smoke

Analytics Indigo

Professional Reporting & analytics 5 colors

Indigo carries every chart series; the surface stays paper-white so dense tables never feel heavy. One warm amber marks the outlier.

Open in generator All palettes

Text Navy — #1A1B3A

Primary Cerulean — #4338CA

Secondary Cornflower Blue — #818CF8

Accent Orange — #F5A524

Surface White Smoke — #F4F5FB

Contrast matrix

Text on Surface 15.30 AAA

Primary on Surface 7.26 AAA

Text on Secondary 5.58 AA

Surface on Primary 7.26 AAA

Accent on Text 8.16 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: #1A1B3A;
  --primary: #4338CA;
  --secondary: #818CF8;
  --accent: #F5A524;
  --surface: #F4F5FB;
}

$analytics-indigo-text: #1A1B3A;
$analytics-indigo-primary: #4338CA;
$analytics-indigo-secondary: #818CF8;
$analytics-indigo-accent: #F5A524;
$analytics-indigo-surface: #F4F5FB;

// tailwind.config.js — theme.extend.colors
colors: {
  'analytics-indigo': {
    'text': '#1A1B3A',
    'primary': '#4338CA',
    'secondary': '#818CF8',
    'accent': '#F5A524',
    'surface': '#F4F5FB',
  },
}

{
    "analytics-indigo": {
        "text": {
            "value": "#1A1B3A",
            "type": "color"
        },
        "primary": {
            "value": "#4338CA",
            "type": "color"
        },
        "secondary": {
            "value": "#818CF8",
            "type": "color"
        },
        "accent": {
            "value": "#F5A524",
            "type": "color"
        },
        "surface": {
            "value": "#F4F5FB",
            "type": "color"
        }
    }
}

{
    "text": "#1A1B3A",
    "primary": "#4338CA",
    "secondary": "#818CF8",
    "accent": "#F5A524",
    "surface": "#F4F5FB"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#1A1B3A
#4338CA
#818CF8
#F5A524
#F4F5FB

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.

Analytics Indigo

Contrast matrix

Export tokens

How the roles work

Related palettes