#9B0012Cranberry
#AD3D31Rust
#352B15Espresso
#E4F4FFFrost

Classic Cranberry & Rust color palette

DarkWarmRedBrownWhite
Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

Classic Cranberry & Rust is a vivid analogous color palette tagged dark, warm, red. The hues stay within 48° of each other on the color wheel, which is why the palette feels cohesive rather than busy. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

Color codes click any value to copy

SwatchNameHEXRGBHSLOKLCH
Cranberry#9B0012rgb(155, 0, 18)hsl(353, 100%, 30%)oklch(43.4% 0.176 26)
Rust#AD3D31rgb(173, 61, 49)hsl(6, 56%, 44%)oklch(51.7% 0.149 29)
Espresso#352B15rgb(53, 43, 21)hsl(41, 43%, 15%)oklch(29.4% 0.038 86)
Frost#E4F4FFrgb(228, 244, 255)hsl(204, 100%, 95%)oklch(95.9% 0.023 238)

Why it works and how to use it

With 3 chromatic colors, Cranberry takes the lead while the rest support. Lightness runs from 15% to 95%. Well suited to websites, presentations and branding.

  • Background: Frost (#E4F4FF) is the lightest color, so it belongs on large surfaces.
  • Text: Espresso (#352B15) on #E4F4FF gives 12.39:1, passing WCAG AAA.
  • Primary: Cranberry (#9B0012) is the most saturated mid-tone; use it for buttons and links (7.78:1 against the background, fine for UI elements).
  • Accent: Rust (#AD3D31) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Frost at 12.39:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Classic Cranberry & Rust

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

#9B0012
#AD3D31
#352B15
#E4F4FF

Color-blind check: under protanopia and deuteranopia and tritanopia, Cranberry and Espresso become hard to tell apart, so do not rely on that pair alone to carry meaning.

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#352B15 on #E4F4FFAa12.39:1AAA
#9B0012 on #E4F4FFAa7.78:1AAA
#AD3D31 on #E4F4FFAa5.36:1AA
#AD3D31 on #352B15Aa2.31:1Fail
#9B0012 on #352B15Aa1.59:1Fail
#9B0012 on #AD3D31Aa1.45:1Fail

Similar palettes 24 more in this mood

More dark palettes →More warm palettes →More red palettes →More brown palettes →More white palettes →