Start generating

Olympian Blue to Mediterranean Sea color palette

214E8BOlympian BlueEDFBFFCold White0C2149Dark EclipseC6B5FDViolet HeavenA39FE0Violet Velvet298CB4Mediterranean Sea
Open in generator Export PNG, PDF, ASE…

About this palette

Olympian Blue to Mediterranean Sea is a 6-color cool palette: #214E8B (Olympian Blue), #EDFBFF (Cold White), #0C2149 (Dark Eclipse), #C6B5FD (Violet Heaven), #A39FE0 (Violet Velvet), #298CB4 (Mediterranean Sea). It mixes blue, white, purple tones and feels cool overall. The strongest text pairing is #EDFBFF on #0C2149 with a contrast ratio of 14.93:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Olympian Bluergb(33, 78, 139)hsl(215, 62%, 34%)
Cold Whitergb(237, 251, 255)hsl(193, 100%, 96%)
Dark Eclipsergb(12, 33, 73)hsl(219, 72%, 17%)
Violet Heavenrgb(198, 181, 253)hsl(254, 95%, 85%)
Violet Velvetrgb(163, 159, 224)hsl(244, 51%, 75%)
Mediterranean Seargb(41, 140, 180)hsl(197, 63%, 43%)

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.

  • Aa14.93:1 Super#EDFBFF on #0C2149
  • Aa14.93:1 Super#0C2149 on #EDFBFF
  • Aa8.60:1 Very good#0C2149 on #C6B5FD
  • Aa8.60:1 Very good#C6B5FD on #0C2149
  • Aa7.85:1 Very good#214E8B on #EDFBFF
  • Aa7.85:1 Very good#EDFBFF on #214E8B
  • Aa6.46:1 Good#0C2149 on #A39FE0
  • Aa6.46:1 Good#A39FE0 on #0C2149

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Olympian Blue to Mediterranean Sea — https://swatchly.xyz/palette/214e8b-edfbff-0c2149-c6b5fd-a39fe0-298cb4 */
:root {
  --olympian-blue: #214e8b;
  --cold-white: #edfbff;
  --dark-eclipse: #0c2149;
  --violet-heaven: #c6b5fd;
  --violet-velvet: #a39fe0;
  --mediterranean-sea: #298cb4;
}

Tailwind CSS v4

/* Olympian Blue to Mediterranean Sea — https://swatchly.xyz/palette/214e8b-edfbff-0c2149-c6b5fd-a39fe0-298cb4 */
@theme {
  --color-olympian-blue: #214e8b;
  --color-olympian-blue-50: #eff6ff;
  --color-olympian-blue-100: #dfecff;
  --color-olympian-blue-200: #bdd8ff;
  --color-olympian-blue-300: #96c1fd;
  --color-olympian-blue-400: #71a0e1;
  --color-olympian-blue-500: #5483c4;
  --color-olympian-blue-600: #3a67a4;
  --color-olympian-blue-700: #214e8b;
  --color-olympian-blue-800: #1a3d6c;
  --color-olympian-blue-900: #112e56;
  --color-olympian-blue-950: #071c38;
  --color-cold-white: #edfbff;
  --color-cold-white-50: #edfbff;
  --color-cold-white-100: #e7eff2;
  --color-cold-white-200: #d1dbde;
  --color-cold-white-300: #b9c5c8;
  --color-cold-white-400: #98a5a8;
  --color-cold-white-500: #7d898d;
  --color-cold-white-600: #626e72;
  --color-cold-white-700: #4d575b;
  --color-cold-white-800: #3b4447;
  --color-cold-white-900: #2c3437;
  --color-cold-white-950: #1b2022;
  --color-dark-eclipse: #0c2149;
  --color-dark-eclipse-50: #f0f5ff;
  --color-dark-eclipse-100: #e1ecff;
  --color-dark-eclipse-200: #c3d8ff;
  --color-dark-eclipse-300: #a9c2ee;
  --color-dark-eclipse-400: #87a2d2;
  --color-dark-eclipse-500: #6c87b7;
  --color-dark-eclipse-600: #546d9b;
  --color-dark-eclipse-700: #405781;
  --color-dark-eclipse-800: #31456a;
  --color-dark-eclipse-900: #253656;
  --color-dark-eclipse-950: #0c2149;
  --color-violet-heaven: #c6b5fd;
  --color-violet-heaven-50: #f6f4ff;
  --color-violet-heaven-100: #ede8ff;
  --color-violet-heaven-200: #dbd1ff;
  --color-violet-heaven-300: #c6b5fd;
  --color-violet-heaven-400: #a696d9;
  --color-violet-heaven-500: #8b7abd;
  --color-violet-heaven-600: #7060a0;
  --color-violet-heaven-700: #5a4a84;
  --color-violet-heaven-800: #46386b;
  --color-violet-heaven-900: #362a55;
  --color-violet-heaven-950: #221938;
  --color-violet-velvet: #a39fe0;
  --color-violet-velvet-50: #f6f6ff;
  --color-violet-velvet-100: #edecff;
  --color-violet-velvet-200: #d8d7ff;
  --color-violet-velvet-300: #c2bff7;
  --color-violet-velvet-400: #a39fe0;
  --color-violet-velvet-500: #8782c1;
  --color-violet-velvet-600: #6c67a3;
  --color-violet-velvet-700: #555086;
  --color-violet-velvet-800: #413d6c;
  --color-violet-velvet-900: #312d55;
  --color-violet-velvet-950: #1e1b37;
  --color-mediterranean-sea: #298cb4;
  --color-mediterranean-sea-50: #e8f7ff;
  --color-mediterranean-sea-100: #cfefff;
  --color-mediterranean-sea-200: #9edfff;
  --color-mediterranean-sea-300: #7bc9ed;
  --color-mediterranean-sea-400: #4fa9d1;
  --color-mediterranean-sea-500: #298cb4;
  --color-mediterranean-sea-600: #007197;
  --color-mediterranean-sea-700: #005a79;
  --color-mediterranean-sea-800: #00475f;
  --color-mediterranean-sea-900: #00374b;
  --color-mediterranean-sea-950: #002231;
}

Similar palettes