Pineapple to White Strawberry color palette

4E3800Pineapple 714C8AGrapes of Italy 009494Java B091BBMetal Petal 7DE6D8Sea Foam FFE0B6White Strawberry

Open in generator Export PNG, PDF, ASE…

About this palette

Pineapple to White Strawberry is a 6-color cool palette: #4E3800 (Pineapple), #714C8A (Grapes of Italy), #009494 (Java), #B091BB (Metal Petal), #7DE6D8 (Sea Foam), #FFE0B6 (White Strawberry). It mixes brown, purple, turquoise, yellow tones and feels cool overall. The strongest text pairing is #4E3800 on #FFE0B6 with a contrast ratio of 8.78:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pineapple	rgb(78, 56, 0)	hsl(43, 100%, 15%)
Grapes of Italy	rgb(113, 76, 138)	hsl(276, 29%, 42%)
Java	rgb(0, 148, 148)	hsl(180, 100%, 29%)
Metal Petal	rgb(176, 145, 187)	hsl(284, 24%, 65%)
Sea Foam	rgb(125, 230, 216)	hsl(172, 68%, 70%)
White Strawberry	rgb(255, 224, 182)	hsl(35, 100%, 86%)

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.

Aa8.78:1 Very good#4E3800 on #FFE0B6
Aa8.78:1 Very good#FFE0B6 on #4E3800
Aa7.51:1 Very good#4E3800 on #7DE6D8
Aa7.51:1 Very good#7DE6D8 on #4E3800
Aa5.35:1 Good#714C8A on #FFE0B6
Aa5.35:1 Good#FFE0B6 on #714C8A
Aa4.57:1 Good#714C8A on #7DE6D8
Aa4.57:1 Good#7DE6D8 on #714C8A

Color blindness preview

CSS variables

/* Pineapple to White Strawberry — https://swatchly.xyz/palette/4e3800-714c8a-009494-b091bb-7de6d8-ffe0b6 */
:root {
  --pineapple: #4e3800;
  --grapes-of-italy: #714c8a;
  --java: #009494;
  --metal-petal: #b091bb;
  --sea-foam: #7de6d8;
  --white-strawberry: #ffe0b6;
}

Tailwind CSS v4

/* Pineapple to White Strawberry — https://swatchly.xyz/palette/4e3800-714c8a-009494-b091bb-7de6d8-ffe0b6 */
@theme {
  --color-pineapple: #4e3800;
  --color-pineapple-50: #fff4df;
  --color-pineapple-100: #fae9ca;
  --color-pineapple-200: #e9d5b0;
  --color-pineapple-300: #d3bd92;
  --color-pineapple-400: #b49c6c;
  --color-pineapple-500: #977f4e;
  --color-pineapple-600: #7b6434;
  --color-pineapple-700: #614c21;
  --color-pineapple-800: #4e3800;
  --color-pineapple-900: #3a2b0b;
  --color-pineapple-950: #241a04;
  --color-grapes-of-italy: #714c8a;
  --color-grapes-of-italy-50: #f9f2ff;
  --color-grapes-of-italy-100: #f3e4ff;
  --color-grapes-of-italy-200: #e9ccff;
  --color-grapes-of-italy-300: #d6b5ef;
  --color-grapes-of-italy-400: #ba95d5;
  --color-grapes-of-italy-500: #a17abc;
  --color-grapes-of-italy-600: #8761a1;
  --color-grapes-of-italy-700: #714c8a;
  --color-grapes-of-italy-800: #593a6e;
  --color-grapes-of-italy-900: #462b57;
  --color-grapes-of-italy-950: #2d193a;
  --color-java: #009494;
  --color-java-50: #d0fffe;
  --color-java-100: #b7f8f7;
  --color-java-200: #96e5e4;
  --color-java-300: #72d0cf;
  --color-java-400: #40b1b0;
  --color-java-500: #009494;
  --color-java-600: #007777;
  --color-java-700: #005f5f;
  --color-java-800: #004a4a;
  --color-java-900: #003a3a;
  --color-java-950: #002424;
  --color-metal-petal: #b091bb;
  --color-metal-petal-50: #fbefff;
  --color-metal-petal-100: #f6e1fd;
  --color-metal-petal-200: #e4cbec;
  --color-metal-petal-300: #ceb2d8;
  --color-metal-petal-400: #b091bb;
  --color-metal-petal-500: #95779f;
  --color-metal-petal-600: #7a5d84;
  --color-metal-petal-700: #62486b;
  --color-metal-petal-800: #4e3756;
  --color-metal-petal-900: #3d2a44;
  --color-metal-petal-950: #27192c;
  --color-sea-foam: #7de6d8;
  --color-sea-foam-50: #c5fef5;
  --color-sea-foam-100: #b4f4ea;
  --color-sea-foam-200: #7de6d8;
  --color-sea-foam-300: #75cec2;
  --color-sea-foam-400: #49b1a4;
  --color-sea-foam-500: #20968a;
  --color-sea-foam-600: #007b70;
  --color-sea-foam-700: #006259;
  --color-sea-foam-800: #004e47;
  --color-sea-foam-900: #003c36;
  --color-sea-foam-950: #002622;
  --color-white-strawberry: #ffe0b6;
  --color-white-strawberry-50: #ffedd6;
  --color-white-strawberry-100: #ffe0b6;
  --color-white-strawberry-200: #e6cfaf;
  --color-white-strawberry-300: #d3b995;
  --color-white-strawberry-400: #b69a73;
  --color-white-strawberry-500: #9b7f58;
  --color-white-strawberry-600: #806640;
  --color-white-strawberry-700: #69502e;
  --color-white-strawberry-800: #533e1f;
  --color-white-strawberry-900: #412f15;
  --color-white-strawberry-950: #291d0a;
}