Start generating

Mediterranean Blue to Purple Illusion color palette

0083B6Mediterranean BlueD5960FRetro Vibe695000Ayahuasca Vine292A45Midnight MasqueradeC9F0FFWaterBCB3FFPurple Illusion
Open in generator Export PNG, PDF, ASE…

About this palette

Mediterranean Blue to Purple Illusion is a 6-color cool palette: #0083B6 (Mediterranean Blue), #D5960F (Retro Vibe), #695000 (Ayahuasca Vine), #292A45 (Midnight Masquerade), #C9F0FF (Water), #BCB3FF (Purple Illusion). It mixes blue, yellow, brown, purple tones and feels cool overall. The strongest text pairing is #292A45 on #C9F0FF with a contrast ratio of 11.51:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Mediterranean Bluergb(0, 131, 182)hsl(197, 100%, 36%)
Retro Vibergb(213, 150, 15)hsl(41, 87%, 45%)
Ayahuasca Vinergb(105, 80, 0)hsl(46, 100%, 21%)
Midnight Masqueradergb(41, 42, 69)hsl(238, 25%, 22%)
Waterrgb(201, 240, 255)hsl(197, 100%, 89%)
Purple Illusionrgb(188, 179, 255)hsl(247, 100%, 85%)

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.

  • Aa11.51:1 Very good#292A45 on #C9F0FF
  • Aa11.51:1 Very good#C9F0FF on #292A45
  • Aa7.30:1 Very good#292A45 on #BCB3FF
  • Aa7.30:1 Very good#BCB3FF on #292A45
  • Aa6.33:1 Good#695000 on #C9F0FF
  • Aa6.33:1 Good#C9F0FF on #695000
  • Aa5.42:1 Good#D5960F on #292A45
  • Aa5.42:1 Good#292A45 on #D5960F

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Mediterranean Blue to Purple Illusion — https://swatchly.xyz/palette/0083b6-d5960f-695000-292a45-c9f0ff-bcb3ff */
:root {
  --mediterranean-blue: #0083b6;
  --retro-vibe: #d5960f;
  --ayahuasca-vine: #695000;
  --midnight-masquerade: #292a45;
  --water: #c9f0ff;
  --purple-illusion: #bcb3ff;
}

Tailwind CSS v4

/* Mediterranean Blue to Purple Illusion — https://swatchly.xyz/palette/0083b6-d5960f-695000-292a45-c9f0ff-bcb3ff */
@theme {
  --color-mediterranean-blue: #0083b6;
  --color-mediterranean-blue-50: #e6f5ff;
  --color-mediterranean-blue-100: #ccecff;
  --color-mediterranean-blue-200: #9adaff;
  --color-mediterranean-blue-300: #6cc3f3;
  --color-mediterranean-blue-400: #3ba1d5;
  --color-mediterranean-blue-500: #0083b6;
  --color-mediterranean-blue-600: #006994;
  --color-mediterranean-blue-700: #005476;
  --color-mediterranean-blue-800: #00425e;
  --color-mediterranean-blue-900: #00344b;
  --color-mediterranean-blue-950: #002131;
  --color-retro-vibe: #d5960f;
  --color-retro-vibe-50: #fff4e4;
  --color-retro-vibe-100: #ffe9c8;
  --color-retro-vibe-200: #ffd188;
  --color-retro-vibe-300: #efb85f;
  --color-retro-vibe-400: #d5960f;
  --color-retro-vibe-500: #b27c00;
  --color-retro-vibe-600: #906300;
  --color-retro-vibe-700: #734e00;
  --color-retro-vibe-800: #5a3d00;
  --color-retro-vibe-900: #462e00;
  --color-retro-vibe-950: #2c1c00;
  --color-ayahuasca-vine: #695000;
  --color-ayahuasca-vine-50: #fff4db;
  --color-ayahuasca-vine-100: #fbeac1;
  --color-ayahuasca-vine-200: #ead5a5;
  --color-ayahuasca-vine-300: #d6be86;
  --color-ayahuasca-vine-400: #b89e5f;
  --color-ayahuasca-vine-500: #9c8240;
  --color-ayahuasca-vine-600: #806725;
  --color-ayahuasca-vine-700: #695000;
  --color-ayahuasca-vine-800: #523e02;
  --color-ayahuasca-vine-900: #402f00;
  --color-ayahuasca-vine-950: #281d00;
  --color-midnight-masquerade: #292a45;
  --color-midnight-masquerade-50: #f3f4ff;
  --color-midnight-masquerade-100: #e7e9ff;
  --color-midnight-masquerade-200: #d3d5ef;
  --color-midnight-masquerade-300: #bcbedc;
  --color-midnight-masquerade-400: #9b9dbe;
  --color-midnight-masquerade-500: #7e81a1;
  --color-midnight-masquerade-600: #636684;
  --color-midnight-masquerade-700: #4d4e69;
  --color-midnight-masquerade-800: #3a3b52;
  --color-midnight-masquerade-900: #292a45;
  --color-midnight-masquerade-950: #191927;
  --color-water: #c9f0ff;
  --color-water-50: #e2f7ff;
  --color-water-100: #c9f0ff;
  --color-water-200: #bedbe6;
  --color-water-300: #a5c5d2;
  --color-water-400: #83a7b4;
  --color-water-500: #688c99;
  --color-water-600: #4f717e;
  --color-water-700: #3b5b66;
  --color-water-800: #2b4751;
  --color-water-900: #1f373f;
  --color-water-950: #112228;
  --color-purple-illusion: #bcb3ff;
  --color-purple-illusion-50: #f3f2ff;
  --color-purple-illusion-100: #e8e6ff;
  --color-purple-illusion-200: #d3cfff;
  --color-purple-illusion-300: #bcb3ff;
  --color-purple-illusion-400: #9d95dc;
  --color-purple-illusion-500: #8379c0;
  --color-purple-illusion-600: #695fa3;
  --color-purple-illusion-700: #544a87;
  --color-purple-illusion-800: #41386e;
  --color-purple-illusion-900: #322a58;
  --color-purple-illusion-950: #1f193a;
}

Similar palettes