Start generating

Pineapple to Fernweh color palette

553F00Pineapple7798D7Blue Bay571000BurnedFF9E89CandyDFF8FFCalm Waters927C2DFernweh
Open in generator Export PNG, PDF, ASE…

About this palette

Pineapple to Fernweh is a 6-color warm, vintage palette: #553F00 (Pineapple), #7798D7 (Blue Bay), #571000 (Burned), #FF9E89 (Candy), #DFF8FF (Calm Waters), #927C2D (Fernweh). It mixes brown, blue, pink, white, yellow tones and feels warm overall. The strongest text pairing is #571000 on #DFF8FF with a contrast ratio of 12.85:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pineapplergb(85, 63, 0)hsl(44, 100%, 17%)
Blue Bayrgb(119, 152, 215)hsl(219, 55%, 65%)
Burnedrgb(87, 16, 0)hsl(11, 100%, 17%)
Candyrgb(255, 158, 137)hsl(11, 100%, 77%)
Calm Watersrgb(223, 248, 255)hsl(193, 100%, 94%)
Fernwehrgb(146, 124, 45)hsl(47, 53%, 37%)

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.

  • Aa12.85:1 Super#571000 on #DFF8FF
  • Aa12.85:1 Super#DFF8FF on #571000
  • Aa9.06:1 Very good#553F00 on #DFF8FF
  • Aa9.06:1 Very good#DFF8FF on #553F00
  • Aa7.10:1 Very good#571000 on #FF9E89
  • Aa7.10:1 Very good#FF9E89 on #571000
  • Aa5.01:1 Good#553F00 on #FF9E89
  • Aa5.01:1 Good#FF9E89 on #553F00

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Pineapple to Fernweh — https://swatchly.xyz/palette/553f00-7798d7-571000-ff9e89-dff8ff-927c2d */
:root {
  --pineapple: #553f00;
  --blue-bay: #7798d7;
  --burned: #571000;
  --candy: #ff9e89;
  --calm-waters: #dff8ff;
  --fernweh: #927c2d;
}

Tailwind CSS v4

/* Pineapple to Fernweh — https://swatchly.xyz/palette/553f00-7798d7-571000-ff9e89-dff8ff-927c2d */
@theme {
  --color-pineapple: #553f00;
  --color-pineapple-50: #fff4dd;
  --color-pineapple-100: #faeac7;
  --color-pineapple-200: #e8d6ad;
  --color-pineapple-300: #d4bf90;
  --color-pineapple-400: #b69f6b;
  --color-pineapple-500: #9b834d;
  --color-pineapple-600: #806934;
  --color-pineapple-700: #675221;
  --color-pineapple-800: #553f00;
  --color-pineapple-900: #403109;
  --color-pineapple-950: #291e03;
  --color-blue-bay: #7798d7;
  --color-blue-bay-50: #ebf2ff;
  --color-blue-bay-100: #dae7ff;
  --color-blue-bay-200: #b9d2ff;
  --color-blue-bay-300: #9bb9f3;
  --color-blue-bay-400: #7798d7;
  --color-blue-bay-500: #5e7ebb;
  --color-blue-bay-600: #47659e;
  --color-blue-bay-700: #355084;
  --color-blue-bay-800: #273e6b;
  --color-blue-bay-900: #1d3057;
  --color-blue-bay-950: #101e3a;
  --color-burned: #571000;
  --color-burned-50: #fff2ee;
  --color-burned-100: #ffe4de;
  --color-burned-200: #ffc9bb;
  --color-burned-300: #f5ac9a;
  --color-burned-400: #d88975;
  --color-burned-500: #bb6c58;
  --color-burned-600: #9b513f;
  --color-burned-700: #7e3b2b;
  --color-burned-800: #632a1d;
  --color-burned-900: #571000;
  --color-burned-950: #311008;
  --color-candy: #ff9e89;
  --color-candy-50: #ffeeea;
  --color-candy-100: #ffdfd8;
  --color-candy-200: #ffc2b5;
  --color-candy-300: #ff9e89;
  --color-candy-400: #dc816d;
  --color-candy-500: #c06552;
  --color-candy-600: #a24c3b;
  --color-candy-700: #863829;
  --color-candy-800: #6d291b;
  --color-candy-900: #581d12;
  --color-candy-950: #390f07;
  --color-calm-waters: #dff8ff;
  --color-calm-waters-50: #dff8ff;
  --color-calm-waters-100: #ddecf1;
  --color-calm-waters-200: #c8dadf;
  --color-calm-waters-300: #afc4ca;
  --color-calm-waters-400: #8fa5ac;
  --color-calm-waters-500: #748a91;
  --color-calm-waters-600: #5a7076;
  --color-calm-waters-700: #45595f;
  --color-calm-waters-800: #34464a;
  --color-calm-waters-900: #27363a;
  --color-calm-waters-950: #172124;
  --color-fernweh: #927c2d;
  --color-fernweh-50: #fff4cd;
  --color-fernweh-100: #f6e8b8;
  --color-fernweh-200: #e4d299;
  --color-fernweh-300: #ceba78;
  --color-fernweh-400: #af994e;
  --color-fernweh-500: #927c2d;
  --color-fernweh-600: #786310;
  --color-fernweh-700: #614e00;
  --color-fernweh-800: #4c3d00;
  --color-fernweh-900: #3b2f00;
  --color-fernweh-950: #261d00;
}

Similar palettes