What colors are in the Coquette palette?

The Coquette palette has 5 colors: #F7D6E0, #F2B6C6, #E38AA6, #C56B85, #8A4A5E.

Where can I use this palette?

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

Is the Coquette palette accessible?

Its darkest and lightest colors have a contrast ratio of 4.86:1. 1 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 Coquette palette?

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

Surface #F7D6E0 Pastel Pink Secondary #F2B6C6 Cherry Blossom Accent #E38AA6 Puce Primary #C56B85 Rose Gold Text #8A4A5E Cordovan

Coquette

5 colors

Open in generator All palettes

Surface Pastel Pink — #F7D6E0

Secondary Cherry Blossom — #F2B6C6

Accent Puce — #E38AA6

Primary Rose Gold — #C56B85

Text Cordovan — #8A4A5E

Contrast matrix

Text on Surface 4.86 AA

Primary on Surface 2.69 Fail

Text on Secondary 3.81 AA Large

Surface on Primary 2.69 Fail

Accent on Text 2.62 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 {
  --surface: #F7D6E0;
  --secondary: #F2B6C6;
  --accent: #E38AA6;
  --primary: #C56B85;
  --text: #8A4A5E;
}

$coquette-surface: #F7D6E0;
$coquette-secondary: #F2B6C6;
$coquette-accent: #E38AA6;
$coquette-primary: #C56B85;
$coquette-text: #8A4A5E;

// tailwind.config.js — theme.extend.colors
colors: {
  'coquette': {
    'surface': '#F7D6E0',
    'secondary': '#F2B6C6',
    'accent': '#E38AA6',
    'primary': '#C56B85',
    'text': '#8A4A5E',
  },
}

{
    "coquette": {
        "surface": {
            "value": "#F7D6E0",
            "type": "color"
        },
        "secondary": {
            "value": "#F2B6C6",
            "type": "color"
        },
        "accent": {
            "value": "#E38AA6",
            "type": "color"
        },
        "primary": {
            "value": "#C56B85",
            "type": "color"
        },
        "text": {
            "value": "#8A4A5E",
            "type": "color"
        }
    }
}

{
    "surface": "#F7D6E0",
    "secondary": "#F2B6C6",
    "accent": "#E38AA6",
    "primary": "#C56B85",
    "text": "#8A4A5E"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#F7D6E0
#F2B6C6
#E38AA6
#C56B85
#8A4A5E

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.

Coquette

Contrast matrix

Export tokens

How the roles work

Related palettes