Ghost White to Silent Sea Color Palette

About this palette

Ghost White to Silent Sea is a 5-color muted, cool, gradient palette: #F7F8FF (Ghost White), #B2CCD1 (Wave), #7789A4 (Tempest), #356A7E (Ocean’s Embrace), #3A4D65 (Silent Sea). It mixes white, gray, blue tones and feels cool overall. The strongest text pairing is #F7F8FF on #3A4D65 with a contrast ratio of 8.16:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ghost White	rgb(247, 248, 255)	hsl(233, 100%, 98%)
Wave	rgb(178, 204, 209)	hsl(190, 25%, 76%)
Tempest	rgb(119, 137, 164)	hsl(216, 20%, 55%)
Ocean’s Embrace	rgb(53, 106, 126)	hsl(196, 41%, 35%)
Silent Sea	rgb(58, 77, 101)	hsl(213, 27%, 31%)

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.

Aa8.16:1 Very good#F7F8FF on #3A4D65
Aa8.16:1 Very good#3A4D65 on #F7F8FF
Aa5.64:1 Good#F7F8FF on #356A7E
Aa5.64:1 Good#356A7E on #F7F8FF
Aa5.13:1 Good#B2CCD1 on #3A4D65
Aa5.13:1 Good#3A4D65 on #B2CCD1
Aa3.54:1 Poor#B2CCD1 on #356A7E
Aa3.54:1 Poor#356A7E on #B2CCD1

Color blindness preview

CSS variables

/* Ghost White to Silent Sea — https://swatchly.xyz/palette/f7f8ff-b2ccd1-7789a4-356a7e-3a4d65 */
:root {
  --ghost-white: #f7f8ff;
  --wave: #b2ccd1;
  --tempest: #7789a4;
  --ocean-s-embrace: #356a7e;
  --silent-sea: #3a4d65;
}

Tailwind CSS v4

/* Ghost White to Silent Sea — https://swatchly.xyz/palette/f7f8ff-b2ccd1-7789a4-356a7e-3a4d65 */
@theme {
  --color-ghost-white: #f7f8ff;
  --color-ghost-white-50: #f7f8ff;
  --color-ghost-white-100: #edeef2;
  --color-ghost-white-200: #d9d9de;
  --color-ghost-white-300: #c1c2c8;
  --color-ghost-white-400: #a1a2a8;
  --color-ghost-white-500: #85868c;
  --color-ghost-white-600: #6a6b71;
  --color-ghost-white-700: #54555a;
  --color-ghost-white-800: #414247;
  --color-ghost-white-900: #323236;
  --color-ghost-white-950: #1f1f22;
  --color-wave: #b2ccd1;
  --color-wave-50: #edfbfe;
  --color-wave-100: #e3f2f5;
  --color-wave-200: #cee0e4;
  --color-wave-300: #b2ccd1;
  --color-wave-400: #93abb0;
  --color-wave-500: #768f93;
  --color-wave-600: #5c7378;
  --color-wave-700: #465b5f;
  --color-wave-800: #34474a;
  --color-wave-900: #263639;
  --color-wave-950: #162124;
  --color-tempest: #7789a4;
  --color-tempest-50: #f0f6ff;
  --color-tempest-100: #e1edff;
  --color-tempest-200: #cbdaef;
  --color-tempest-300: #b3c3dc;
  --color-tempest-400: #92a4bf;
  --color-tempest-500: #7789a4;
  --color-tempest-600: #5d6e88;
  --color-tempest-700: #48576e;
  --color-tempest-800: #364458;
  --color-tempest-900: #293445;
  --color-tempest-950: #18202c;
  --color-ocean-s-embrace: #356a7e;
  --color-ocean-s-embrace-50: #e8f8ff;
  --color-ocean-s-embrace-100: #cdf0fe;
  --color-ocean-s-embrace-200: #b2dbed;
  --color-ocean-s-embrace-300: #95c4d7;
  --color-ocean-s-embrace-400: #6fa3b8;
  --color-ocean-s-embrace-500: #51869b;
  --color-ocean-s-embrace-600: #356a7e;
  --color-ocean-s-embrace-700: #265465;
  --color-ocean-s-embrace-800: #194251;
  --color-ocean-s-embrace-900: #103340;
  --color-ocean-s-embrace-950: #072029;
  --color-silent-sea: #3a4d65;
  --color-silent-sea-50: #eff6ff;
  --color-silent-sea-100: #deedff;
  --color-silent-sea-200: #c8d9ef;
  --color-silent-sea-300: #b2c5dd;
  --color-silent-sea-400: #92a7c1;
  --color-silent-sea-500: #788da8;
  --color-silent-sea-600: #60748e;
  --color-silent-sea-700: #4c5f76;
  --color-silent-sea-800: #3a4d65;
  --color-silent-sea-900: #2d3b4d;
  --color-silent-sea-950: #1b2633;
}