Saddle Up to Seashell Color Palette

About this palette

Saddle Up to Seashell is a 5-color muted, warm, earthy palette: #AC917B (Saddle Up), #665044 (Tobacco), #D2B5A2 (Soba), #463527 (Dark Rum), #FFF7F1 (Seashell). It mixes orange, brown, gray, white tones and feels warm overall. The strongest text pairing is #463527 on #FFF7F1 with a contrast ratio of 11.02:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Saddle Up	rgb(172, 145, 123)	hsl(27, 23%, 58%)
Tobacco	rgb(102, 80, 68)	hsl(21, 20%, 33%)
Soba	rgb(210, 181, 162)	hsl(24, 35%, 73%)
Dark Rum	rgb(70, 53, 39)	hsl(27, 28%, 21%)
Seashell	rgb(255, 247, 241)	hsl(26, 100%, 97%)

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.

Aa11.02:1 Very good#463527 on #FFF7F1
Aa11.02:1 Very good#FFF7F1 on #463527
Aa7.09:1 Very good#665044 on #FFF7F1
Aa7.09:1 Very good#FFF7F1 on #665044
Aa6.04:1 Good#D2B5A2 on #463527
Aa6.04:1 Good#463527 on #D2B5A2
Aa3.94:1 Poor#AC917B on #463527
Aa3.94:1 Poor#463527 on #AC917B

Color blindness preview

CSS variables

/* Saddle Up to Seashell — https://swatchly.xyz/palette/ac917b-665044-d2b5a2-463527-fff7f1 */
:root {
  --saddle-up: #ac917b;
  --tobacco: #665044;
  --soba: #d2b5a2;
  --dark-rum: #463527;
  --seashell: #fff7f1;
}

Tailwind CSS v4

/* Saddle Up to Seashell — https://swatchly.xyz/palette/ac917b-665044-d2b5a2-463527-fff7f1 */
@theme {
  --color-saddle-up: #ac917b;
  --color-saddle-up-50: #ffeee0;
  --color-saddle-up-100: #f5e1d2;
  --color-saddle-up-200: #e2cbb9;
  --color-saddle-up-300: #cbb29e;
  --color-saddle-up-400: #ac917b;
  --color-saddle-up-500: #927862;
  --color-saddle-up-600: #78604c;
  --color-saddle-up-700: #614c39;
  --color-saddle-up-800: #4e3b2b;
  --color-saddle-up-900: #3e2e20;
  --color-saddle-up-950: #281c13;
  --color-tobacco: #665044;
  --color-tobacco-50: #fff2eb;
  --color-tobacco-100: #f8e7df;
  --color-tobacco-200: #e7d3c9;
  --color-tobacco-300: #d2bcb0;
  --color-tobacco-400: #b49c8f;
  --color-tobacco-500: #998174;
  --color-tobacco-600: #7d665a;
  --color-tobacco-700: #665044;
  --color-tobacco-800: #503e34;
  --color-tobacco-900: #3e2f27;
  --color-tobacco-950: #271d17;
  --color-soba: #d2b5a2;
  --color-soba-50: #ffefe4;
  --color-soba-100: #f7e3d7;
  --color-soba-200: #e5cebf;
  --color-soba-300: #d2b5a2;
  --color-soba-400: #b29785;
  --color-soba-500: #987d6b;
  --color-soba-600: #7d6352;
  --color-soba-700: #654e3f;
  --color-soba-800: #513d2f;
  --color-soba-900: #402f23;
  --color-soba-950: #281c14;
  --color-dark-rum: #463527;
  --color-dark-rum-50: #fff3e9;
  --color-dark-rum-100: #f6e8de;
  --color-dark-rum-200: #e4d4c7;
  --color-dark-rum-300: #cfbdaf;
  --color-dark-rum-400: #b29f8f;
  --color-dark-rum-500: #988474;
  --color-dark-rum-600: #7e6b5c;
  --color-dark-rum-700: #675648;
  --color-dark-rum-800: #544438;
  --color-dark-rum-900: #463527;
  --color-dark-rum-950: #2c221a;
  --color-seashell: #fff7f1;
  --color-seashell-50: #fff7f1;
  --color-seashell-100: #f2ede9;
  --color-seashell-200: #ded9d4;
  --color-seashell-300: #c8c1bc;
  --color-seashell-400: #a8a19c;
  --color-seashell-500: #8c8580;
  --color-seashell-600: #716a65;
  --color-seashell-700: #5a544f;
  --color-seashell-800: #46413d;
  --color-seashell-900: #36322e;
  --color-seashell-950: #221f1c;
}