Begonia · 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

#e05c86rgb(224, 92, 134)hsl(340.9, 68%, 62%)

Primary dark primaryDark

Pressed state, or primary on dark backgrounds

#d1235argb(209, 35, 90)hsl(341, 71.3%, 47.8%)

Primary light primaryLight

Tinted surfaces, tag backgrounds, subdued selected states

#f8e7edrgb(248, 231, 237)hsl(338.8, 54.8%, 93.9%)

Secondary secondary

Companion to the primary for secondary buttons and icons

#7ed38ergb(126, 211, 142)hsl(131.3, 49.1%, 66.1%)

Accent accent

Spot color for badges and highlights

#2eef52rgb(46, 239, 82)hsl(131.2, 85.8%, 55.9%)

Success success

Success toasts and completed states

#28c368rgb(40, 195, 104)hsl(144.8, 66%, 46.1%)

Warning warning

Warnings and pending states

#f6ae1ergb(246, 174, 30)hsl(40, 92.3%, 54.1%)

Danger danger

Errors, destructive actions and failure states

#eb3f33rgb(235, 63, 51)hsl(3.9, 82.1%, 56.1%)

Text text

Body text color

#292325rgb(41, 35, 37)hsl(340, 7.9%, 14.9%)

Page background bg

Page base color

#faf9fargb(250, 249, 250)hsl(300, 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 is light, so it works well over large areas — just keep text and borders dark enough to hold the contrast.

Good forFor lifestyle, social, beauty and predominantly female audiences — it is immediately welcoming.

Use with careToo much of it turns saccharine, especially at high saturation.

Pairs withGray and white keep it from becoming overly sweet; a deep berry purple adds depth.

Hue family: Pink

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.69:1	AAA	AAA
Brand color / page background	3.31:1	AA	AA

Verify this pair in the checker →

More palettes on this platform

Ranked by colour family and shared tags — the ones worth seeing next.

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: #e05c86; /* Primary */
  --color-primaryDark: #d1235a; /* Primary dark */
  --color-primaryLight: #f8e7ed; /* Primary light */
  --color-secondary: #7ed38e; /* Secondary */
  --color-accent: #2eef52; /* Accent */
  --color-success: #28c368; /* Success */
  --color-warning: #f6ae1e; /* Warning */
  --color-danger: #eb3f33; /* Danger */
  --color-text: #292325; /* Text */
  --color-bg: #faf9fa; /* Page background */
}

SCSS variables

$color-primary: #e05c86; // Primary
$color-primaryDark: #d1235a; // Primary dark
$color-primaryLight: #f8e7ed; // Primary light
$color-secondary: #7ed38e; // Secondary
$color-accent: #2eef52; // Accent
$color-success: #28c368; // Success
$color-warning: #f6ae1e; // Warning
$color-danger: #eb3f33; // Danger
$color-text: #292325; // Text
$color-bg: #faf9fa; // Page background

Tailwind config

// tailwind.config.js: Begonia
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#e05c86',
        'primaryDark': '#d1235a',
        'primaryLight': '#f8e7ed',
        'secondary': '#7ed38e',
        'accent': '#2eef52',
        'success': '#28c368',
        'warning': '#f6ae1e',
        'danger': '#eb3f33',
        'text': '#292325',
        'bg': '#faf9fa',
      },
    },
  },
};

Machine-readable JSON

{
  "name": "Begonia",
  "platform": "app",
  "tags": [
    "Ocean",
    "Pink"
  ],
  "advice": {
    "family": "Pink",
    "depth": "The lead color is light, so it works well over large areas — just keep text and borders dark enough to hold the contrast.",
    "muted": null,
    "suit": "For lifestyle, social, beauty and predominantly female audiences — it is immediately welcoming.",
    "avoid": "Too much of it turns saccharine, especially at high saturation.",
    "pair": "Gray and white keep it from becoming overly sweet; a deep berry purple adds depth."
  },
  "roles": {
    "primary": "#e05c86",
    "primaryDark": "#d1235a",
    "primaryLight": "#f8e7ed",
    "secondary": "#7ed38e",
    "accent": "#2eef52",
    "success": "#28c368",
    "warning": "#f6ae1e",
    "danger": "#eb3f33",
    "text": "#292325",
    "bg": "#faf9fa"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 14.69,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 3.31,
      "level": "AA"
    }
  }
}