What are the hex codes in the Lagoon Cornflower & Ocean palette?

The Lagoon Cornflower & Ocean color palette consists of Peacock #00646F, Ocean #0080B9, Cornflower #7192FF, Periwinkle #DFCFFF.

How should I use the Lagoon Cornflower & Ocean palette on a website?

Use Periwinkle #DFCFFF as the background, Peacock #00646F for text, Ocean #0080B9 for buttons and links, and Cornflower #7192FF for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Peacock on Periwinkle at 4.75:1.

Which colors in Lagoon Cornflower & Ocean have enough contrast for text?

The highest-contrast pair is #00646F on #DFCFFF with a ratio of 4.75:1, which passes WCAG AA for normal text.

#00646FPeacock

#0080B9Ocean

#7192FFCornflower

#DFCFFFPeriwinkle

Lagoon Cornflower & Ocean color palette

Ocean Cold Teal Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Peacock	`#00646F`	`rgb(0, 100, 111)`	`hsl(186, 100%, 22%)`	`oklch(46.0% 0.079 208)`
Ocean	`#0080B9`	`rgb(0, 128, 185)`	`hsl(198, 100%, 36%)`	`oklch(57.0% 0.127 238)`
Cornflower	`#7192FF`	`rgb(113, 146, 255)`	`hsl(226, 100%, 72%)`	`oklch(68.6% 0.165 269)`
Periwinkle	`#DFCFFF`	`rgb(223, 207, 255)`	`hsl(260, 100%, 91%)`	`oklch(88.3% 0.067 300)`

Why it works and how to use it

Lagoon Cornflower & Ocean is a vivid split color palette tagged ocean, cold, teal. A split scheme: Peacock plays against Periwinkle across roughly 74° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is cool.

With 4 chromatic colors, Ocean takes the lead while the rest support. Lightness runs from 22% to 91%. Well suited to websites, presentations and branding.

Background: Periwinkle (#DFCFFF) is the lightest color, so it belongs on large surfaces.
Text: Peacock (#00646F) on #DFCFFF gives 4.75:1, passing WCAG AA.
Primary: Ocean (#0080B9) is the most saturated mid-tone; use it for buttons and links (3.03:1 against the background, fine for UI elements).
Accent: Cornflower (#7192FF) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Peacock on Periwinkle at 4.75:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Lagoon Cornflower & Ocean

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

#00646F

#0080B9

#7192FF

#DFCFFF

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
`#00646F` on `#DFCFFF`	Aa	4.75:1	AA
`#0080B9` on `#DFCFFF`	Aa	3.03:1	AA large only
`#00646F` on `#7192FF`	Aa	2.38:1	Fail
`#7192FF` on `#DFCFFF`	Aa	2:1	Fail
`#00646F` on `#0080B9`	Aa	1.57:1	Fail
`#0080B9` on `#7192FF`	Aa	1.52:1	Fail

:root {
  --peacock: #00646F;
  --ocean: #0080B9;
  --cornflower: #7192FF;
  --periwinkle: #DFCFFF;
}

$peacock: #00646F;
$ocean: #0080B9;
$cornflower: #7192FF;
$periwinkle: #DFCFFF;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'peacock': '#00646F',
        'ocean': '#0080B9',
        'cornflower': '#7192FF',
        'periwinkle': '#DFCFFF',
      },
    },
  },
};

{
  "name": "Lagoon Cornflower & Ocean",
  "colors": [
    "#00646F",
    "#0080B9",
    "#7192FF",
    "#DFCFFF"
  ]
}

background: linear-gradient(135deg, #00646F, #0080B9, #7192FF, #DFCFFF);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-02-16 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood