Cornsilk to Pineapple Color Palette

About this palette

Cornsilk to Pineapple is a 4-color warm, earthy, vintage, gradient palette: #FFF9DB (Cornsilk), #A7C488 (Oh Pistachio), #8E6932 (Aged Antics), #543705 (Pineapple). It mixes white, green, brown tones and feels warm overall. The strongest text pairing is #FFF9DB on #543705 with a contrast ratio of 10.30:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cornsilk	rgb(255, 249, 219)	hsl(50, 100%, 93%)
Oh Pistachio	rgb(167, 196, 136)	hsl(89, 34%, 65%)
Aged Antics	rgb(142, 105, 50)	hsl(36, 48%, 38%)
Pineapple	rgb(84, 55, 5)	hsl(38, 89%, 17%)

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.

Aa10.30:1 Very good#FFF9DB on #543705
Aa10.30:1 Very good#543705 on #FFF9DB
Aa5.66:1 Good#A7C488 on #543705
Aa5.66:1 Good#543705 on #A7C488
Aa4.70:1 Good#FFF9DB on #8E6932
Aa4.70:1 Good#8E6932 on #FFF9DB

Color blindness preview

CSS variables

/* Cornsilk to Pineapple — https://swatchly.xyz/palette/fff9db-a7c488-8e6932-543705 */
:root {
  --cornsilk: #fff9db;
  --oh-pistachio: #a7c488;
  --aged-antics: #8e6932;
  --pineapple: #543705;
}

Tailwind CSS v4

/* Cornsilk to Pineapple — https://swatchly.xyz/palette/fff9db-a7c488-8e6932-543705 */
@theme {
  --color-cornsilk: #fff9db;
  --color-cornsilk-50: #fff9db;
  --color-cornsilk-100: #f2eedc;
  --color-cornsilk-200: #dedac5;
  --color-cornsilk-300: #c8c3ab;
  --color-cornsilk-400: #a8a388;
  --color-cornsilk-500: #8d876c;
  --color-cornsilk-600: #726c52;
  --color-cornsilk-700: #5b563e;
  --color-cornsilk-800: #47432e;
  --color-cornsilk-900: #373322;
  --color-cornsilk-950: #221f13;
  --color-oh-pistachio: #a7c488;
  --color-oh-pistachio-50: #e6f8d4;
  --color-oh-pistachio-100: #d9eec5;
  --color-oh-pistachio-200: #c2daab;
  --color-oh-pistachio-300: #a7c488;
  --color-oh-pistachio-400: #8aa56c;
  --color-oh-pistachio-500: #708b52;
  --color-oh-pistachio-600: #58723b;
  --color-oh-pistachio-700: #455b29;
  --color-oh-pistachio-800: #35491c;
  --color-oh-pistachio-900: #283912;
  --color-oh-pistachio-950: #182408;
  --color-aged-antics: #8e6932;
  --color-aged-antics-50: #fff3e4;
  --color-aged-antics-100: #ffe8ca;
  --color-aged-antics-200: #f2d4ac;
  --color-aged-antics-300: #e0be8f;
  --color-aged-antics-400: #c39e6a;
  --color-aged-antics-500: #a9834c;
  --color-aged-antics-600: #8e6932;
  --color-aged-antics-700: #73521e;
  --color-aged-antics-800: #5c3f0f;
  --color-aged-antics-900: #482f05;
  --color-aged-antics-950: #2e1c01;
  --color-pineapple: #543705;
  --color-pineapple-50: #fff3e4;
  --color-pineapple-100: #fee7cb;
  --color-pineapple-200: #edd3b1;
  --color-pineapple-300: #d8bb93;
  --color-pineapple-400: #ba9a6e;
  --color-pineapple-500: #9e7d51;
  --color-pineapple-600: #816237;
  --color-pineapple-700: #674b24;
  --color-pineapple-800: #543705;
  --color-pineapple-900: #3e2b0d;
  --color-pineapple-950: #271905;
}