What are the hex codes in the Sunny Caramel & Sepia palette?

The Sunny Caramel & Sepia color palette consists of Sepia #6B4E00, Caramel #C99A00, Periwinkle #DFCDFF, Buttercream #FFF3C4.

How should I use the Sunny Caramel & Sepia palette on a website?

Use Buttercream #FFF3C4 as the background, Sepia #6B4E00 for text, Caramel #C99A00 for buttons and links, and Periwinkle #DFCDFF for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Sepia on Buttercream at 6.95:1.

Which colors in Sunny Caramel & Sepia have enough contrast for text?

The highest-contrast pair is #6B4E00 on #FFF3C4 with a ratio of 6.95:1, which passes WCAG AA for normal text.

#6B4E00Sepia

#C99A00Caramel

#DFCDFFPeriwinkle

#FFF3C4Buttercream

Sunny Caramel & Sepia color palette

Modern Brown Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Sepia	`#6B4E00`	`rgb(107, 78, 0)`	`hsl(44, 100%, 21%)`	`oklch(44.3% 0.091 84)`
Caramel	`#C99A00`	`rgb(201, 154, 0)`	`hsl(46, 100%, 39%)`	`oklch(71.1% 0.145 87)`
Periwinkle	`#DFCDFF`	`rgb(223, 205, 255)`	`hsl(262, 100%, 90%)`	`oklch(87.9% 0.071 301)`
Buttercream	`#FFF3C4`	`rgb(255, 243, 196)`	`hsl(48, 100%, 88%)`	`oklch(96.2% 0.062 95)`

Why it works and how to use it

Sunny Caramel & Sepia is a vivid complementary color palette tagged modern, brown, beige. Sepia and Buttercream sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Caramel takes the lead while the rest support. Lightness runs from 21% to 90%. Well suited to websites, presentations and branding.

Background: Buttercream (#FFF3C4) is the lightest color, so it belongs on large surfaces.
Text: Sepia (#6B4E00) on #FFF3C4 gives 6.95:1, passing WCAG AA.
Primary: Caramel (#C99A00) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Periwinkle (#DFCDFF) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Sepia on Buttercream at 6.95:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Sunny Caramel & Sepia

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#6B4E00

#C99A00

#DFCDFF

#FFF3C4

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#6B4E00` on `#FFF3C4`	Aa	6.95:1	AA
`#6B4E00` on `#DFCDFF`	Aa	5.27:1	AA
`#6B4E00` on `#C99A00`	Aa	2.99:1	Fail
`#C99A00` on `#FFF3C4`	Aa	2.33:1	Fail
`#C99A00` on `#DFCDFF`	Aa	1.77:1	Fail
`#DFCDFF` on `#FFF3C4`	Aa	1.32:1	Fail

:root {
  --sepia: #6B4E00;
  --caramel: #C99A00;
  --periwinkle: #DFCDFF;
  --buttercream: #FFF3C4;
}

$sepia: #6B4E00;
$caramel: #C99A00;
$periwinkle: #DFCDFF;
$buttercream: #FFF3C4;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'sepia': '#6B4E00',
        'caramel': '#C99A00',
        'periwinkle': '#DFCDFF',
        'buttercream': '#FFF3C4',
      },
    },
  },
};

{
  "name": "Sunny Caramel & Sepia",
  "colors": [
    "#6B4E00",
    "#C99A00",
    "#DFCDFF",
    "#FFF3C4"
  ]
}

background: linear-gradient(135deg, #6B4E00, #C99A00, #DFCDFF, #FFF3C4);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-02-17 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood