What colors are in the Sunrise Commerce palette?

The Sunrise Commerce palette has 5 colors: #241410, #4A241A, #FF6B4A, #FFB088, #FFF1E9.

Where can I use this palette?

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

Is the Sunrise Commerce palette accessible?

Its darkest and lightest colors have a contrast ratio of 16.08:1. 6 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 Sunrise Commerce palette?

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

Text #241410 Graphite Secondary #4A241A Bistre Primary #FF6B4A Tomato Red Accent #FFB088 Melon Surface #FFF1E9 Linen

Sunrise Commerce

Warm Retail storefronts 5 colors

One coral does every call to action; the peach only warms up empty space. On a warm near-white the product photography still wins, which on a shopfront is the whole point.

Open in generator All palettes

Text Graphite — #241410

Secondary Bistre — #4A241A

Primary Tomato Red — #FF6B4A

Accent Melon — #FFB088

Surface Linen — #FFF1E9

Contrast matrix

Text on Surface 16.08 AAA

Primary on Surface 2.55 Fail

Text on Secondary 1.32 Fail

Surface on Primary 2.55 Fail

Accent on Text 9.99 AAA

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: #241410;
  --secondary: #4A241A;
  --primary: #FF6B4A;
  --accent: #FFB088;
  --surface: #FFF1E9;
}

$sunrise-commerce-text: #241410;
$sunrise-commerce-secondary: #4A241A;
$sunrise-commerce-primary: #FF6B4A;
$sunrise-commerce-accent: #FFB088;
$sunrise-commerce-surface: #FFF1E9;

// tailwind.config.js — theme.extend.colors
colors: {
  'sunrise-commerce': {
    'text': '#241410',
    'secondary': '#4A241A',
    'primary': '#FF6B4A',
    'accent': '#FFB088',
    'surface': '#FFF1E9',
  },
}

{
    "sunrise-commerce": {
        "text": {
            "value": "#241410",
            "type": "color"
        },
        "secondary": {
            "value": "#4A241A",
            "type": "color"
        },
        "primary": {
            "value": "#FF6B4A",
            "type": "color"
        },
        "accent": {
            "value": "#FFB088",
            "type": "color"
        },
        "surface": {
            "value": "#FFF1E9",
            "type": "color"
        }
    }
}

{
    "text": "#241410",
    "secondary": "#4A241A",
    "primary": "#FF6B4A",
    "accent": "#FFB088",
    "surface": "#FFF1E9"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#241410
#4A241A
#FF6B4A
#FFB088
#FFF1E9

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.

Sunrise Commerce

Contrast matrix

Export tokens

How the roles work

Related palettes