Start generating

Mermaid Blues to Bermuda Onion color palette

004172Mermaid BluesCFEAC4Pastel Mint6F4C00Ayahuasca VineD09500Retro Vibe9C649CBermuda Onion
Open in generator Export PNG, PDF, ASE…

About this palette

Mermaid Blues to Bermuda Onion is a 5-color cool, earthy palette: #004172 (Mermaid Blues), #CFEAC4 (Pastel Mint), #6F4C00 (Ayahuasca Vine), #D09500 (Retro Vibe), #9C649C (Bermuda Onion). It mixes blue, green, brown, yellow, pink tones and feels cool overall. The strongest text pairing is #004172 on #CFEAC4 with a contrast ratio of 8.11:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Mermaid Bluesrgb(0, 65, 114)hsl(206, 100%, 22%)
Pastel Mintrgb(207, 234, 196)hsl(103, 47%, 84%)
Ayahuasca Vinergb(111, 76, 0)hsl(41, 100%, 22%)
Retro Vibergb(208, 149, 0)hsl(43, 100%, 41%)
Bermuda Onionrgb(156, 100, 156)hsl(300, 22%, 50%)

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.11:1 Very good#004172 on #CFEAC4
  • Aa8.11:1 Very good#CFEAC4 on #004172
  • Aa5.99:1 Good#CFEAC4 on #6F4C00
  • Aa5.99:1 Good#6F4C00 on #CFEAC4
  • Aa3.99:1 Poor#004172 on #D09500
  • Aa3.99:1 Poor#D09500 on #004172
  • Aa3.44:1 Poor#CFEAC4 on #9C649C
  • Aa3.44:1 Poor#9C649C on #CFEAC4

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Mermaid Blues to Bermuda Onion — https://swatchly.xyz/palette/004172-cfeac4-6f4c00-d09500-9c649c */
:root {
  --mermaid-blues: #004172;
  --pastel-mint: #cfeac4;
  --ayahuasca-vine: #6f4c00;
  --retro-vibe: #d09500;
  --bermuda-onion: #9c649c;
}

Tailwind CSS v4

/* Mermaid Blues to Bermuda Onion — https://swatchly.xyz/palette/004172-cfeac4-6f4c00-d09500-9c649c */
@theme {
  --color-mermaid-blues: #004172;
  --color-mermaid-blues-50: #eef6ff;
  --color-mermaid-blues-100: #dcedff;
  --color-mermaid-blues-200: #b9dcff;
  --color-mermaid-blues-300: #94c5f7;
  --color-mermaid-blues-400: #6fa5db;
  --color-mermaid-blues-500: #5189bf;
  --color-mermaid-blues-600: #376da0;
  --color-mermaid-blues-700: #235584;
  --color-mermaid-blues-800: #004172;
  --color-mermaid-blues-900: #0c3254;
  --color-mermaid-blues-950: #041f36;
  --color-pastel-mint: #cfeac4;
  --color-pastel-mint-50: #f4fff0;
  --color-pastel-mint-100: #e9f8e3;
  --color-pastel-mint-200: #cfeac4;
  --color-pastel-mint-300: #bad0b1;
  --color-pastel-mint-400: #97b08e;
  --color-pastel-mint-500: #7a9370;
  --color-pastel-mint-600: #5f7655;
  --color-pastel-mint-700: #485e3f;
  --color-pastel-mint-800: #36492e;
  --color-pastel-mint-900: #283822;
  --color-pastel-mint-950: #182313;
  --color-ayahuasca-vine: #6f4c00;
  --color-ayahuasca-vine-50: #fff3e2;
  --color-ayahuasca-vine-100: #ffe8c4;
  --color-ayahuasca-vine-200: #f0d2a4;
  --color-ayahuasca-vine-300: #dcbb86;
  --color-ayahuasca-vine-400: #bf9a5f;
  --color-ayahuasca-vine-500: #a37e40;
  --color-ayahuasca-vine-600: #876325;
  --color-ayahuasca-vine-700: #6f4c00;
  --color-ayahuasca-vine-800: #573b02;
  --color-ayahuasca-vine-900: #442d00;
  --color-ayahuasca-vine-950: #2b1b00;
  --color-retro-vibe: #d09500;
  --color-retro-vibe-50: #fff3e0;
  --color-retro-vibe-100: #ffe8c1;
  --color-retro-vibe-200: #fdd082;
  --color-retro-vibe-300: #ebb75a;
  --color-retro-vibe-400: #d09500;
  --color-retro-vibe-500: #ad7c00;
  --color-retro-vibe-600: #8c6300;
  --color-retro-vibe-700: #704e00;
  --color-retro-vibe-800: #583d00;
  --color-retro-vibe-900: #442e00;
  --color-retro-vibe-950: #2b1c00;
  --color-bermuda-onion: #9c649c;
  --color-bermuda-onion-50: #ffecfe;
  --color-bermuda-onion-100: #ffd9fe;
  --color-bermuda-onion-200: #efbfee;
  --color-bermuda-onion-300: #d9a4d9;
  --color-bermuda-onion-400: #ba81ba;
  --color-bermuda-onion-500: #9c649c;
  --color-bermuda-onion-600: #814d81;
  --color-bermuda-onion-700: #693a6a;
  --color-bermuda-onion-800: #542c55;
  --color-bermuda-onion-900: #432043;
  --color-bermuda-onion-950: #2c132c;
}

Similar palettes