What colors are in the Cotton Pastel palette?

The Cotton Pastel palette has 5 colors: #33303A, #8CB8E8, #F4A6C6, #F7E08A, #FBF7F2.

Where can I use this palette?

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

Is the Cotton Pastel palette accessible?

Its darkest and lightest colors have a contrast ratio of 12.12: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 Cotton Pastel palette?

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

Text #33303A Gunmetal Gray Secondary #8CB8E8 Maya Blue Accent #F4A6C6 Carnation Primary #F7E08A Flax Surface #FBF7F2 Off White

Cotton Pastel

Playful Consumer apps & kids 5 colors

Sky, cotton-candy and butter, kept legible by a soft charcoal ink. Pastels fail when they carry text — so here they never do; the ink does.

Open in generator All palettes

Text Gunmetal Gray — #33303A

Secondary Maya Blue — #8CB8E8

Accent Carnation — #F4A6C6

Primary Flax — #F7E08A

Surface Off White — #FBF7F2

Contrast matrix

Text on Surface 12.12 AAA

Primary on Surface 1.23 Fail

Text on Secondary 6.24 AA

Surface on Primary 1.23 Fail

Accent on Text 6.84 AA

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: #33303A;
  --secondary: #8CB8E8;
  --accent: #F4A6C6;
  --primary: #F7E08A;
  --surface: #FBF7F2;
}

$cotton-pastel-text: #33303A;
$cotton-pastel-secondary: #8CB8E8;
$cotton-pastel-accent: #F4A6C6;
$cotton-pastel-primary: #F7E08A;
$cotton-pastel-surface: #FBF7F2;

// tailwind.config.js — theme.extend.colors
colors: {
  'cotton-pastel': {
    'text': '#33303A',
    'secondary': '#8CB8E8',
    'accent': '#F4A6C6',
    'primary': '#F7E08A',
    'surface': '#FBF7F2',
  },
}

{
    "cotton-pastel": {
        "text": {
            "value": "#33303A",
            "type": "color"
        },
        "secondary": {
            "value": "#8CB8E8",
            "type": "color"
        },
        "accent": {
            "value": "#F4A6C6",
            "type": "color"
        },
        "primary": {
            "value": "#F7E08A",
            "type": "color"
        },
        "surface": {
            "value": "#FBF7F2",
            "type": "color"
        }
    }
}

{
    "text": "#33303A",
    "secondary": "#8CB8E8",
    "accent": "#F4A6C6",
    "primary": "#F7E08A",
    "surface": "#FBF7F2"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#33303A
#8CB8E8
#F4A6C6
#F7E08A
#FBF7F2

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.

Cotton Pastel

Contrast matrix

Export tokens

How the roles work

Related palettes