What are the hex codes in the Rose & Blue Gray Story palette?

The Rose & Blue Gray Story color palette consists of Rose #EE22AD, Blue Gray #0096D5, Melon #FFB97D, White #FDFDFD.

How should I use the Rose & Blue Gray Story palette on a website?

Use White #FDFDFD as the background, Rose #EE22AD for text, Blue Gray #0096D5 for buttons and links, and Melon #FFB97D for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Rose & Blue Gray Story have enough contrast for text?

The highest-contrast pair is #EE22AD on #FDFDFD with a ratio of 3.78:1, which passes WCAG AA for large text only.

#EE22ADRose

#0096D5Blue Gray

#FFB97DMelon

#FDFDFDWhite

Rose & Blue Gray Story color palette

Neon Blue White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Rose	`#EE22AD`	`rgb(238, 34, 173)`	`hsl(319, 86%, 53%)`	`oklch(64.1% 0.256 346)`
Blue Gray	`#0096D5`	`rgb(0, 150, 213)`	`hsl(198, 100%, 42%)`	`oklch(63.8% 0.140 237)`
Melon	`#FFB97D`	`rgb(255, 185, 125)`	`hsl(28, 100%, 75%)`	`oklch(83.8% 0.111 61)`
White	`#FDFDFD`	`rgb(253, 253, 253)`	`hsl(0, 0%, 99%)`	`oklch(99.4% 0.000 0)`

Why it works and how to use it

Rose & Blue Gray Story is a vivid complementary color palette tagged neon, blue, white. Rose and Melon sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Blue Gray takes the lead while the rest support. Lightness runs from 42% to 99%. Well suited to websites, presentations and branding.

Background: White (#FDFDFD) is the lightest color, so it belongs on large surfaces.
Text: Rose (#EE22AD) on #FDFDFD gives 3.78:1, enough for large headings only.
Primary: Blue Gray (#0096D5) is the most saturated mid-tone; use it for buttons and links (3.26:1 against the background, fine for UI elements).
Accent: Melon (#FFB97D) 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 Rose & Blue Gray Story

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

#EE22AD

#0096D5

#FFB97D

#FDFDFD

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
`#EE22AD` on `#FDFDFD`	Aa	3.78:1	AA large only
`#0096D5` on `#FDFDFD`	Aa	3.26:1	AA large only
`#EE22AD` on `#FFB97D`	Aa	2.28:1	Fail
`#0096D5` on `#FFB97D`	Aa	1.97:1	Fail
`#FFB97D` on `#FDFDFD`	Aa	1.65:1	Fail
`#EE22AD` on `#0096D5`	Aa	1.16:1	Fail

Similar palettes 24 more in this mood