Lake Lucerne to Mosque Color Palette

About this palette

Lake Lucerne to Mosque is a 5-color cool, vintage palette: #699BBC (Lake Lucerne), #009687 (Green Dynasty), #572F42 (Shadow Purple), #FFA465 (Bittersweet), #185D58 (Mosque). It mixes blue, turquoise, red, orange tones and feels cool overall. The strongest text pairing is #572F42 on #FFA465 with a contrast ratio of 5.69:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lake Lucerne	rgb(105, 155, 188)	hsl(204, 38%, 57%)
Green Dynasty	rgb(0, 150, 135)	hsl(174, 100%, 29%)
Shadow Purple	rgb(87, 47, 66)	hsl(332, 30%, 26%)
Bittersweet	rgb(255, 164, 101)	hsl(25, 100%, 70%)
Mosque	rgb(24, 93, 88)	hsl(176, 59%, 23%)

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.

Aa5.69:1 Good#572F42 on #FFA465
Aa5.69:1 Good#FFA465 on #572F42
Aa3.92:1 Poor#FFA465 on #185D58
Aa3.92:1 Poor#185D58 on #FFA465
Aa3.71:1 Poor#699BBC on #572F42
Aa3.71:1 Poor#572F42 on #699BBC
Aa3.02:1 Poor#009687 on #572F42
Aa3.02:1 Poor#572F42 on #009687

Color blindness preview

CSS variables

/* Lake Lucerne to Mosque — https://swatchly.xyz/palette/699bbc-009687-572f42-ffa465-185d58 */
:root {
  --lake-lucerne: #699bbc;
  --green-dynasty: #009687;
  --shadow-purple: #572f42;
  --bittersweet: #ffa465;
  --mosque: #185d58;
}

Tailwind CSS v4

/* Lake Lucerne to Mosque — https://swatchly.xyz/palette/699bbc-009687-572f42-ffa465-185d58 */
@theme {
  --color-lake-lucerne: #699bbc;
  --color-lake-lucerne-50: #e2f3ff;
  --color-lake-lucerne-100: #c9e9ff;
  --color-lake-lucerne-200: #acd4f0;
  --color-lake-lucerne-300: #8fbcdb;
  --color-lake-lucerne-400: #699bbc;
  --color-lake-lucerne-500: #5182a2;
  --color-lake-lucerne-600: #3a6987;
  --color-lake-lucerne-700: #29546f;
  --color-lake-lucerne-800: #1c435a;
  --color-lake-lucerne-900: #133549;
  --color-lake-lucerne-950: #092231;
  --color-green-dynasty: #009687;
  --color-green-dynasty-50: #d4fff7;
  --color-green-dynasty-100: #b7f9ed;
  --color-green-dynasty-200: #96e7d9;
  --color-green-dynasty-300: #72d2c3;
  --color-green-dynasty-400: #40b2a3;
  --color-green-dynasty-500: #009687;
  --color-green-dynasty-600: #00796d;
  --color-green-dynasty-700: #006056;
  --color-green-dynasty-800: #004b43;
  --color-green-dynasty-900: #003b34;
  --color-green-dynasty-950: #002520;
  --color-shadow-purple: #572f42;
  --color-shadow-purple-50: #fff1f6;
  --color-shadow-purple-100: #ffe2ee;
  --color-shadow-purple-200: #f1cbdb;
  --color-shadow-purple-300: #ddb2c4;
  --color-shadow-purple-400: #bf90a4;
  --color-shadow-purple-500: #a27488;
  --color-shadow-purple-600: #855a6d;
  --color-shadow-purple-700: #6a4455;
  --color-shadow-purple-800: #572f42;
  --color-shadow-purple-900: #412532;
  --color-shadow-purple-950: #29161f;
  --color-bittersweet: #ffa465;
  --color-bittersweet-50: #fff0e6;
  --color-bittersweet-100: #ffe2d0;
  --color-bittersweet-200: #ffc6a2;
  --color-bittersweet-300: #ffa465;
  --color-bittersweet-400: #dc864a;
  --color-bittersweet-500: #c06a27;
  --color-bittersweet-600: #a25100;
  --color-bittersweet-700: #823f00;
  --color-bittersweet-800: #673100;
  --color-bittersweet-900: #512500;
  --color-bittersweet-950: #341600;
  --color-mosque: #185d58;
  --color-mosque-50: #dbfefa;
  --color-mosque-100: #cdf5f0;
  --color-mosque-200: #b2e2dd;
  --color-mosque-300: #95ccc6;
  --color-mosque-400: #6fada7;
  --color-mosque-500: #50908b;
  --color-mosque-600: #36756f;
  --color-mosque-700: #185d58;
  --color-mosque-800: #134844;
  --color-mosque-900: #0a3835;
  --color-mosque-950: #032321;
}