Pineapple to Tomato Bisque color palette

543B00Pineapple E48E00Hotter Butter 9B4C00Warm Brown FF9AA1Mad Pinker FFD7D3We Peep CA5E00Tomato Bisque

Open in generator Export PNG, PDF, ASE…

About this palette

Pineapple to Tomato Bisque is a 6-color warm, earthy palette: #543B00 (Pineapple), #E48E00 (Hotter Butter), #9B4C00 (Warm Brown), #FF9AA1 (Mad Pinker), #FFD7D3 (We Peep), #CA5E00 (Tomato Bisque). It mixes brown, orange, pink tones and feels warm overall. The strongest text pairing is #543B00 on #FFD7D3 with a contrast ratio of 7.95:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pineapple	rgb(84, 59, 0)	hsl(42, 100%, 16%)
Hotter Butter	rgb(228, 142, 0)	hsl(37, 100%, 45%)
Warm Brown	rgb(155, 76, 0)	hsl(29, 100%, 30%)
Mad Pinker	rgb(255, 154, 161)	hsl(356, 100%, 80%)
We Peep	rgb(255, 215, 211)	hsl(5, 100%, 91%)
Tomato Bisque	rgb(202, 94, 0)	hsl(28, 100%, 40%)

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.

Aa7.95:1 Very good#543B00 on #FFD7D3
Aa7.95:1 Very good#FFD7D3 on #543B00
Aa5.19:1 Good#543B00 on #FF9AA1
Aa5.19:1 Good#FF9AA1 on #543B00
Aa4.64:1 Good#9B4C00 on #FFD7D3
Aa4.64:1 Good#FFD7D3 on #9B4C00
Aa4.08:1 Poor#543B00 on #E48E00
Aa4.08:1 Poor#E48E00 on #543B00

Color blindness preview

CSS variables

/* Pineapple to Tomato Bisque — https://swatchly.xyz/palette/543b00-e48e00-9b4c00-ff9aa1-ffd7d3-ca5e00 */
:root {
  --pineapple: #543b00;
  --hotter-butter: #e48e00;
  --warm-brown: #9b4c00;
  --mad-pinker: #ff9aa1;
  --we-peep: #ffd7d3;
  --tomato-bisque: #ca5e00;
}

Tailwind CSS v4

/* Pineapple to Tomato Bisque — https://swatchly.xyz/palette/543b00-e48e00-9b4c00-ff9aa1-ffd7d3-ca5e00 */
@theme {
  --color-pineapple: #543b00;
  --color-pineapple-50: #fff4e0;
  --color-pineapple-100: #fbe9c8;
  --color-pineapple-200: #ebd5ae;
  --color-pineapple-300: #d6bd90;
  --color-pineapple-400: #b89c6b;
  --color-pineapple-500: #9c804e;
  --color-pineapple-600: #806634;
  --color-pineapple-700: #674f21;
  --color-pineapple-800: #543b00;
  --color-pineapple-900: #3f2e0a;
  --color-pineapple-950: #281b04;
  --color-hotter-butter: #e48e00;
  --color-hotter-butter-50: #fff4e9;
  --color-hotter-butter-100: #ffe8d2;
  --color-hotter-butter-200: #ffd09e;
  --color-hotter-butter-300: #fcb25d;
  --color-hotter-butter-400: #e48e00;
  --color-hotter-butter-500: #be7600;
  --color-hotter-butter-600: #9a5e00;
  --color-hotter-butter-700: #7a4a00;
  --color-hotter-butter-800: #603900;
  --color-hotter-butter-900: #4b2b00;
  --color-hotter-butter-950: #2f1900;
  --color-warm-brown: #9b4c00;
  --color-warm-brown-50: #fff2eb;
  --color-warm-brown-100: #ffe4d3;
  --color-warm-brown-200: #ffc7a5;
  --color-warm-brown-300: #f5a977;
  --color-warm-brown-400: #d8864d;
  --color-warm-brown-500: #ba682c;
  --color-warm-brown-600: #9b4c00;
  --color-warm-brown-700: #7c3b00;
  --color-warm-brown-800: #622e00;
  --color-warm-brown-900: #4d2200;
  --color-warm-brown-950: #321400;
  --color-mad-pinker: #ff9aa1;
  --color-mad-pinker-50: #ffedee;
  --color-mad-pinker-100: #ffdedf;
  --color-mad-pinker-200: #ffc0c3;
  --color-mad-pinker-300: #ff9aa1;
  --color-mad-pinker-400: #dc7d84;
  --color-mad-pinker-500: #c0616a;
  --color-mad-pinker-600: #a24952;
  --color-mad-pinker-700: #86353e;
  --color-mad-pinker-800: #6d262f;
  --color-mad-pinker-900: #581b23;
  --color-mad-pinker-950: #390e14;
  --color-we-peep: #ffd7d3;
  --color-we-peep-50: #ffe7e4;
  --color-we-peep-100: #ffd7d3;
  --color-we-peep-200: #e6c8c4;
  --color-we-peep-300: #d4b2ae;
  --color-we-peep-400: #b79390;
  --color-we-peep-500: #9d7976;
  --color-we-peep-600: #82615e;
  --color-we-peep-700: #6b4c4a;
  --color-we-peep-800: #553b38;
  --color-we-peep-900: #432c2a;
  --color-we-peep-950: #2a1a19;
  --color-tomato-bisque: #ca5e00;
  --color-tomato-bisque-50: #fff1ea;
  --color-tomato-bisque-100: #ffe3d4;
  --color-tomato-bisque-200: #ffc7a9;
  --color-tomato-bisque-300: #ffa471;
  --color-tomato-bisque-400: #e87c38;
  --color-tomato-bisque-500: #ca5e00;
  --color-tomato-bisque-600: #a44b00;
  --color-tomato-bisque-700: #833a00;
  --color-tomato-bisque-800: #682d00;
  --color-tomato-bisque-900: #522200;
  --color-tomato-bisque-950: #351300;
}