#0086A6
#4D9184
#37A8F6
#00CCD6
#00646FPeacock
#0080B9Ocean
#7192FFCornflower
#DFCFFFPeriwinkle
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.
Color codes click any value to copy
| Swatch | 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
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 SecondaryCard title
Card title
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.
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 |
Similar palettes 24 more in this mood
#96BAFE
#8F7CCD
#00939A
#005D7F
#D4D2FF
#9FCBEC
#2F59BD
#006B81
#00D8D7
#6075BF
#00596C
#00436D
#014D71
#267CB2
#5CA9E7
#B7E6FF
#68709B
#9271DA
#639EC2
#84B8FF
#00545D
#006E7A
#00C4CE
#3BD9F9
#004345
#008991
#00B9B8
#00D4CE
#7F9A6D
#009C99
#3F7283
#1F4E3A
#9DE8D2
#00B1B8
#2E7940
#273400
#002E6E
#1A73D4
#6D93E8
#9DC6FF
#BEB6FF
#5596F8
#0099C7
#774384
#A3E3FF
#4EB2E1
#006DA5
#003F59
#313965
#005561
#14A9FE
#E5D2FD
#2BEDFF
#11C2D0
#008087
#00494B
#4B537A
#892680
#1CA6FF
#D1B6F9
#004C5C
#4C5E14
#2B7C4D
#3E837B
#0077B6
#00B4D8
#90E0EF
#CAF0F8
#03256C
#2541B2
#1768AC
#06BEE1
#023E8A
#0077B6
#00B4D8
#90E0EF
#007D9B
#00B8BD
#90E3DD
#CAF1EF
#FFB9E6
#3AA1F5
#A26DCA
#2B287A
#00304E
#00538D
#006F94
#00C2C8
#00486A
#007D9C
#00B8BF
#90E3DE