What are the hex codes in the Golden Cantaloupe & Slate Blue palette?

The Golden Cantaloupe & Slate Blue color palette consists of Space #313579, Slate Blue #6064B1, Cantaloupe #FFA954, Smoke #F8F6F1.

How should I use the Golden Cantaloupe & Slate Blue palette on a website?

Use Smoke #F8F6F1 as the background, Space #313579 for text, Cantaloupe #FFA954 for buttons and links, and Slate Blue #6064B1 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Space on Smoke at 10.15:1.

Which colors in Golden Cantaloupe & Slate Blue have enough contrast for text?

The highest-contrast pair is #313579 on #F8F6F1 with a ratio of 10.15:1, which passes WCAG AA for normal text.

#313579Space

#6064B1Slate Blue

#FFA954Cantaloupe

#F8F6F1Smoke

Golden Cantaloupe & Slate Blue color palette

Retro Blue Orange White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Space	`#313579`	`rgb(49, 53, 121)`	`hsl(237, 42%, 33%)`	`oklch(36.6% 0.114 277)`
Slate Blue	`#6064B1`	`rgb(96, 100, 177)`	`hsl(237, 34%, 54%)`	`oklch(53.6% 0.119 279)`
Cantaloupe	`#FFA954`	`rgb(255, 169, 84)`	`hsl(30, 100%, 66%)`	`oklch(80.4% 0.142 63)`
Smoke	`#F8F6F1`	`rgb(248, 246, 241)`	`hsl(43, 33%, 96%)`	`oklch(97.3% 0.007 89)`

Why it works and how to use it

Golden Cantaloupe & Slate Blue is a complementary color palette tagged retro, blue, orange. Near-complementary hues (about 153° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Cantaloupe takes the lead while the rest support. Lightness runs from 33% to 96%. Well suited to websites, presentations and branding.

Background: Smoke (#F8F6F1) is the lightest color, so it belongs on large surfaces.
Text: Space (#313579) on #F8F6F1 gives 10.15:1, passing WCAG AAA.
Primary: Cantaloupe (#FFA954) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Slate Blue (#6064B1) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Space on Smoke at 10.15:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Golden Cantaloupe & Slate Blue

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

#313579

#6064B1

#FFA954

#F8F6F1

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
`#313579` on `#F8F6F1`	Aa	10.15:1	AAA
`#313579` on `#FFA954`	Aa	5.77:1	AA
`#6064B1` on `#F8F6F1`	Aa	4.92:1	AA
`#6064B1` on `#FFA954`	Aa	2.8:1	Fail
`#313579` on `#6064B1`	Aa	2.06:1	Fail
`#FFA954` on `#F8F6F1`	Aa	1.76:1	Fail

:root {
  --space: #313579;
  --slate-blue: #6064B1;
  --cantaloupe: #FFA954;
  --smoke: #F8F6F1;
}

$space: #313579;
$slate-blue: #6064B1;
$cantaloupe: #FFA954;
$smoke: #F8F6F1;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'space': '#313579',
        'slate-blue': '#6064B1',
        'cantaloupe': '#FFA954',
        'smoke': '#F8F6F1',
      },
    },
  },
};

{
  "name": "Golden Cantaloupe & Slate Blue",
  "colors": [
    "#313579",
    "#6064B1",
    "#FFA954",
    "#F8F6F1"
  ]
}

background: linear-gradient(135deg, #313579, #6064B1, #FFA954, #F8F6F1);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-05-12 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood