What are the hex codes in the Slate Blue & Flamingo Drift palette?

The Slate Blue & Flamingo Drift color palette consists of Apricot #FFD0C8, Flamingo #F47EAE, Amethyst #B368C0, Slate Blue #6C53CF.

How should I use the Slate Blue & Flamingo Drift palette on a website?

Use Apricot #FFD0C8 as the background, Slate Blue #6C53CF for text, Flamingo #F47EAE for buttons and links, and Amethyst #B368C0 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Slate Blue & Flamingo Drift have enough contrast for text?

The highest-contrast pair is #FFD0C8 on #6C53CF with a ratio of 4:1, which passes WCAG AA for large text only.

#FFD0C8Apricot

#F47EAEFlamingo

#B368C0Amethyst

#6C53CFSlate Blue

Slate Blue & Flamingo Drift color palette

Gradient Modern Vibrant Pink Purple

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Apricot	`#FFD0C8`	`rgb(255, 208, 200)`	`hsl(9, 100%, 89%)`	`oklch(89.6% 0.055 29)`
Flamingo	`#F47EAE`	`rgb(244, 126, 174)`	`hsl(336, 84%, 73%)`	`oklch(73.9% 0.153 356)`
Amethyst	`#B368C0`	`rgb(179, 104, 192)`	`hsl(291, 41%, 58%)`	`oklch(63.3% 0.150 322)`
Slate Blue	`#6C53CF`	`rgb(108, 83, 207)`	`hsl(252, 56%, 57%)`	`oklch(53.5% 0.183 288)`

Why it works and how to use it

Slate Blue & Flamingo Drift is a vivid split color palette tagged gradient, modern, vibrant. The hues span about 117°, enough contrast to create a focal point without the harshness of true complements. 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, Flamingo takes the lead while the rest support. Lightness runs from 57% to 89%. Well suited to websites, presentations and branding.

Background: Apricot (#FFD0C8) is the lightest color, so it belongs on large surfaces.
Text: Slate Blue (#6C53CF) on #FFD0C8 gives 4:1, enough for large headings only.
Primary: Flamingo (#F47EAE) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Amethyst (#B368C0) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

BrandFeaturesPricingBlogGet started

Design faster with Slate Blue & Flamingo Drift

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

#FFD0C8

#F47EAE

#B368C0

#6C53CF

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
`#FFD0C8` on `#6C53CF`	Aa	4:1	AA large only
`#FFD0C8` on `#B368C0`	Aa	2.67:1	Fail
`#F47EAE` on `#6C53CF`	Aa	2.24:1	Fail
`#FFD0C8` on `#F47EAE`	Aa	1.79:1	Fail
`#B368C0` on `#6C53CF`	Aa	1.5:1	Fail
`#F47EAE` on `#B368C0`	Aa	1.49:1	Fail

:root {
  --apricot: #FFD0C8;
  --flamingo: #F47EAE;
  --amethyst: #B368C0;
  --slate-blue: #6C53CF;
}

$apricot: #FFD0C8;
$flamingo: #F47EAE;
$amethyst: #B368C0;
$slate-blue: #6C53CF;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'apricot': '#FFD0C8',
        'flamingo': '#F47EAE',
        'amethyst': '#B368C0',
        'slate-blue': '#6C53CF',
      },
    },
  },
};

{
  "name": "Slate Blue & Flamingo Drift",
  "colors": [
    "#FFD0C8",
    "#F47EAE",
    "#B368C0",
    "#6C53CF"
  ]
}

background: linear-gradient(135deg, #FFD0C8, #F47EAE, #B368C0, #6C53CF);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

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

Similar palettes 24 more in this mood