What colors are in the Soft Onboarding palette?

The Soft Onboarding palette has 5 colors: #2B2A33, #7C77C9, #A8C4F0, #F7C8D8, #FDF4F1.

Where can I use this palette?

It's a Muted palette — well suited to editorial layouts, minimal ui, photography portfolios, modern brands.

Is the Soft Onboarding palette accessible?

Its darkest and lightest colors have a contrast ratio of 13.08:1. 3 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 Soft Onboarding palette?

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

Text #2B2A33 Gunmetal Gray Primary #7C77C9 Medium Purple Accent #A8C4F0 Light Steel Blue Secondary #F7C8D8 Bubblegum Pink Surface #FDF4F1 Seashell

Soft Onboarding

Playful First-run flows 5 colors

Pastels carry the illustrations while a deep plum keeps the copy legible. Friendly without becoming a toy.

Open in generator All palettes

Text Gunmetal Gray — #2B2A33

Primary Medium Purple — #7C77C9

Accent Light Steel Blue — #A8C4F0

Secondary Bubblegum Pink — #F7C8D8

Surface Seashell — #FDF4F1

Contrast matrix

Text on Surface 13.08 AAA

Primary on Surface 3.63 AA Large

Text on Secondary 9.59 AAA

Surface on Primary 3.63 AA Large

Accent on Text 7.98 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: #2B2A33;
  --primary: #7C77C9;
  --accent: #A8C4F0;
  --secondary: #F7C8D8;
  --surface: #FDF4F1;
}

$soft-onboarding-text: #2B2A33;
$soft-onboarding-primary: #7C77C9;
$soft-onboarding-accent: #A8C4F0;
$soft-onboarding-secondary: #F7C8D8;
$soft-onboarding-surface: #FDF4F1;

// tailwind.config.js — theme.extend.colors
colors: {
  'soft-onboarding': {
    'text': '#2B2A33',
    'primary': '#7C77C9',
    'accent': '#A8C4F0',
    'secondary': '#F7C8D8',
    'surface': '#FDF4F1',
  },
}

{
    "soft-onboarding": {
        "text": {
            "value": "#2B2A33",
            "type": "color"
        },
        "primary": {
            "value": "#7C77C9",
            "type": "color"
        },
        "accent": {
            "value": "#A8C4F0",
            "type": "color"
        },
        "secondary": {
            "value": "#F7C8D8",
            "type": "color"
        },
        "surface": {
            "value": "#FDF4F1",
            "type": "color"
        }
    }
}

{
    "text": "#2B2A33",
    "primary": "#7C77C9",
    "accent": "#A8C4F0",
    "secondary": "#F7C8D8",
    "surface": "#FDF4F1"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#2B2A33
#7C77C9
#A8C4F0
#F7C8D8
#FDF4F1

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.

Soft Onboarding

Contrast matrix

Export tokens

How the roles work

Related palettes