Sleepy Hollow to Ahoy! Blue Color Palette

About this palette

Sleepy Hollow to Ahoy! Blue is a 4-color cool palette: #7D9D72 (Sleepy Hollow), #563A61 (Long Passionate Night), #FFBB8B (Goose Bill), #0081A0 (Ahoy! Blue). It mixes green, purple, orange, blue tones and feels cool overall. The strongest text pairing is #563A61 on #FFBB8B with a contrast ratio of 5.86:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sleepy Hollow	rgb(125, 157, 114)	hsl(105, 18%, 53%)
Long Passionate Night	rgb(86, 58, 97)	hsl(283, 25%, 30%)
Goose Bill	rgb(255, 187, 139)	hsl(25, 100%, 77%)
Ahoy! Blue	rgb(0, 129, 160)	hsl(192, 100%, 31%)

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.86:1 Good#563A61 on #FFBB8B
Aa5.86:1 Good#FFBB8B on #563A61
Aa3.19:1 Poor#7D9D72 on #563A61
Aa3.19:1 Poor#563A61 on #7D9D72

Color blindness preview

CSS variables

/* Sleepy Hollow to Ahoy! Blue — https://swatchly.xyz/palette/7d9d72-563a61-ffbb8b-0081a0 */
:root {
  --sleepy-hollow: #7d9d72;
  --long-passionate-night: #563a61;
  --goose-bill: #ffbb8b;
  --ahoy-blue: #0081a0;
}

Tailwind CSS v4

/* Sleepy Hollow to Ahoy! Blue — https://swatchly.xyz/palette/7d9d72-563a61-ffbb8b-0081a0 */
@theme {
  --color-sleepy-hollow: #7d9d72;
  --color-sleepy-hollow-50: #ebfee5;
  --color-sleepy-hollow-100: #e2f7dc;
  --color-sleepy-hollow-200: #cee7c6;
  --color-sleepy-hollow-300: #b8d3ae;
  --color-sleepy-hollow-400: #98b68d;
  --color-sleepy-hollow-500: #7d9d72;
  --color-sleepy-hollow-600: #618056;
  --color-sleepy-hollow-700: #4a6640;
  --color-sleepy-hollow-800: #37502e;
  --color-sleepy-hollow-900: #283d20;
  --color-sleepy-hollow-950: #172611;
  --color-long-passionate-night: #563a61;
  --color-long-passionate-night-50: #fbf1ff;
  --color-long-passionate-night-100: #f7e3ff;
  --color-long-passionate-night-200: #e6cdf0;
  --color-long-passionate-night-300: #d2b6dd;
  --color-long-passionate-night-400: #b596c1;
  --color-long-passionate-night-500: #9a7ba6;
  --color-long-passionate-night-600: #7f628b;
  --color-long-passionate-night-700: #684d73;
  --color-long-passionate-night-800: #563a61;
  --color-long-passionate-night-900: #422d4a;
  --color-long-passionate-night-950: #2a1b30;
  --color-goose-bill: #ffbb8b;
  --color-goose-bill-50: #fffaf6;
  --color-goose-bill-100: #ffefe5;
  --color-goose-bill-200: #ffd8be;
  --color-goose-bill-300: #ffbb8b;
  --color-goose-bill-400: #d89b6f;
  --color-goose-bill-500: #bb7c4e;
  --color-goose-bill-600: #9c6032;
  --color-goose-bill-700: #80491c;
  --color-goose-bill-800: #65360c;
  --color-goose-bill-900: #4f2703;
  --color-goose-bill-950: #331701;
  --color-ahoy-blue: #0081a0;
  --color-ahoy-blue-50: #e7f9ff;
  --color-ahoy-blue-100: #d3f3ff;
  --color-ahoy-blue-200: #a3e6ff;
  --color-ahoy-blue-300: #84d3ee;
  --color-ahoy-blue-400: #59b5d4;
  --color-ahoy-blue-500: #349bbb;
  --color-ahoy-blue-600: #0081a0;
  --color-ahoy-blue-700: #006680;
  --color-ahoy-blue-800: #005064;
  --color-ahoy-blue-900: #003d4e;
  --color-ahoy-blue-950: #002632;
}