#900014Cranberry
#D19200Caramel
#070707Obsidian
#EAE0CCPearl

Ruby Cranberry & Caramel color palette

DarkWarmRedBrownBlackGray
Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

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.

Color codes click any value to copy

SwatchNameHEXRGBHSLOKLCH
Cranberry#900014rgb(144, 0, 20)hsl(352, 100%, 28%)oklch(41.2% 0.167 25)
Caramel#D19200rgb(209, 146, 0)hsl(42, 100%, 41%)oklch(70.4% 0.147 78)
Obsidian#070707rgb(7, 7, 7)hsl(0, 0%, 3%)oklch(12.9% 0.000 0)
Pearl#EAE0CCrgb(234, 224, 204)hsl(40, 42%, 86%)oklch(90.9% 0.029 85)

Why it works and how to use it

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
Card title
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.

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#070707 on #EAE0CCAa15.38:1AAA
#D19200 on #070707Aa7.5:1AAA
#900014 on #EAE0CCAa7.3:1AAA
#900014 on #D19200Aa3.56:1AA large only
#900014 on #070707Aa2.11:1Fail
#D19200 on #EAE0CCAa2.05:1Fail

Similar palettes 24 more in this mood

More dark palettes →More warm palettes →More red palettes →More brown palettes →More black palettes →More gray palettes →