What colors are in the Ocean Violet palette?

The Ocean Violet palette has 5 colors: #14152E, #292B54, #5B54E8, #9A93F7, #EEEDFC.

Where can I use this palette?

It's a Balanced palette — well suited to websites, product ui, presentations, marketing pages.

Is the Ocean Violet palette accessible?

Its darkest and lightest colors have a contrast ratio of 15.43:1. 5 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 Ocean Violet palette?

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

Text #14152E Graphite Secondary #292B54 Prussian Blue Primary #5B54E8 Iris Accent #9A93F7 Cornflower Blue Surface #EEEDFC Cool White

Ocean Violet

Modern SaaS product UI 5 colors

A single indigo does all the work here, set between a periwinkle highlight and an ink deep enough for dense product screens. The surface is barely tinted violet so the primary never looks out of place.

Open in generator All palettes

Text Graphite — #14152E

Secondary Prussian Blue — #292B54

Primary Iris — #5B54E8

Accent Cornflower Blue — #9A93F7

Surface Cool White — #EEEDFC

Contrast matrix

Text on Surface 15.43 AAA

Primary on Surface 4.68 AA

Text on Secondary 1.33 Fail

Surface on Primary 4.68 AA

Accent on Text 6.71 AA

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: #14152E;
  --secondary: #292B54;
  --primary: #5B54E8;
  --accent: #9A93F7;
  --surface: #EEEDFC;
}

$ocean-violet-text: #14152E;
$ocean-violet-secondary: #292B54;
$ocean-violet-primary: #5B54E8;
$ocean-violet-accent: #9A93F7;
$ocean-violet-surface: #EEEDFC;

// tailwind.config.js — theme.extend.colors
colors: {
  'ocean-violet': {
    'text': '#14152E',
    'secondary': '#292B54',
    'primary': '#5B54E8',
    'accent': '#9A93F7',
    'surface': '#EEEDFC',
  },
}

{
    "ocean-violet": {
        "text": {
            "value": "#14152E",
            "type": "color"
        },
        "secondary": {
            "value": "#292B54",
            "type": "color"
        },
        "primary": {
            "value": "#5B54E8",
            "type": "color"
        },
        "accent": {
            "value": "#9A93F7",
            "type": "color"
        },
        "surface": {
            "value": "#EEEDFC",
            "type": "color"
        }
    }
}

{
    "text": "#14152E",
    "secondary": "#292B54",
    "primary": "#5B54E8",
    "accent": "#9A93F7",
    "surface": "#EEEDFC"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#14152E
#292B54
#5B54E8
#9A93F7
#EEEDFC

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.

Ocean Violet

Contrast matrix

Export tokens

How the roles work

Related palettes