Willow · App palette (10 colours, ready to copy)

10 colour roles

Every colour has a defined purpose. Use the buttons on the right to copy it in any format.

Primary primary

Brand colour for primary buttons, selected states and emphasis

#40862drgb(64, 134, 45)hsl(107.2, 49.7%, 35.1%)

Primary dark primaryDark

Pressed state, or primary on dark backgrounds

#255219rgb(37, 82, 25)hsl(107.4, 53.3%, 21%)

Primary light primaryLight

Tinted surfaces, tag backgrounds, subdued selected states

#9ac98drgb(154, 201, 141)hsl(107, 35.7%, 67.1%)

Secondary secondary

Companion to the primary for secondary buttons and icons

#784087rgb(120, 64, 135)hsl(287.3, 35.7%, 39%)

Accent accent

Spot colour for badges and highlights

#ba43dbrgb(186, 67, 219)hsl(287, 67.9%, 56.1%)

Success success

Success toasts and completed states

#27a059rgb(39, 160, 89)hsl(144.8, 60.8%, 39%)

Warning warning

Warnings and pending states

#e69d0argb(230, 157, 10)hsl(40.1, 91.7%, 47.1%)

Danger danger

Errors, destructive actions and failure states

#dc2b1ergb(220, 43, 30)hsl(4.1, 76%, 49%)

Text text

Body text colour

#252923rgb(37, 41, 35)hsl(100, 7.9%, 14.9%)

Page background bg

Page base colour

#fafaf9rgb(250, 250, 249)hsl(60, 9.1%, 97.8%)

How to use it

Written by hand for the hue family and lightness of this palette, not assembled from a template.

This palette's lead colour is deep and carries weight — suited to dark themes, or interfaces that need to feel professional and steady.

Good forIts confirmed meaning is near universal, which makes it a natural fit for success states.

Use with careYellowish grass greens can look dated; they need careful work on lightness and saturation.

Pairs withCream and warm grey give it more polish; layering light and dark greens beats adding a third hue.

Hue family: Green

What it looks like in a real interface

The same palette rendered across all three platforms — the fastest way to judge whether it works.

Live preview · switch platform

9:41

Today

FeaturedNearby

Weekend by the sea

Sample body copy, used to check how secondary text reads on a card background.

Accessibility contrast check

Calculated to WCAG 2.1. AA is the accessibility baseline, AAA the enhanced level.

Foreground / background	Ratio	Body text	Large text
Body text / page background	14.16:1	AAA	AAA
Brand colour / page background	4.31:1	AA	AA

Export to your project

Four formats, ready to paste. Or fetch them by URL from your tooling or AI agent.

CSS variables

:root {
  --color-primary: #40862d; /* Primary */
  --color-primaryDark: #255219; /* Primary dark */
  --color-primaryLight: #9ac98d; /* Primary light */
  --color-secondary: #784087; /* Secondary */
  --color-accent: #ba43db; /* Accent */
  --color-success: #27a059; /* Success */
  --color-warning: #e69d0a; /* Warning */
  --color-danger: #dc2b1e; /* Danger */
  --color-text: #252923; /* Text */
  --color-bg: #fafaf9; /* Page background */
}

SCSS variables

$color-primary: #40862d; // Primary
$color-primaryDark: #255219; // Primary dark
$color-primaryLight: #9ac98d; // Primary light
$color-secondary: #784087; // Secondary
$color-accent: #ba43db; // Accent
$color-success: #27a059; // Success
$color-warning: #e69d0a; // Warning
$color-danger: #dc2b1e; // Danger
$color-text: #252923; // Text
$color-bg: #fafaf9; // Page background

Tailwind config

// tailwind.config.js: Willow
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#40862d',
        'primaryDark': '#255219',
        'primaryLight': '#9ac98d',
        'secondary': '#784087',
        'accent': '#ba43db',
        'success': '#27a059',
        'warning': '#e69d0a',
        'danger': '#dc2b1e',
        'text': '#252923',
        'bg': '#fafaf9',
      },
    },
  },
};

Machine-readable JSON

{
  "name": "Willow",
  "platform": "app",
  "tags": [
    "Muted grey",
    "Green"
  ],
  "advice": {
    "family": "Green",
    "depth": "This palette's lead colour is deep and carries weight — suited to dark themes, or interfaces that need to feel professional and steady.",
    "muted": null,
    "suit": "Its confirmed meaning is near universal, which makes it a natural fit for success states.",
    "avoid": "Yellowish grass greens can look dated; they need careful work on lightness and saturation.",
    "pair": "Cream and warm grey give it more polish; layering light and dark greens beats adding a third hue."
  },
  "roles": {
    "primary": "#40862d",
    "primaryDark": "#255219",
    "primaryLight": "#9ac98d",
    "secondary": "#784087",
    "accent": "#ba43db",
    "success": "#27a059",
    "warning": "#e69d0a",
    "danger": "#dc2b1e",
    "text": "#252923",
    "bg": "#fafaf9"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 14.16,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 4.31,
      "level": "AA"
    }
  }
}

More palettes on this platform