Highlander to Open Seas Color Palette

About this palette

Highlander to Open Seas is a 5-color muted, cool palette: #3D5136 (Highlander), #AC826C (Dusty Duchess), #536A7A (Silent Night), #EAD2E7 (Sweet Dreams), #88ADB9 (Open Seas). It mixes green, orange, blue, pink tones and feels cool overall. The strongest text pairing is #3D5136 on #EAD2E7 with a contrast ratio of 6.12:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Highlander	rgb(61, 81, 54)	hsl(104, 20%, 26%)
Dusty Duchess	rgb(172, 130, 108)	hsl(21, 28%, 55%)
Silent Night	rgb(83, 106, 122)	hsl(205, 19%, 40%)
Sweet Dreams	rgb(234, 210, 231)	hsl(308, 36%, 87%)
Open Seas	rgb(136, 173, 185)	hsl(195, 26%, 63%)

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.

Aa6.12:1 Good#3D5136 on #EAD2E7
Aa6.12:1 Good#EAD2E7 on #3D5136
Aa4.01:1 Poor#536A7A on #EAD2E7
Aa4.01:1 Poor#EAD2E7 on #536A7A
Aa3.59:1 Poor#3D5136 on #88ADB9
Aa3.59:1 Poor#88ADB9 on #3D5136

Color blindness preview

CSS variables

/* Highlander to Open Seas — https://swatchly.xyz/palette/3d5136-ac826c-536a7a-ead2e7-88adb9 */
:root {
  --highlander: #3d5136;
  --dusty-duchess: #ac826c;
  --silent-night: #536a7a;
  --sweet-dreams: #ead2e7;
  --open-seas: #88adb9;
}

Tailwind CSS v4

/* Highlander to Open Seas — https://swatchly.xyz/palette/3d5136-ac826c-536a7a-ead2e7-88adb9 */
@theme {
  --color-highlander: #3d5136;
  --color-highlander-50: #ecfae8;
  --color-highlander-100: #e1f1dc;
  --color-highlander-200: #ccdec6;
  --color-highlander-300: #b6c9af;
  --color-highlander-400: #96ac8f;
  --color-highlander-500: #7c9275;
  --color-highlander-600: #64795c;
  --color-highlander-700: #4f6348;
  --color-highlander-800: #3d5136;
  --color-highlander-900: #2f3e2a;
  --color-highlander-950: #1d2819;
  --color-dusty-duchess: #ac826c;
  --color-dusty-duchess-50: #fff4ee;
  --color-dusty-duchess-100: #ffe8dd;
  --color-dusty-duchess-200: #f4d3c2;
  --color-dusty-duchess-300: #e2bda9;
  --color-dusty-duchess-400: #c69d88;
  --color-dusty-duchess-500: #ac826c;
  --color-dusty-duchess-600: #8f6752;
  --color-dusty-duchess-700: #74503c;
  --color-dusty-duchess-800: #5c3d2c;
  --color-dusty-duchess-900: #482d1f;
  --color-dusty-duchess-950: #2e1b11;
  --color-silent-night: #536a7a;
  --color-silent-night-50: #ecf7ff;
  --color-silent-night-100: #ddedf8;
  --color-silent-night-200: #c5d9e6;
  --color-silent-night-300: #acc1d1;
  --color-silent-night-400: #8aa1b2;
  --color-silent-night-500: #6e8596;
  --color-silent-night-600: #536a7a;
  --color-silent-night-700: #405462;
  --color-silent-night-800: #30424e;
  --color-silent-night-900: #24333d;
  --color-silent-night-950: #151f27;
  --color-sweet-dreams: #ead2e7;
  --color-sweet-dreams-50: #fff3fd;
  --color-sweet-dreams-100: #f7e9f5;
  --color-sweet-dreams-200: #ead2e7;
  --color-sweet-dreams-300: #d0bcce;
  --color-sweet-dreams-400: #b19caf;
  --color-sweet-dreams-500: #958093;
  --color-sweet-dreams-600: #7a6577;
  --color-sweet-dreams-700: #614f5f;
  --color-sweet-dreams-800: #4c3c4b;
  --color-sweet-dreams-900: #3b2e3a;
  --color-sweet-dreams-950: #251c24;
  --color-open-seas: #88adb9;
  --color-open-seas-50: #eafaff;
  --color-open-seas-100: #dbf2fa;
  --color-open-seas-200: #c5e0e9;
  --color-open-seas-300: #accbd5;
  --color-open-seas-400: #88adb9;
  --color-open-seas-500: #6c909c;
  --color-open-seas-600: #527580;
  --color-open-seas-700: #3d5d67;
  --color-open-seas-800: #2c4851;
  --color-open-seas-900: #20373f;
  --color-open-seas-950: #112227;
}