Wavy Navy to Secret Garden Color Palette

About this palette

Wavy Navy to Secret Garden is a 4-color palette: #00628F (Wavy Navy), #492500 (Chocolate Castle), #FFBBEE (Bubblegum Heart), #16AE69 (Secret Garden). It mixes blue, brown, pink, green tones and feels balanced overall. The strongest text pairing is #492500 on #FFBBEE with a contrast ratio of 8.78:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wavy Navy	rgb(0, 98, 143)	hsl(199, 100%, 28%)
Chocolate Castle	rgb(73, 37, 0)	hsl(30, 100%, 14%)
Bubblegum Heart	rgb(255, 187, 238)	hsl(315, 100%, 87%)
Secret Garden	rgb(22, 174, 105)	hsl(153, 78%, 38%)

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.78:1 Very good#492500 on #FFBBEE
Aa8.78:1 Very good#FFBBEE on #492500
Aa4.71:1 Good#492500 on #16AE69
Aa4.71:1 Good#16AE69 on #492500
Aa4.32:1 Poor#00628F on #FFBBEE
Aa4.32:1 Poor#FFBBEE on #00628F

Color blindness preview

CSS variables

/* Wavy Navy to Secret Garden — https://swatchly.xyz/palette/00628f-492500-ffbbee-16ae69 */
:root {
  --wavy-navy: #00628f;
  --chocolate-castle: #492500;
  --bubblegum-heart: #ffbbee;
  --secret-garden: #16ae69;
}

Tailwind CSS v4

/* Wavy Navy to Secret Garden — https://swatchly.xyz/palette/00628f-492500-ffbbee-16ae69 */
@theme {
  --color-wavy-navy: #00628f;
  --color-wavy-navy-50: #ecf7ff;
  --color-wavy-navy-100: #d8efff;
  --color-wavy-navy-200: #b2e0ff;
  --color-wavy-navy-300: #8cccf6;
  --color-wavy-navy-400: #65aedc;
  --color-wavy-navy-500: #4593c3;
  --color-wavy-navy-600: #2879a6;
  --color-wavy-navy-700: #00628f;
  --color-wavy-navy-800: #004d71;
  --color-wavy-navy-900: #003b58;
  --color-wavy-navy-950: #002539;
  --color-chocolate-castle: #492500;
  --color-chocolate-castle-50: #fff3e9;
  --color-chocolate-castle-100: #ffe6d3;
  --color-chocolate-castle-200: #f3d0b5;
  --color-chocolate-castle-300: #dfb899;
  --color-chocolate-castle-400: #c19775;
  --color-chocolate-castle-500: #a57b58;
  --color-chocolate-castle-600: #88603f;
  --color-chocolate-castle-700: #6e4a2c;
  --color-chocolate-castle-800: #56381d;
  --color-chocolate-castle-900: #492500;
  --color-chocolate-castle-950: #2a1808;
  --color-bubblegum-heart: #ffbbee;
  --color-bubblegum-heart-50: #ffedfa;
  --color-bubblegum-heart-100: #ffdcf6;
  --color-bubblegum-heart-200: #ffbbee;
  --color-bubblegum-heart-300: #e3a9d4;
  --color-bubblegum-heart-400: #c688b7;
  --color-bubblegum-heart-500: #ab6c9c;
  --color-bubblegum-heart-600: #8e5381;
  --color-bubblegum-heart-700: #743f69;
  --color-bubblegum-heart-800: #5e2f54;
  --color-bubblegum-heart-900: #4a2241;
  --color-bubblegum-heart-950: #30132a;
  --color-secret-garden: #16ae69;
  --color-secret-garden-50: #e6ffee;
  --color-secret-garden-100: #caffdc;
  --color-secret-garden-200: #a1f4c0;
  --color-secret-garden-300: #7fe3a7;
  --color-secret-garden-400: #4fc785;
  --color-secret-garden-500: #16ae69;
  --color-secret-garden-600: #008d52;
  --color-secret-garden-700: #007040;
  --color-secret-garden-800: #005731;
  --color-secret-garden-900: #004224;
  --color-secret-garden-950: #002914;
}