Seashell to Asparagus Sultan Color Palette

About this palette

Seashell to Asparagus Sultan is a 5-color warm, earthy, vintage palette: #FFF6F2 (Seashell), #DBAA76 (Caramel Drizzle), #5E4A00 (Very Coffee), #34270E (Secret Passage), #758F00 (Asparagus Sultan). It mixes white, orange, brown, green tones and feels warm overall. The strongest text pairing is #FFF6F2 on #34270E with a contrast ratio of 13.67:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Seashell	rgb(255, 246, 242)	hsl(18, 100%, 97%)
Caramel Drizzle	rgb(219, 170, 118)	hsl(31, 58%, 66%)
Very Coffee	rgb(94, 74, 0)	hsl(47, 100%, 18%)
Secret Passage	rgb(52, 39, 14)	hsl(39, 58%, 13%)
Asparagus Sultan	rgb(117, 143, 0)	hsl(71, 100%, 28%)

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.

Aa13.67:1 Super#FFF6F2 on #34270E
Aa13.67:1 Super#34270E on #FFF6F2
Aa8.03:1 Very good#FFF6F2 on #5E4A00
Aa8.03:1 Very good#5E4A00 on #FFF6F2
Aa6.95:1 Good#DBAA76 on #34270E
Aa6.95:1 Good#34270E on #DBAA76
Aa4.08:1 Poor#DBAA76 on #5E4A00
Aa4.08:1 Poor#5E4A00 on #DBAA76

Color blindness preview

CSS variables

/* Seashell to Asparagus Sultan — https://swatchly.xyz/palette/fff6f2-dbaa76-5e4a00-34270e-758f00 */
:root {
  --seashell: #fff6f2;
  --caramel-drizzle: #dbaa76;
  --very-coffee: #5e4a00;
  --secret-passage: #34270e;
  --asparagus-sultan: #758f00;
}

Tailwind CSS v4

/* Seashell to Asparagus Sultan — https://swatchly.xyz/palette/fff6f2-dbaa76-5e4a00-34270e-758f00 */
@theme {
  --color-seashell: #fff6f2;
  --color-seashell-50: #fff6f2;
  --color-seashell-100: #f2ecea;
  --color-seashell-200: #ded8d5;
  --color-seashell-300: #c8c1bd;
  --color-seashell-400: #a8a09d;
  --color-seashell-500: #8d8581;
  --color-seashell-600: #726a67;
  --color-seashell-700: #5a5451;
  --color-seashell-800: #47413e;
  --color-seashell-900: #37322f;
  --color-seashell-950: #221e1d;
  --color-caramel-drizzle: #dbaa76;
  --color-caramel-drizzle-50: #ffebd7;
  --color-caramel-drizzle-100: #fedcb9;
  --color-caramel-drizzle-200: #edc59c;
  --color-caramel-drizzle-300: #dbaa76;
  --color-caramel-drizzle-400: #bc8d5b;
  --color-caramel-drizzle-500: #a27441;
  --color-caramel-drizzle-600: #875c2a;
  --color-caramel-drizzle-700: #6f4819;
  --color-caramel-drizzle-800: #5a380c;
  --color-caramel-drizzle-900: #492b05;
  --color-caramel-drizzle-950: #2f1a01;
  --color-very-coffee: #5e4a00;
  --color-very-coffee-50: #fff5d8;
  --color-very-coffee-100: #f8ebc4;
  --color-very-coffee-200: #e5d5a6;
  --color-very-coffee-300: #cfbc86;
  --color-very-coffee-400: #b09b5f;
  --color-very-coffee-500: #937e40;
  --color-very-coffee-600: #766225;
  --color-very-coffee-700: #5e4a00;
  --color-very-coffee-800: #493a06;
  --color-very-coffee-900: #392c01;
  --color-very-coffee-950: #231a00;
  --color-secret-passage: #34270e;
  --color-secret-passage-50: #fdf4e4;
  --color-secret-passage-100: #f4ead8;
  --color-secret-passage-200: #e2d6c0;
  --color-secret-passage-300: #cdbfa7;
  --color-secret-passage-400: #ad9d83;
  --color-secret-passage-500: #908065;
  --color-secret-passage-600: #73644b;
  --color-secret-passage-700: #594c36;
  --color-secret-passage-800: #433825;
  --color-secret-passage-900: #34270e;
  --color-secret-passage-950: #1d170c;
  --color-asparagus-sultan: #758f00;
  --color-asparagus-sultan-50: #ebfec1;
  --color-asparagus-sultan-100: #e0f4af;
  --color-asparagus-sultan-200: #cae18e;
  --color-asparagus-sultan-300: #b1cb6a;
  --color-asparagus-sultan-400: #91ab3a;
  --color-asparagus-sultan-500: #758f00;
  --color-asparagus-sultan-600: #5e7300;
  --color-asparagus-sultan-700: #4a5b00;
  --color-asparagus-sultan-800: #394800;
  --color-asparagus-sultan-900: #2c3700;
  --color-asparagus-sultan-950: #1b2300;
}