What colors are in the Checkout Mint palette?

The Checkout Mint palette has 5 colors: #16241E, #2F5D50, #10B981, #B7E4D4, #F3F8F6.

Where can I use this palette?

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

Is the Checkout Mint palette accessible?

Its darkest and lightest colors have a contrast ratio of 14.99: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 Checkout Mint palette?

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

Text #16241E Graphite Accent #2F5D50 Hunter Green Primary #10B981 Medium Sea Green Secondary #B7E4D4 Seafoam Surface #F3F8F6 White Smoke

Checkout Mint

Fresh SaaS product UI 5 colors

Mint owns the primary action and nothing else, so "confirm" is unmistakable. Neutrals stay warm-grey to keep the app friendly, not clinical.

Open in generator All palettes

Text Graphite — #16241E

Accent Hunter Green — #2F5D50

Primary Medium Sea Green — #10B981

Secondary Seafoam — #B7E4D4

Surface White Smoke — #F3F8F6

Contrast matrix

Text on Surface 14.99 AAA

Primary on Surface 2.36 Fail

Text on Secondary 11.54 AAA

Surface on Primary 2.36 Fail

Accent on Text 2.15 Fail

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: #16241E;
  --accent: #2F5D50;
  --primary: #10B981;
  --secondary: #B7E4D4;
  --surface: #F3F8F6;
}

$checkout-mint-text: #16241E;
$checkout-mint-accent: #2F5D50;
$checkout-mint-primary: #10B981;
$checkout-mint-secondary: #B7E4D4;
$checkout-mint-surface: #F3F8F6;

// tailwind.config.js — theme.extend.colors
colors: {
  'checkout-mint': {
    'text': '#16241E',
    'accent': '#2F5D50',
    'primary': '#10B981',
    'secondary': '#B7E4D4',
    'surface': '#F3F8F6',
  },
}

{
    "checkout-mint": {
        "text": {
            "value": "#16241E",
            "type": "color"
        },
        "accent": {
            "value": "#2F5D50",
            "type": "color"
        },
        "primary": {
            "value": "#10B981",
            "type": "color"
        },
        "secondary": {
            "value": "#B7E4D4",
            "type": "color"
        },
        "surface": {
            "value": "#F3F8F6",
            "type": "color"
        }
    }
}

{
    "text": "#16241E",
    "accent": "#2F5D50",
    "primary": "#10B981",
    "secondary": "#B7E4D4",
    "surface": "#F3F8F6"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#16241E
#2F5D50
#10B981
#B7E4D4
#F3F8F6

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.

Checkout Mint

Contrast matrix

Export tokens

How the roles work

Related palettes