Hydra to Bermuda Onion color palette

006D97Hydra 573000Moelleux au Chocolat B2E2FFFrozen Landscape 81BB85Frog Pond A95F98Bermuda Onion

About this palette

Hydra to Bermuda Onion is a 5-color cool, vintage palette: #006D97 (Hydra), #573000 (Moelleux au Chocolat), #B2E2FF (Frozen Landscape), #81BB85 (Frog Pond), #A95F98 (Bermuda Onion). It mixes blue, brown, green, pink tones and feels cool overall. The strongest text pairing is #573000 on #B2E2FF with a contrast ratio of 8.32:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hydra	rgb(0, 109, 151)	hsl(197, 100%, 30%)
Moelleux au Chocolat	rgb(87, 48, 0)	hsl(33, 100%, 17%)
Frozen Landscape	rgb(178, 226, 255)	hsl(203, 100%, 85%)
Frog Pond	rgb(129, 187, 133)	hsl(124, 30%, 62%)
Bermuda Onion	rgb(169, 95, 152)	hsl(314, 30%, 52%)

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.32:1 Very good#573000 on #B2E2FF
Aa8.32:1 Very good#B2E2FF on #573000
Aa5.13:1 Good#573000 on #81BB85
Aa5.13:1 Good#81BB85 on #573000
Aa4.19:1 Poor#006D97 on #B2E2FF
Aa4.19:1 Poor#B2E2FF on #006D97
Aa3.18:1 Poor#B2E2FF on #A95F98
Aa3.18:1 Poor#A95F98 on #B2E2FF

Color blindness preview

CSS variables

/* Hydra to Bermuda Onion — https://swatchly.xyz/palette/006d97-573000-b2e2ff-81bb85-a95f98 */
:root {
  --hydra: #006d97;
  --moelleux-au-chocolat: #573000;
  --frozen-landscape: #b2e2ff;
  --frog-pond: #81bb85;
  --bermuda-onion: #a95f98;
}

Tailwind CSS v4

/* Hydra to Bermuda Onion — https://swatchly.xyz/palette/006d97-573000-b2e2ff-81bb85-a95f98 */
@theme {
  --color-hydra: #006d97;
  --color-hydra-50: #ebf7ff;
  --color-hydra-100: #d3efff;
  --color-hydra-200: #a4deff;
  --color-hydra-300: #7fc7ef;
  --color-hydra-400: #54a6d2;
  --color-hydra-500: #3189b5;
  --color-hydra-600: #006d97;
  --color-hydra-700: #005679;
  --color-hydra-800: #00445f;
  --color-hydra-900: #00344b;
  --color-hydra-950: #002030;
  --color-moelleux-au-chocolat: #573000;
  --color-moelleux-au-chocolat-50: #fff3e8;
  --color-moelleux-au-chocolat-100: #ffe6d0;
  --color-moelleux-au-chocolat-200: #f4d0b0;
  --color-moelleux-au-chocolat-300: #dfb792;
  --color-moelleux-au-chocolat-400: #c1946c;
  --color-moelleux-au-chocolat-500: #a4774e;
  --color-moelleux-au-chocolat-600: #865c34;
  --color-moelleux-au-chocolat-700: #6a4621;
  --color-moelleux-au-chocolat-800: #573000;
  --color-moelleux-au-chocolat-900: #40260b;
  --color-moelleux-au-chocolat-950: #281604;
  --color-frozen-landscape: #b2e2ff;
  --color-frozen-landscape-50: #eff9ff;
  --color-frozen-landscape-100: #dbf1ff;
  --color-frozen-landscape-200: #b2e2ff;
  --color-frozen-landscape-300: #a2cae2;
  --color-frozen-landscape-400: #7eaac4;
  --color-frozen-landscape-500: #618ea9;
  --color-frozen-landscape-600: #47738c;
  --color-frozen-landscape-700: #335b72;
  --color-frozen-landscape-800: #23475b;
  --color-frozen-landscape-900: #183747;
  --color-frozen-landscape-950: #0c222e;
  --color-frog-pond: #81bb85;
  --color-frog-pond-50: #eaffeb;
  --color-frog-pond-100: #d8fbd9;
  --color-frog-pond-200: #c1ebc3;
  --color-frog-pond-300: #a7d7aa;
  --color-frog-pond-400: #81bb85;
  --color-frog-pond-500: #659d69;
  --color-frog-pond-600: #49804e;
  --color-frog-pond-700: #336739;
  --color-frog-pond-800: #235028;
  --color-frog-pond-900: #173e1c;
  --color-frog-pond-950: #0a260e;
  --color-bermuda-onion: #a95f98;
  --color-bermuda-onion-50: #ffedfa;
  --color-bermuda-onion-100: #ffdbf5;
  --color-bermuda-onion-200: #fabcea;
  --color-bermuda-onion-300: #e6a0d4;
  --color-bermuda-onion-400: #c77cb5;
  --color-bermuda-onion-500: #a95f98;
  --color-bermuda-onion-600: #8d477e;
  --color-bermuda-onion-700: #733566;
  --color-bermuda-onion-800: #5d2752;
  --color-bermuda-onion-900: #4a1c41;
  --color-bermuda-onion-950: #310f2a;
}