What colors are in the Sunlit Studio palette?

The Sunlit Studio palette has 5 colors: #2B2620, #6B5D48, #D9A441, #EAD9B0, #FBF6EC.

Where can I use this palette?

It's a Earthy palette — well suited to organic brands, food & craft, interiors, rustic & natural themes.

Is the Sunlit Studio palette accessible?

Its darkest and lightest colors have a contrast ratio of 13.92:1. 5 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 Sunlit Studio palette?

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

Text #2B2620 Bistre Secondary #6B5D48 Ebony Primary #D9A441 Goldenrod Accent #EAD9B0 Wheat Surface #FBF6EC Seashell

Sunlit Studio

Minimal Portfolios & studios 5 colors

Warm paper with a golden accent held back for links and the one thing that matters. Text is a soft espresso, never pure black, so the page reads like a printed sheet.

Open in generator All palettes

Text Bistre — #2B2620

Secondary Ebony — #6B5D48

Primary Goldenrod — #D9A441

Accent Wheat — #EAD9B0

Surface Seashell — #FBF6EC

Contrast matrix

Text on Surface 13.92 AAA

Primary on Surface 2.09 Fail

Text on Secondary 2.34 Fail

Surface on Primary 2.09 Fail

Accent on Text 10.74 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: #2B2620;
  --secondary: #6B5D48;
  --primary: #D9A441;
  --accent: #EAD9B0;
  --surface: #FBF6EC;
}

$sunlit-studio-text: #2B2620;
$sunlit-studio-secondary: #6B5D48;
$sunlit-studio-primary: #D9A441;
$sunlit-studio-accent: #EAD9B0;
$sunlit-studio-surface: #FBF6EC;

// tailwind.config.js — theme.extend.colors
colors: {
  'sunlit-studio': {
    'text': '#2B2620',
    'secondary': '#6B5D48',
    'primary': '#D9A441',
    'accent': '#EAD9B0',
    'surface': '#FBF6EC',
  },
}

{
    "sunlit-studio": {
        "text": {
            "value": "#2B2620",
            "type": "color"
        },
        "secondary": {
            "value": "#6B5D48",
            "type": "color"
        },
        "primary": {
            "value": "#D9A441",
            "type": "color"
        },
        "accent": {
            "value": "#EAD9B0",
            "type": "color"
        },
        "surface": {
            "value": "#FBF6EC",
            "type": "color"
        }
    }
}

{
    "text": "#2B2620",
    "secondary": "#6B5D48",
    "primary": "#D9A441",
    "accent": "#EAD9B0",
    "surface": "#FBF6EC"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#2B2620
#6B5D48
#D9A441
#EAD9B0
#FBF6EC

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.

Sunlit Studio

Contrast matrix

Export tokens

How the roles work

Related palettes