Foundation White to Marine color palette

F0EBFFFoundation White 9BD7F7Over the Sky 00B7DFBlue Bikini 6863A0Scampi 00478BPacific Depths 152E5DMarine

Open in generator Export PNG, PDF, ASE…

About this palette

Foundation White to Marine is a 6-color cool palette: #F0EBFF (Foundation White), #9BD7F7 (Over the Sky), #00B7DF (Blue Bikini), #6863A0 (Scampi), #00478B (Pacific Depths), #152E5D (Marine). It mixes white, blue, purple tones and feels cool overall. The strongest text pairing is #F0EBFF on #152E5D with a contrast ratio of 11.41:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Foundation White	rgb(240, 235, 255)	hsl(255, 100%, 96%)
Over the Sky	rgb(155, 215, 247)	hsl(201, 85%, 79%)
Blue Bikini	rgb(0, 183, 223)	hsl(191, 100%, 44%)
Scampi	rgb(104, 99, 160)	hsl(245, 24%, 51%)
Pacific Depths	rgb(0, 71, 139)	hsl(209, 100%, 27%)
Marine	rgb(21, 46, 93)	hsl(219, 63%, 22%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa11.41:1 Very good#F0EBFF on #152E5D
Aa11.41:1 Very good#152E5D on #F0EBFF
Aa8.51:1 Very good#9BD7F7 on #152E5D
Aa8.51:1 Very good#152E5D on #9BD7F7
Aa7.93:1 Very good#F0EBFF on #00478B
Aa7.93:1 Very good#00478B on #F0EBFF
Aa5.92:1 Good#9BD7F7 on #00478B
Aa5.92:1 Good#00478B on #9BD7F7

Color blindness preview

CSS variables

/* Foundation White to Marine — https://swatchly.xyz/palette/f0ebff-9bd7f7-00b7df-6863a0-00478b-152e5d */
:root {
  --foundation-white: #f0ebff;
  --over-the-sky: #9bd7f7;
  --blue-bikini: #00b7df;
  --scampi: #6863a0;
  --pacific-depths: #00478b;
  --marine: #152e5d;
}

Tailwind CSS v4

/* Foundation White to Marine — https://swatchly.xyz/palette/f0ebff-9bd7f7-00b7df-6863a0-00478b-152e5d */
@theme {
  --color-foundation-white: #f0ebff;
  --color-foundation-white-50: #f8f6ff;
  --color-foundation-white-100: #f0ebff;
  --color-foundation-white-200: #dbd8e6;
  --color-foundation-white-300: #c4c0d0;
  --color-foundation-white-400: #a4a0b2;
  --color-foundation-white-500: #898496;
  --color-foundation-white-600: #6e697a;
  --color-foundation-white-700: #575362;
  --color-foundation-white-800: #43404d;
  --color-foundation-white-900: #34313c;
  --color-foundation-white-950: #201e26;
  --color-over-the-sky: #9bd7f7;
  --color-over-the-sky-50: #dcf2ff;
  --color-over-the-sky-100: #c2e9ff;
  --color-over-the-sky-200: #9bd7f7;
  --color-over-the-sky-300: #8dc1dd;
  --color-over-the-sky-400: #6ba4c1;
  --color-over-the-sky-500: #508aa7;
  --color-over-the-sky-600: #38708c;
  --color-over-the-sky-700: #255a74;
  --color-over-the-sky-800: #18485e;
  --color-over-the-sky-900: #0d384a;
  --color-over-the-sky-950: #052330;
  --color-blue-bikini: #00b7df;
  --color-blue-bikini-50: #eafaff;
  --color-blue-bikini-100: #d3f4ff;
  --color-blue-bikini-200: #9ee7ff;
  --color-blue-bikini-300: #66d5f7;
  --color-blue-bikini-400: #00b7df;
  --color-blue-bikini-500: #0098ba;
  --color-blue-bikini-600: #007a96;
  --color-blue-bikini-700: #006177;
  --color-blue-bikini-800: #004b5e;
  --color-blue-bikini-900: #003a48;
  --color-blue-bikini-950: #00242e;
  --color-scampi: #6863a0;
  --color-scampi-50: #f4f4ff;
  --color-scampi-100: #e9e9ff;
  --color-scampi-200: #d4d2ff;
  --color-scampi-300: #bcbaf3;
  --color-scampi-400: #9d99d8;
  --color-scampi-500: #827ebd;
  --color-scampi-600: #6863a0;
  --color-scampi-700: #524d84;
  --color-scampi-800: #403b6a;
  --color-scampi-900: #312c55;
  --color-scampi-950: #1e1b37;
  --color-pacific-depths: #00478b;
  --color-pacific-depths-50: #eff6ff;
  --color-pacific-depths-100: #deedff;
  --color-pacific-depths-200: #bddaff;
  --color-pacific-depths-300: #97c6ff;
  --color-pacific-depths-400: #6ca7ef;
  --color-pacific-depths-500: #4e8cd5;
  --color-pacific-depths-600: #3571b8;
  --color-pacific-depths-700: #225b9c;
  --color-pacific-depths-800: #00478b;
  --color-pacific-depths-900: #083769;
  --color-pacific-depths-950: #022247;
  --color-marine: #152e5d;
  --color-marine-50: #f0f5ff;
  --color-marine-100: #e1ecff;
  --color-marine-200: #c2d8ff;
  --color-marine-300: #a6c2f3;
  --color-marine-400: #83a2d7;
  --color-marine-500: #6785bb;
  --color-marine-600: #4e6a9d;
  --color-marine-700: #395381;
  --color-marine-800: #2a4067;
  --color-marine-900: #152e5d;
  --color-marine-950: #101d34;
}