What are the hex codes in the Cranberry & Amethyst Shore palette?

The Cranberry & Amethyst Shore color palette consists of Cranberry #9F004A, Amethyst #B157B3, Cornflower #A390FF, Baby Blue #98C8FF.

How should I use the Cranberry & Amethyst Shore palette on a website?

Use Baby Blue #98C8FF as the background, Cranberry #9F004A for text, Cornflower #A390FF for buttons and links, and Amethyst #B157B3 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cranberry on Baby Blue at 4.68:1.

Which colors in Cranberry & Amethyst Shore have enough contrast for text?

The highest-contrast pair is #9F004A on #98C8FF with a ratio of 4.68:1, which passes WCAG AA for normal text.

#9F004ACranberry

#B157B3Amethyst

#A390FFCornflower

#98C8FFBaby Blue

Cranberry & Amethyst Shore color palette

Modern Vibrant Purple Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cranberry	`#9F004A`	`rgb(159, 0, 74)`	`hsl(332, 100%, 31%)`	`oklch(45.2% 0.182 4)`
Amethyst	`#B157B3`	`rgb(177, 87, 179)`	`hsl(299, 38%, 52%)`	`oklch(60.0% 0.165 327)`
Cornflower	`#A390FF`	`rgb(163, 144, 255)`	`hsl(250, 100%, 78%)`	`oklch(71.7% 0.158 290)`
Baby Blue	`#98C8FF`	`rgb(152, 200, 255)`	`hsl(212, 100%, 80%)`	`oklch(81.9% 0.093 252)`

Why it works and how to use it

Cranberry & Amethyst Shore is a vivid split color palette tagged modern, vibrant, purple. The hues span about 120°, 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, Cornflower takes the lead while the rest support. Lightness runs from 31% to 80%. Well suited to websites, presentations and branding.

Background: Baby Blue (#98C8FF) is the lightest color, so it belongs on large surfaces.
Text: Cranberry (#9F004A) on #98C8FF gives 4.68:1, passing WCAG AA.
Primary: Cornflower (#A390FF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Amethyst (#B157B3) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cranberry on Baby Blue at 4.68:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Cranberry & Amethyst Shore

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

#9F004A

#B157B3

#A390FF

#98C8FF

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
`#9F004A` on `#98C8FF`	Aa	4.68:1	AA
`#9F004A` on `#A390FF`	Aa	3.11:1	AA large only
`#B157B3` on `#98C8FF`	Aa	2.47:1	Fail
`#9F004A` on `#B157B3`	Aa	1.9:1	Fail
`#B157B3` on `#A390FF`	Aa	1.64:1	Fail
`#A390FF` on `#98C8FF`	Aa	1.51:1	Fail

:root {
  --cranberry: #9F004A;
  --amethyst: #B157B3;
  --cornflower: #A390FF;
  --baby-blue: #98C8FF;
}

$cranberry: #9F004A;
$amethyst: #B157B3;
$cornflower: #A390FF;
$baby-blue: #98C8FF;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'cranberry': '#9F004A',
        'amethyst': '#B157B3',
        'cornflower': '#A390FF',
        'baby-blue': '#98C8FF',
      },
    },
  },
};

{
  "name": "Cranberry & Amethyst Shore",
  "colors": [
    "#9F004A",
    "#B157B3",
    "#A390FF",
    "#98C8FF"
  ]
}

background: linear-gradient(135deg, #9F004A, #B157B3, #A390FF, #98C8FF);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-11-17 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood