Aegean Blue to Muddy Green Color Palette

About this palette

Aegean Blue to Muddy Green is a 5-color vintage palette: #1F3D68 (Aegean Blue), #FF9654 (Pastel Orange), #FFF2E8 (What’s Left), #6A91D3 (Winter Lake), #6E6C00 (Muddy Green). It mixes blue, orange, white, brown tones and feels balanced overall. The strongest text pairing is #1F3D68 on #FFF2E8 with a contrast ratio of 9.93:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Aegean Blue	rgb(31, 61, 104)	hsl(215, 54%, 26%)
Pastel Orange	rgb(255, 150, 84)	hsl(23, 100%, 66%)
What’s Left	rgb(255, 242, 232)	hsl(26, 100%, 95%)
Winter Lake	rgb(106, 145, 211)	hsl(218, 54%, 62%)
Muddy Green	rgb(110, 108, 0)	hsl(59, 100%, 22%)

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.

Aa9.93:1 Very good#1F3D68 on #FFF2E8
Aa9.93:1 Very good#FFF2E8 on #1F3D68
Aa5.06:1 Good#1F3D68 on #FF9654
Aa5.06:1 Good#FF9654 on #1F3D68
Aa5.02:1 Good#FFF2E8 on #6E6C00
Aa5.02:1 Good#6E6C00 on #FFF2E8
Aa3.43:1 Poor#1F3D68 on #6A91D3
Aa3.43:1 Poor#6A91D3 on #1F3D68

Color blindness preview

CSS variables

/* Aegean Blue to Muddy Green — https://swatchly.xyz/palette/1f3d68-ff9654-fff2e8-6a91d3-6e6c00 */
:root {
  --aegean-blue: #1f3d68;
  --pastel-orange: #ff9654;
  --what-s-left: #fff2e8;
  --winter-lake: #6a91d3;
  --muddy-green: #6e6c00;
}

Tailwind CSS v4

/* Aegean Blue to Muddy Green — https://swatchly.xyz/palette/1f3d68-ff9654-fff2e8-6a91d3-6e6c00 */
@theme {
  --color-aegean-blue: #1f3d68;
  --color-aegean-blue-50: #eff6ff;
  --color-aegean-blue-100: #dfecff;
  --color-aegean-blue-200: #c0d9ff;
  --color-aegean-blue-300: #a3c2ee;
  --color-aegean-blue-400: #80a1d1;
  --color-aegean-blue-500: #6385b5;
  --color-aegean-blue-600: #4a6996;
  --color-aegean-blue-700: #35517a;
  --color-aegean-blue-800: #1f3d68;
  --color-aegean-blue-900: #1b2f4c;
  --color-aegean-blue-950: #0e1c31;
  --color-pastel-orange: #ff9654;
  --color-pastel-orange-50: #ffeade;
  --color-pastel-orange-100: #ffdac6;
  --color-pastel-orange-200: #ffbc95;
  --color-pastel-orange-300: #ff9654;
  --color-pastel-orange-400: #dd7937;
  --color-pastel-orange-500: #c25f0f;
  --color-pastel-orange-600: #a04b00;
  --color-pastel-orange-700: #813b00;
  --color-pastel-orange-800: #682e00;
  --color-pastel-orange-900: #532300;
  --color-pastel-orange-950: #361400;
  --color-what-s-left: #fff2e8;
  --color-what-s-left-50: #fff2e8;
  --color-what-s-left-100: #f1e9e3;
  --color-what-s-left-200: #dfd5ce;
  --color-what-s-left-300: #c9beb6;
  --color-what-s-left-400: #aa9f96;
  --color-what-s-left-500: #8f847b;
  --color-what-s-left-600: #746961;
  --color-what-s-left-700: #5d534b;
  --color-what-s-left-800: #49413a;
  --color-what-s-left-900: #39312c;
  --color-what-s-left-950: #231e1a;
  --color-winter-lake: #6a91d3;
  --color-winter-lake-50: #f3f7ff;
  --color-winter-lake-100: #e6f0ff;
  --color-winter-lake-200: #cbdeff;
  --color-winter-lake-300: #aacaff;
  --color-winter-lake-400: #86abeb;
  --color-winter-lake-500: #6a91d3;
  --color-winter-lake-600: #4f74b3;
  --color-winter-lake-700: #395b95;
  --color-winter-lake-800: #284679;
  --color-winter-lake-900: #1c3560;
  --color-winter-lake-950: #0e203e;
  --color-muddy-green: #6e6c00;
  --color-muddy-green-50: #f8f9ca;
  --color-muddy-green-100: #eeefb9;
  --color-muddy-green-200: #dadb9a;
  --color-muddy-green-300: #c4c479;
  --color-muddy-green-400: #a5a44f;
  --color-muddy-green-500: #89882d;
  --color-muddy-green-600: #6e6c00;
  --color-muddy-green-700: #575500;
  --color-muddy-green-800: #444300;
  --color-muddy-green-900: #343300;
  --color-muddy-green-950: #202000;
}