What colors are in the Storefront Coral palette?

The Storefront Coral palette has 5 colors: #2A1A15, #7A3B2E, #FF6B4A, #F2C6A0, #FBF3EC.

Where can I use this palette?

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

Is the Storefront Coral palette accessible?

Its darkest and lightest colors have a contrast ratio of 15.22: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 Storefront Coral palette?

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

Text #2A1A15 Graphite Accent #7A3B2E Garnet Primary #FF6B4A Tomato Red Secondary #F2C6A0 Desert Sand Surface #FBF3EC Seashell

Storefront Coral

Warm E-commerce & retail 5 colors

Coral is the only CTA-grade tone, so "add to cart" never competes with a sale badge. Sand neutrals keep product photos the loudest thing on the page.

Open in generator All palettes

Text Graphite — #2A1A15

Accent Garnet — #7A3B2E

Primary Tomato Red — #FF6B4A

Secondary Desert Sand — #F2C6A0

Surface Seashell — #FBF3EC

Contrast matrix

Text on Surface 15.22 AAA

Primary on Surface 2.57 Fail

Text on Secondary 10.63 AAA

Surface on Primary 2.57 Fail

Accent on Text 1.98 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: #2A1A15;
  --accent: #7A3B2E;
  --primary: #FF6B4A;
  --secondary: #F2C6A0;
  --surface: #FBF3EC;
}

$storefront-coral-text: #2A1A15;
$storefront-coral-accent: #7A3B2E;
$storefront-coral-primary: #FF6B4A;
$storefront-coral-secondary: #F2C6A0;
$storefront-coral-surface: #FBF3EC;

// tailwind.config.js — theme.extend.colors
colors: {
  'storefront-coral': {
    'text': '#2A1A15',
    'accent': '#7A3B2E',
    'primary': '#FF6B4A',
    'secondary': '#F2C6A0',
    'surface': '#FBF3EC',
  },
}

{
    "storefront-coral": {
        "text": {
            "value": "#2A1A15",
            "type": "color"
        },
        "accent": {
            "value": "#7A3B2E",
            "type": "color"
        },
        "primary": {
            "value": "#FF6B4A",
            "type": "color"
        },
        "secondary": {
            "value": "#F2C6A0",
            "type": "color"
        },
        "surface": {
            "value": "#FBF3EC",
            "type": "color"
        }
    }
}

{
    "text": "#2A1A15",
    "accent": "#7A3B2E",
    "primary": "#FF6B4A",
    "secondary": "#F2C6A0",
    "surface": "#FBF3EC"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#2A1A15
#7A3B2E
#FF6B4A
#F2C6A0
#FBF3EC

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.

Storefront Coral

Contrast matrix

Export tokens

How the roles work

Related palettes