What colors are in the Forest Product palette?

The Forest Product palette has 5 colors: #0E1A14, #1E3227, #2E9E6B, #7FD3A9, #EAF6EF.

Where can I use this palette?

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

Is the Forest Product palette accessible?

Its darkest and lightest colors have a contrast ratio of 16.09: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 Forest Product palette?

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

Text #0E1A14 Graphite Secondary #1E3227 Sacramento Green Primary #2E9E6B Shamrock Green Accent #7FD3A9 Medium Aquamarine Surface #EAF6EF Cool White

Forest Product

Fresh Green SaaS UI 5 colors

Green as a product primary, not a success state. A deep forest ink grounds it, a mint highlight lifts it, and the near-white surface keeps the whole thing feeling fresh rather than corporate.

Open in generator All palettes

Text Graphite — #0E1A14

Secondary Sacramento Green — #1E3227

Primary Shamrock Green — #2E9E6B

Accent Medium Aquamarine — #7FD3A9

Surface Cool White — #EAF6EF

Contrast matrix

Text on Surface 16.09 AAA

Primary on Surface 3.04 AA Large

Text on Secondary 1.31 Fail

Surface on Primary 3.04 AA Large

Accent on Text 10.02 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: #0E1A14;
  --secondary: #1E3227;
  --primary: #2E9E6B;
  --accent: #7FD3A9;
  --surface: #EAF6EF;
}

$forest-product-text: #0E1A14;
$forest-product-secondary: #1E3227;
$forest-product-primary: #2E9E6B;
$forest-product-accent: #7FD3A9;
$forest-product-surface: #EAF6EF;

// tailwind.config.js — theme.extend.colors
colors: {
  'forest-product': {
    'text': '#0E1A14',
    'secondary': '#1E3227',
    'primary': '#2E9E6B',
    'accent': '#7FD3A9',
    'surface': '#EAF6EF',
  },
}

{
    "forest-product": {
        "text": {
            "value": "#0E1A14",
            "type": "color"
        },
        "secondary": {
            "value": "#1E3227",
            "type": "color"
        },
        "primary": {
            "value": "#2E9E6B",
            "type": "color"
        },
        "accent": {
            "value": "#7FD3A9",
            "type": "color"
        },
        "surface": {
            "value": "#EAF6EF",
            "type": "color"
        }
    }
}

{
    "text": "#0E1A14",
    "secondary": "#1E3227",
    "primary": "#2E9E6B",
    "accent": "#7FD3A9",
    "surface": "#EAF6EF"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#0E1A14
#1E3227
#2E9E6B
#7FD3A9
#EAF6EF

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.

Forest Product

Contrast matrix

Export tokens

How the roles work

Related palettes