What colors are in the Berry Boutique palette?

The Berry Boutique palette has 5 colors: #1F1015, #43202D, #D6316B, #F3A8C4, #FDEEF3.

Where can I use this palette?

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

Is the Berry Boutique palette accessible?

Its darkest and lightest colors have a contrast ratio of 16.36:1. 4 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 Berry Boutique palette?

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

Text #1F1015 Graphite Secondary #43202D Bistre Primary #D6316B Cerise Accent #F3A8C4 Carnation Surface #FDEEF3 Lavender Blush

Berry Boutique

Playful Boutique commerce 5 colors

A confident berry does the buying; the soft pink is only ever a background wash. On a pale rose surface it reads boutique rather than bargain, one loud color styled with restraint.

Open in generator All palettes

Text Graphite — #1F1015

Secondary Bistre — #43202D

Primary Cerise — #D6316B

Accent Carnation — #F3A8C4

Surface Lavender Blush — #FDEEF3

Contrast matrix

Text on Surface 16.36 AAA

Primary on Surface 4.15 AA Large

Text on Secondary 1.30 Fail

Surface on Primary 4.15 AA Large

Accent on Text 9.80 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: #1F1015;
  --secondary: #43202D;
  --primary: #D6316B;
  --accent: #F3A8C4;
  --surface: #FDEEF3;
}

$berry-boutique-text: #1F1015;
$berry-boutique-secondary: #43202D;
$berry-boutique-primary: #D6316B;
$berry-boutique-accent: #F3A8C4;
$berry-boutique-surface: #FDEEF3;

// tailwind.config.js — theme.extend.colors
colors: {
  'berry-boutique': {
    'text': '#1F1015',
    'secondary': '#43202D',
    'primary': '#D6316B',
    'accent': '#F3A8C4',
    'surface': '#FDEEF3',
  },
}

{
    "berry-boutique": {
        "text": {
            "value": "#1F1015",
            "type": "color"
        },
        "secondary": {
            "value": "#43202D",
            "type": "color"
        },
        "primary": {
            "value": "#D6316B",
            "type": "color"
        },
        "accent": {
            "value": "#F3A8C4",
            "type": "color"
        },
        "surface": {
            "value": "#FDEEF3",
            "type": "color"
        }
    }
}

{
    "text": "#1F1015",
    "secondary": "#43202D",
    "primary": "#D6316B",
    "accent": "#F3A8C4",
    "surface": "#FDEEF3"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#1F1015
#43202D
#D6316B
#F3A8C4
#FDEEF3

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.

Berry Boutique

Contrast matrix

Export tokens

How the roles work

Related palettes