Sorrel · App palette (10 colors, ready to copy)

10 color roles

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

Primary primary

Brand color for primary buttons, selected states and emphasis

#4c8b43rgb(76, 139, 67)hsl(112.5, 35%, 40.4%)

Primary dark primaryDark

Pressed state, or primary on dark backgrounds

#305d2argb(48, 93, 42)hsl(112.9, 37.8%, 26.5%)

Primary light primaryLight

Tinted surfaces, tag backgrounds, subdued selected states

#aec7aargb(174, 199, 170)hsl(111.7, 20.6%, 72.4%)

Secondary secondary

Companion to the primary for secondary buttons and icons

#517a91rgb(81, 122, 145)hsl(201.6, 28.3%, 44.3%)

Accent accent

Spot color for badges and highlights

#7f53cbrgb(127, 83, 203)hsl(262, 53.6%, 56.1%)

Success success

Success toasts and completed states

#2ca05crgb(44, 160, 92)hsl(144.8, 56.9%, 40%)

Warning warning

Warnings and pending states

#e49d11rgb(228, 157, 17)hsl(39.8, 86.1%, 48%)

Danger danger

Errors, destructive actions and failure states

#d93226rgb(217, 50, 38)hsl(4, 70.2%, 50%)

Text text

Body text color

#242923rgb(36, 41, 35)hsl(110, 7.9%, 14.9%)

Page background bg

Page base color

#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.

The lead color sits in the middle of the lightness range, which makes it the most adaptable: both light and dark themes are easy to build on.

Good forFor health, sustainability, finance and growth — it carries safety and approval almost by default.

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

Pairs withCream and warm gray 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.2:1	AAA	AAA
Brand color / page background	3.96:1	AA	AA

Verify this pair in the checker →

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: #4c8b43; /* Primary */
  --color-primaryDark: #305d2a; /* Primary dark */
  --color-primaryLight: #aec7aa; /* Primary light */
  --color-secondary: #517a91; /* Secondary */
  --color-accent: #7f53cb; /* Accent */
  --color-success: #2ca05c; /* Success */
  --color-warning: #e49d11; /* Warning */
  --color-danger: #d93226; /* Danger */
  --color-text: #242923; /* Text */
  --color-bg: #fafaf9; /* Page background */
}

SCSS variables

$color-primary: #4c8b43; // Primary
$color-primaryDark: #305d2a; // Primary dark
$color-primaryLight: #aec7aa; // Primary light
$color-secondary: #517a91; // Secondary
$color-accent: #7f53cb; // Accent
$color-success: #2ca05c; // Success
$color-warning: #e49d11; // Warning
$color-danger: #d93226; // Danger
$color-text: #242923; // Text
$color-bg: #fafaf9; // Page background

Tailwind config

// tailwind.config.js: Sorrel
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#4c8b43',
        'primaryDark': '#305d2a',
        'primaryLight': '#aec7aa',
        'secondary': '#517a91',
        'accent': '#7f53cb',
        'success': '#2ca05c',
        'warning': '#e49d11',
        'danger': '#d93226',
        'text': '#242923',
        'bg': '#fafaf9',
      },
    },
  },
};

Machine-readable JSON

{
  "name": "Sorrel",
  "platform": "app",
  "tags": [
    "Natural",
    "Green"
  ],
  "advice": {
    "family": "Green",
    "depth": "The lead color sits in the middle of the lightness range, which makes it the most adaptable: both light and dark themes are easy to build on.",
    "muted": null,
    "suit": "For health, sustainability, finance and growth — it carries safety and approval almost by default.",
    "avoid": "Yellowish grass greens can look dated; they need careful work on lightness and saturation.",
    "pair": "Cream and warm gray give it more polish; layering light and dark greens beats adding a third hue."
  },
  "roles": {
    "primary": "#4c8b43",
    "primaryDark": "#305d2a",
    "primaryLight": "#aec7aa",
    "secondary": "#517a91",
    "accent": "#7f53cb",
    "success": "#2ca05c",
    "warning": "#e49d11",
    "danger": "#d93226",
    "text": "#242923",
    "bg": "#fafaf9"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 14.2,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 3.96,
      "level": "AA"
    }
  }
}

More palettes on this platform