What are the hex codes in the Crimson Cranberry & Cocoa palette?

The Crimson Cranberry & Cocoa color palette consists of Cocoa #836200, Cranberry #912219, Papaya #FDF0D5, Prussian Blue #003049.

How should I use the Crimson Cranberry & Cocoa palette on a website?

Use Papaya #FDF0D5 as the background, Prussian Blue #003049 for text, Cocoa #836200 for buttons and links, and Cranberry #912219 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Papaya on Prussian Blue at 12.25:1.

Which colors in Crimson Cranberry & Cocoa have enough contrast for text?

The highest-contrast pair is #FDF0D5 on #003049 with a ratio of 12.25:1, which passes WCAG AA for normal text.

#836200Cocoa

#912219Cranberry

#FDF0D5Papaya

#003049Prussian Blue

Crimson Cranberry & Cocoa color palette

Dark Red

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cocoa	`#836200`	`rgb(131, 98, 0)`	`hsl(45, 100%, 26%)`	`oklch(51.6% 0.106 85)`
Cranberry	`#912219`	`rgb(145, 34, 25)`	`hsl(5, 71%, 33%)`	`oklch(43.4% 0.148 29)`
Papaya	`#FDF0D5`	`rgb(253, 240, 213)`	`hsl(40, 91%, 91%)`	`oklch(95.8% 0.038 85)`
Prussian Blue	`#003049`	`rgb(0, 48, 73)`	`hsl(201, 100%, 14%)`	`oklch(29.4% 0.066 238)`

Why it works and how to use it

Crimson Cranberry & Cocoa is a vivid complementary color palette tagged dark, red. Cocoa and Prussian Blue 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, Cocoa takes the lead while the rest support. Lightness runs from 14% to 91%. Well suited to websites, presentations and branding.

Background: Papaya (#FDF0D5) is the lightest color, so it belongs on large surfaces.
Text: Prussian Blue (#003049) on #FDF0D5 gives 12.25:1, passing WCAG AAA.
Primary: Cocoa (#836200) is the most saturated mid-tone; use it for buttons and links (5.01:1 against the background, fine for UI elements).
Accent: Cranberry (#912219) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Papaya on Prussian Blue at 12.25:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Crimson Cranberry & Cocoa

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

#836200

#912219

#FDF0D5

#003049

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
`#FDF0D5` on `#003049`	Aa	12.25:1	AAA
`#912219` on `#FDF0D5`	Aa	7.6:1	AAA
`#836200` on `#FDF0D5`	Aa	5.01:1	AA
`#836200` on `#003049`	Aa	2.44:1	Fail
`#912219` on `#003049`	Aa	1.61:1	Fail
`#836200` on `#912219`	Aa	1.52:1	Fail

:root {
  --cocoa: #836200;
  --cranberry: #912219;
  --papaya: #FDF0D5;
  --prussian-blue: #003049;
}

$cocoa: #836200;
$cranberry: #912219;
$papaya: #FDF0D5;
$prussian-blue: #003049;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'cocoa': '#836200',
        'cranberry': '#912219',
        'papaya': '#FDF0D5',
        'prussian-blue': '#003049',
      },
    },
  },
};

{
  "name": "Crimson Cranberry & Cocoa",
  "colors": [
    "#836200",
    "#912219",
    "#FDF0D5",
    "#003049"
  ]
}

background: linear-gradient(135deg, #836200, #912219, #FDF0D5, #003049);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-10-24 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood