Sailor to Cookie Crumb Color Palette

About this palette

Sailor to Cookie Crumb is a 4-color muted palette: #435D7E (Sailor), #2E2513 (Wood Bark), #DAE8FF (Veiling Waterfalls), #B89975 (Cookie Crumb). It mixes blue, gray, orange tones and feels balanced overall. The strongest text pairing is #2E2513 on #DAE8FF with a contrast ratio of 12.21:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sailor	rgb(67, 93, 126)	hsl(214, 31%, 38%)
Wood Bark	rgb(46, 37, 19)	hsl(40, 42%, 13%)
Veiling Waterfalls	rgb(218, 232, 255)	hsl(217, 100%, 93%)
Cookie Crumb	rgb(184, 153, 117)	hsl(32, 32%, 59%)

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.

Aa12.21:1 Super#2E2513 on #DAE8FF
Aa12.21:1 Super#DAE8FF on #2E2513
Aa5.65:1 Good#2E2513 on #B89975
Aa5.65:1 Good#B89975 on #2E2513
Aa5.46:1 Good#435D7E on #DAE8FF
Aa5.46:1 Good#DAE8FF on #435D7E

Color blindness preview

CSS variables

/* Sailor to Cookie Crumb — https://swatchly.xyz/palette/435d7e-2e2513-dae8ff-b89975 */
:root {
  --sailor: #435d7e;
  --wood-bark: #2e2513;
  --veiling-waterfalls: #dae8ff;
  --cookie-crumb: #b89975;
}

Tailwind CSS v4

/* Sailor to Cookie Crumb — https://swatchly.xyz/palette/435d7e-2e2513-dae8ff-b89975 */
@theme {
  --color-sailor: #435d7e;
  --color-sailor-50: #eff6ff;
  --color-sailor-100: #deedff;
  --color-sailor-200: #c5dbf7;
  --color-sailor-300: #adc6e5;
  --color-sailor-400: #8ca7ca;
  --color-sailor-500: #718db0;
  --color-sailor-600: #587395;
  --color-sailor-700: #435d7e;
  --color-sailor-800: #334964;
  --color-sailor-900: #25384f;
  --color-sailor-950: #152333;
  --color-wood-bark: #2e2513;
  --color-wood-bark-50: #fbf4e8;
  --color-wood-bark-100: #f2eadc;
  --color-wood-bark-200: #dfd6c6;
  --color-wood-bark-300: #cac0ad;
  --color-wood-bark-400: #aba08c;
  --color-wood-bark-500: #918672;
  --color-wood-bark-600: #786d59;
  --color-wood-bark-700: #625846;
  --color-wood-bark-800: #4f4736;
  --color-wood-bark-900: #40382a;
  --color-wood-bark-950: #2e2513;
  --color-veiling-waterfalls: #dae8ff;
  --color-veiling-waterfalls-50: #eaf2ff;
  --color-veiling-waterfalls-100: #dae8ff;
  --color-veiling-waterfalls-200: #cad5e6;
  --color-veiling-waterfalls-300: #b3bfd2;
  --color-veiling-waterfalls-400: #94a0b5;
  --color-veiling-waterfalls-500: #79869a;
  --color-veiling-waterfalls-600: #606c7f;
  --color-veiling-waterfalls-700: #4b5668;
  --color-veiling-waterfalls-800: #394352;
  --color-veiling-waterfalls-900: #2b3340;
  --color-veiling-waterfalls-950: #1a1f29;
  --color-cookie-crumb: #b89975;
  --color-cookie-crumb-50: #fff2e3;
  --color-cookie-crumb-100: #fbe6cf;
  --color-cookie-crumb-200: #ead1b5;
  --color-cookie-crumb-300: #d5ba9a;
  --color-cookie-crumb-400: #b89975;
  --color-cookie-crumb-500: #9c7e5b;
  --color-cookie-crumb-600: #816443;
  --color-cookie-crumb-700: #684f30;
  --color-cookie-crumb-800: #533d22;
  --color-cookie-crumb-900: #412e17;
  --color-cookie-crumb-950: #2a1c0b;
}