Start generating

Ocean Breeze to Dark Space color palette

D2E7E9Ocean Breeze9BC0C7Aquatic88A4A8Stormy Waters658086Catfish50686CSilent Night384B4FDark Space
Open in generator Export PNG, PDF, ASE…

About this palette

Ocean Breeze to Dark Space is a 6-color muted, gradient palette: #D2E7E9 (Ocean Breeze), #9BC0C7 (Aquatic), #88A4A8 (Stormy Waters), #658086 (Catfish), #50686C (Silent Night), #384B4F (Dark Space). It mixes gray, turquoise tones and feels cool overall. The strongest text pairing is #D2E7E9 on #384B4F with a contrast ratio of 7.15:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Ocean Breezergb(210, 231, 233)hsl(185, 34%, 87%)
Aquaticrgb(155, 192, 199)hsl(190, 28%, 69%)
Stormy Watersrgb(136, 164, 168)hsl(187, 16%, 60%)
Catfishrgb(101, 128, 134)hsl(191, 14%, 46%)
Silent Nightrgb(80, 104, 108)hsl(189, 15%, 37%)
Dark Spacergb(56, 75, 79)hsl(190, 17%, 26%)

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.

  • Aa7.15:1 Very good#D2E7E9 on #384B4F
  • Aa7.15:1 Very good#384B4F on #D2E7E9
  • Aa4.70:1 Good#9BC0C7 on #384B4F
  • Aa4.70:1 Good#384B4F on #9BC0C7
  • Aa4.62:1 Good#D2E7E9 on #50686C
  • Aa4.62:1 Good#50686C on #D2E7E9
  • Aa3.46:1 Poor#88A4A8 on #384B4F
  • Aa3.46:1 Poor#384B4F on #88A4A8

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Ocean Breeze to Dark Space — https://swatchly.xyz/palette/d2e7e9-9bc0c7-88a4a8-658086-50686c-384b4f */
:root {
  --ocean-breeze: #d2e7e9;
  --aquatic: #9bc0c7;
  --stormy-waters: #88a4a8;
  --catfish: #658086;
  --silent-night: #50686c;
  --dark-space: #384b4f;
}

Tailwind CSS v4

/* Ocean Breeze to Dark Space — https://swatchly.xyz/palette/d2e7e9-9bc0c7-88a4a8-658086-50686c-384b4f */
@theme {
  --color-ocean-breeze: #d2e7e9;
  --color-ocean-breeze-50: #e4f0f2;
  --color-ocean-breeze-100: #d2e7e9;
  --color-ocean-breeze-200: #c4d4d5;
  --color-ocean-breeze-300: #adbfc1;
  --color-ocean-breeze-400: #8ea2a3;
  --color-ocean-breeze-500: #74888a;
  --color-ocean-breeze-600: #5c6e70;
  --color-ocean-breeze-700: #48595a;
  --color-ocean-breeze-800: #374547;
  --color-ocean-breeze-900: #293537;
  --color-ocean-breeze-950: #182122;
  --color-aquatic: #9bc0c7;
  --color-aquatic-50: #e0f5fa;
  --color-aquatic-100: #d2ebef;
  --color-aquatic-200: #b9d6dc;
  --color-aquatic-300: #9bc0c7;
  --color-aquatic-400: #7fa2a8;
  --color-aquatic-500: #64888f;
  --color-aquatic-600: #4d6e75;
  --color-aquatic-700: #3a595e;
  --color-aquatic-800: #2b464b;
  --color-aquatic-900: #20373b;
  --color-aquatic-950: #112225;
  --color-stormy-waters: #88a4a8;
  --color-stormy-waters-50: #e7f8fa;
  --color-stormy-waters-100: #dbedf0;
  --color-stormy-waters-200: #c4dadd;
  --color-stormy-waters-300: #abc3c7;
  --color-stormy-waters-400: #88a4a8;
  --color-stormy-waters-500: #6e898d;
  --color-stormy-waters-600: #556f73;
  --color-stormy-waters-700: #41595c;
  --color-stormy-waters-800: #314648;
  --color-stormy-waters-900: #243638;
  --color-stormy-waters-950: #152224;
  --color-catfish: #658086;
  --color-catfish-50: #e6f7fa;
  --color-catfish-100: #d8ebef;
  --color-catfish-200: #bfd6db;
  --color-catfish-300: #a5bec4;
  --color-catfish-400: #829da3;
  --color-catfish-500: #658086;
  --color-catfish-600: #4e686d;
  --color-catfish-700: #3c5358;
  --color-catfish-800: #2d4145;
  --color-catfish-900: #223336;
  --color-catfish-950: #142023;
  --color-silent-night: #50686c;
  --color-silent-night-50: #eaf8fb;
  --color-silent-night-100: #dcedf0;
  --color-silent-night-200: #c4d9dc;
  --color-silent-night-300: #aac1c5;
  --color-silent-night-400: #88a0a5;
  --color-silent-night-500: #6b8488;
  --color-silent-night-600: #50686c;
  --color-silent-night-700: #3e5356;
  --color-silent-night-800: #2f4144;
  --color-silent-night-900: #233235;
  --color-silent-night-950: #141f21;
  --color-dark-space: #384b4f;
  --color-dark-space-50: #ebf8fa;
  --color-dark-space-100: #e0eef1;
  --color-dark-space-200: #cbdbde;
  --color-dark-space-300: #b3c6ca;
  --color-dark-space-400: #93a8ac;
  --color-dark-space-500: #798d92;
  --color-dark-space-600: #607378;
  --color-dark-space-700: #4b5d61;
  --color-dark-space-800: #384b4f;
  --color-dark-space-900: #2c393c;
  --color-dark-space-950: #1a2426;
}

Similar palettes