Start generating

Wavy Navy to Shadow Play color palette

00638FWavy Navy004B69Raging ThunderstormE78936Bourbon Peach0090C4SwimmerFFBD85Goose Bill2D1400Shadow Play
Open in generator Export PNG, PDF, ASE…

About this palette

Wavy Navy to Shadow Play is a 6-color palette: #00638F (Wavy Navy), #004B69 (Raging Thunderstorm), #E78936 (Bourbon Peach), #0090C4 (Swimmer), #FFBD85 (Goose Bill), #2D1400 (Shadow Play). It mixes blue, orange, brown tones and feels balanced overall. The strongest text pairing is #FFBD85 on #2D1400 with a contrast ratio of 10.62:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Wavy Navyrgb(0, 99, 143)hsl(198, 100%, 28%)
Raging Thunderstormrgb(0, 75, 105)hsl(197, 100%, 21%)
Bourbon Peachrgb(231, 137, 54)hsl(28, 79%, 56%)
Swimmerrgb(0, 144, 196)hsl(196, 100%, 38%)
Goose Billrgb(255, 189, 133)hsl(28, 100%, 76%)
Shadow Playrgb(45, 20, 0)hsl(27, 100%, 9%)

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.

  • Aa10.62:1 Very good#FFBD85 on #2D1400
  • Aa10.62:1 Very good#2D1400 on #FFBD85
  • Aa6.63:1 Good#E78936 on #2D1400
  • Aa6.63:1 Good#2D1400 on #E78936
  • Aa5.82:1 Good#004B69 on #FFBD85
  • Aa5.82:1 Good#FFBD85 on #004B69
  • Aa4.78:1 Good#0090C4 on #2D1400
  • Aa4.78:1 Good#2D1400 on #0090C4

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Wavy Navy to Shadow Play — https://swatchly.xyz/palette/00638f-004b69-e78936-0090c4-ffbd85-2d1400 */
:root {
  --wavy-navy: #00638f;
  --raging-thunderstorm: #004b69;
  --bourbon-peach: #e78936;
  --swimmer: #0090c4;
  --goose-bill: #ffbd85;
  --shadow-play: #2d1400;
}

Tailwind CSS v4

/* Wavy Navy to Shadow Play — https://swatchly.xyz/palette/00638f-004b69-e78936-0090c4-ffbd85-2d1400 */
@theme {
  --color-wavy-navy: #00638f;
  --color-wavy-navy-50: #ebf7ff;
  --color-wavy-navy-100: #d8efff;
  --color-wavy-navy-200: #b1e0ff;
  --color-wavy-navy-300: #8cccf6;
  --color-wavy-navy-400: #65aedc;
  --color-wavy-navy-500: #4594c2;
  --color-wavy-navy-600: #2879a6;
  --color-wavy-navy-700: #00638f;
  --color-wavy-navy-800: #004d71;
  --color-wavy-navy-900: #003b58;
  --color-wavy-navy-950: #002539;
  --color-raging-thunderstorm: #004b69;
  --color-raging-thunderstorm-50: #ebf7ff;
  --color-raging-thunderstorm-100: #d6f0ff;
  --color-raging-thunderstorm-200: #b1dff9;
  --color-raging-thunderstorm-300: #95cae7;
  --color-raging-thunderstorm-400: #70abcc;
  --color-raging-thunderstorm-500: #5290b1;
  --color-raging-thunderstorm-600: #387595;
  --color-raging-thunderstorm-700: #245e7b;
  --color-raging-thunderstorm-800: #004b69;
  --color-raging-thunderstorm-900: #0b394f;
  --color-raging-thunderstorm-950: #032434;
  --color-bourbon-peach: #e78936;
  --color-bourbon-peach-50: #fff3eb;
  --color-bourbon-peach-100: #ffe7d6;
  --color-bourbon-peach-200: #ffcea9;
  --color-bourbon-peach-300: #ffae6e;
  --color-bourbon-peach-400: #e78936;
  --color-bourbon-peach-500: #c86d08;
  --color-bourbon-peach-600: #a25600;
  --color-bourbon-peach-700: #824400;
  --color-bourbon-peach-800: #663400;
  --color-bourbon-peach-900: #4f2700;
  --color-bourbon-peach-950: #331700;
  --color-swimmer: #0090c4;
  --color-swimmer-50: #eaf7ff;
  --color-swimmer-100: #d4efff;
  --color-swimmer-200: #a7e0ff;
  --color-swimmer-300: #72ccfb;
  --color-swimmer-400: #40ace0;
  --color-swimmer-500: #0090c4;
  --color-swimmer-600: #00749f;
  --color-swimmer-700: #005c7f;
  --color-swimmer-800: #004864;
  --color-swimmer-900: #00374e;
  --color-swimmer-950: #002333;
  --color-goose-bill: #ffbd85;
  --color-goose-bill-50: #ffe9d8;
  --color-goose-bill-100: #ffdabc;
  --color-goose-bill-200: #ffbd85;
  --color-goose-bill-300: #e4aa7a;
  --color-goose-bill-400: #c98b56;
  --color-goose-bill-500: #ae713a;
  --color-goose-bill-600: #925921;
  --color-goose-bill-700: #79450d;
  --color-goose-bill-800: #633500;
  --color-goose-bill-900: #4d2800;
  --color-goose-bill-950: #321800;
  --color-shadow-play: #2d1400;
  --color-shadow-play-50: #fff3e9;
  --color-shadow-play-100: #fde6d6;
  --color-shadow-play-200: #ecd2be;
  --color-shadow-play-300: #d8baa5;
  --color-shadow-play-400: #ba9a82;
  --color-shadow-play-500: #9e7e66;
  --color-shadow-play-600: #81634c;
  --color-shadow-play-700: #684d38;
  --color-shadow-play-800: #513a28;
  --color-shadow-play-900: #3e2b1c;
  --color-shadow-play-950: #2d1400;
}

Similar palettes