What colors are in the Tomato Girl palette?

The Tomato Girl palette has 5 colors: #7A1E14, #C1440E, #E2603A, #3E5E38, #EAD9BE.

Where can I use this palette?

It's a Vibrant palette — well suited to landing pages, social media graphics, creative branding, calls to action.

Is the Tomato Girl palette accessible?

Its darkest and lightest colors have a contrast ratio of 7.50:1. 2 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 Tomato Girl palette?

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

Text #7A1E14 Falu Red Accent #C1440E Mahogany Primary #E2603A Persimmon Secondary #3E5E38 Hunter Green Surface #EAD9BE Bone

Tomato Girl

5 colors

Open in generator All palettes

Text Falu Red — #7A1E14

Accent Mahogany — #C1440E

Primary Persimmon — #E2603A

Secondary Hunter Green — #3E5E38

Surface Bone — #EAD9BE

Contrast matrix

Text on Surface 7.50 AAA

Primary on Surface 2.54 Fail

Text on Secondary 1.42 Fail

Surface on Primary 2.54 Fail

Accent on Text 2.03 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: #7A1E14;
  --accent: #C1440E;
  --primary: #E2603A;
  --secondary: #3E5E38;
  --surface: #EAD9BE;
}

$tomato-girl-text: #7A1E14;
$tomato-girl-accent: #C1440E;
$tomato-girl-primary: #E2603A;
$tomato-girl-secondary: #3E5E38;
$tomato-girl-surface: #EAD9BE;

// tailwind.config.js — theme.extend.colors
colors: {
  'tomato-girl': {
    'text': '#7A1E14',
    'accent': '#C1440E',
    'primary': '#E2603A',
    'secondary': '#3E5E38',
    'surface': '#EAD9BE',
  },
}

{
    "tomato-girl": {
        "text": {
            "value": "#7A1E14",
            "type": "color"
        },
        "accent": {
            "value": "#C1440E",
            "type": "color"
        },
        "primary": {
            "value": "#E2603A",
            "type": "color"
        },
        "secondary": {
            "value": "#3E5E38",
            "type": "color"
        },
        "surface": {
            "value": "#EAD9BE",
            "type": "color"
        }
    }
}

{
    "text": "#7A1E14",
    "accent": "#C1440E",
    "primary": "#E2603A",
    "secondary": "#3E5E38",
    "surface": "#EAD9BE"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#7A1E14
#C1440E
#E2603A
#3E5E38
#EAD9BE

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.

Tomato Girl

Contrast matrix

Export tokens

How the roles work

Related palettes