What colors are in the Faded Denim palette?

The Faded Denim palette has 5 colors: #20303F, #3E5C74, #6E90A8, #B9C7CE, #EEEBE2.

Where can I use this palette?

It's a Neutral palette — well suited to dashboards, minimal ui, corporate sites, dark-mode surfaces.

Is the Faded Denim palette accessible?

Its darkest and lightest colors have a contrast ratio of 11.32:1. 3 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 Faded Denim palette?

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

Text #20303F Gunmetal Gray Primary #3E5C74 Iron Gray Accent #6E90A8 Light Slate Gray Secondary #B9C7CE Lavender Gray Surface #EEEBE2 Eggshell

Faded Denim

Vintage Heritage & apparel brands 5 colors

Washed indigo and bone, like a jacket worn for a decade. Every tone is knocked back a step so nothing looks new — which is exactly the look.

Open in generator All palettes

Text Gunmetal Gray — #20303F

Primary Iron Gray — #3E5C74

Accent Light Slate Gray — #6E90A8

Secondary Lavender Gray — #B9C7CE

Surface Eggshell — #EEEBE2

Contrast matrix

Text on Surface 11.32 AAA

Primary on Surface 5.90 AA

Text on Secondary 7.79 AAA

Surface on Primary 5.90 AA

Accent on Text 4.00 AA Large

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: #20303F;
  --primary: #3E5C74;
  --accent: #6E90A8;
  --secondary: #B9C7CE;
  --surface: #EEEBE2;
}

$faded-denim-text: #20303F;
$faded-denim-primary: #3E5C74;
$faded-denim-accent: #6E90A8;
$faded-denim-secondary: #B9C7CE;
$faded-denim-surface: #EEEBE2;

// tailwind.config.js — theme.extend.colors
colors: {
  'faded-denim': {
    'text': '#20303F',
    'primary': '#3E5C74',
    'accent': '#6E90A8',
    'secondary': '#B9C7CE',
    'surface': '#EEEBE2',
  },
}

{
    "faded-denim": {
        "text": {
            "value": "#20303F",
            "type": "color"
        },
        "primary": {
            "value": "#3E5C74",
            "type": "color"
        },
        "accent": {
            "value": "#6E90A8",
            "type": "color"
        },
        "secondary": {
            "value": "#B9C7CE",
            "type": "color"
        },
        "surface": {
            "value": "#EEEBE2",
            "type": "color"
        }
    }
}

{
    "text": "#20303F",
    "primary": "#3E5C74",
    "accent": "#6E90A8",
    "secondary": "#B9C7CE",
    "surface": "#EEEBE2"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#20303F
#3E5C74
#6E90A8
#B9C7CE
#EEEBE2

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.

Faded Denim

Contrast matrix

Export tokens

How the roles work

Related palettes