What are the hex codes in the Ruby Cranberry & Caramel palette?

The Ruby Cranberry & Caramel color palette consists of Cranberry #900014, Caramel #D19200, Obsidian #070707, Pearl #EAE0CC.

How should I use the Ruby Cranberry & Caramel palette on a website?

Use Pearl #EAE0CC as the background, Obsidian #070707 for text, Cranberry #900014 for buttons and links, and Caramel #D19200 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Pearl at 15.38:1.

Which colors in Ruby Cranberry & Caramel have enough contrast for text?

The highest-contrast pair is #070707 on #EAE0CC with a ratio of 15.38:1, which passes WCAG AA for normal text.

#900014Cranberry

#D19200Caramel

#070707Obsidian

#EAE0CCPearl

Ruby Cranberry & Caramel color palette

Dark Warm Red Brown Black Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cranberry	`#900014`	`rgb(144, 0, 20)`	`hsl(352, 100%, 28%)`	`oklch(41.2% 0.167 25)`
Caramel	`#D19200`	`rgb(209, 146, 0)`	`hsl(42, 100%, 41%)`	`oklch(70.4% 0.147 78)`
Obsidian	`#070707`	`rgb(7, 7, 7)`	`hsl(0, 0%, 3%)`	`oklch(12.9% 0.000 0)`
Pearl	`#EAE0CC`	`rgb(234, 224, 204)`	`hsl(40, 42%, 86%)`	`oklch(90.9% 0.029 85)`

Why it works and how to use it

Ruby Cranberry & Caramel is a dark, analogous color palette tagged dark, warm, red. Analogous neighbors on the wheel (Cranberry, Caramel, Pearl) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

It works because the lightness range is wide (3% to 86%), which gives clear hierarchy between background, content and accents. Try it for dark-mode interfaces and gaming.

Background: Pearl (#EAE0CC) is the lightest color, so it belongs on large surfaces.
Text: Obsidian (#070707) on #EAE0CC gives 15.38:1, passing WCAG AAA.
Primary: Cranberry (#900014) is the most saturated mid-tone; use it for buttons and links (7.3:1 against the background, fine for UI elements).
Accent: Caramel (#D19200) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Pearl at 15.38:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Ruby Cranberry & Caramel

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

#900014

#D19200

#070707

#EAE0CC

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
`#070707` on `#EAE0CC`	Aa	15.38:1	AAA
`#D19200` on `#070707`	Aa	7.5:1	AAA
`#900014` on `#EAE0CC`	Aa	7.3:1	AAA
`#900014` on `#D19200`	Aa	3.56:1	AA large only
`#900014` on `#070707`	Aa	2.11:1	Fail
`#D19200` on `#EAE0CC`	Aa	2.05:1	Fail

:root {
  --cranberry: #900014;
  --caramel: #D19200;
  --obsidian: #070707;
  --pearl: #EAE0CC;
}

$cranberry: #900014;
$caramel: #D19200;
$obsidian: #070707;
$pearl: #EAE0CC;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'cranberry': '#900014',
        'caramel': '#D19200',
        'obsidian': '#070707',
        'pearl': '#EAE0CC',
      },
    },
  },
};

{
  "name": "Ruby Cranberry & Caramel",
  "colors": [
    "#900014",
    "#D19200",
    "#070707",
    "#EAE0CC"
  ]
}

background: linear-gradient(135deg, #900014, #D19200, #070707, #EAE0CC);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2026-08-11 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood