What are the hex codes in the Melon & Lapis Drift palette?

The Melon & Lapis Drift color palette consists of Prussian Blue #203552, Lapis #456491, Melon #FFA292, Snow #FDF9F4.

How should I use the Melon & Lapis Drift palette on a website?

Use Snow #FDF9F4 as the background, Prussian Blue #203552 for text, Melon #FFA292 for buttons and links, and Lapis #456491 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Prussian Blue on Snow at 11.84:1.

Which colors in Melon & Lapis Drift have enough contrast for text?

The highest-contrast pair is #203552 on #FDF9F4 with a ratio of 11.84:1, which passes WCAG AA for normal text.

#203552Prussian Blue

#456491Lapis

#FFA292Melon

#FDF9F4Snow

Melon & Lapis Drift color palette

Modern White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Prussian Blue	`#203552`	`rgb(32, 53, 82)`	`hsl(215, 44%, 22%)`	`oklch(32.6% 0.059 257)`
Lapis	`#456491`	`rgb(69, 100, 145)`	`hsl(216, 36%, 42%)`	`oklch(49.9% 0.081 258)`
Melon	`#FFA292`	`rgb(255, 162, 146)`	`hsl(9, 100%, 79%)`	`oklch(80.2% 0.114 30)`
Snow	`#FDF9F4`	`rgb(253, 249, 244)`	`hsl(33, 69%, 97%)`	`oklch(98.4% 0.008 74)`

Why it works and how to use it

Melon & Lapis Drift is a vivid complementary color palette tagged modern, white. Near-complementary hues (about 154° apart) make this a high-contrast, attention-grabbing combination. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Melon takes the lead while the rest support. Lightness runs from 22% to 97%. Well suited to websites, presentations and branding.

Background: Snow (#FDF9F4) is the lightest color, so it belongs on large surfaces.
Text: Prussian Blue (#203552) on #FDF9F4 gives 11.84:1, passing WCAG AAA.
Primary: Melon (#FFA292) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Lapis (#456491) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Prussian Blue on Snow at 11.84:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Melon & Lapis 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

#203552

#456491

#FFA292

#FDF9F4

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
`#203552` on `#FDF9F4`	Aa	11.84:1	AAA
`#203552` on `#FFA292`	Aa	6.4:1	AA
`#456491` on `#FDF9F4`	Aa	5.75:1	AA
`#456491` on `#FFA292`	Aa	3.11:1	AA large only
`#203552` on `#456491`	Aa	2.06:1	Fail
`#FFA292` on `#FDF9F4`	Aa	1.85:1	Fail

Similar palettes 24 more in this mood