Pecan to Siren Color Palette

About this palette

Pecan to Siren is a 5-color warm, vintage palette: #A2755B (Pecan), #007A88 (Bermuda), #80CAD0 (Summer of ’82), #F6C9D9 (Smidgen of Love), #63283E (Siren). It mixes orange, turquoise, pink, red tones and feels warm overall. The strongest text pairing is #F6C9D9 on #63283E with a contrast ratio of 7.50:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pecan	rgb(162, 117, 91)	hsl(22, 28%, 50%)
Bermuda	rgb(0, 122, 136)	hsl(186, 100%, 27%)
Summer of ’82	rgb(128, 202, 208)	hsl(184, 46%, 66%)
Smidgen of Love	rgb(246, 201, 217)	hsl(339, 71%, 88%)
Siren	rgb(99, 40, 62)	hsl(338, 42%, 27%)

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.50:1 Very good#F6C9D9 on #63283E
Aa7.50:1 Very good#63283E on #F6C9D9
Aa5.92:1 Good#80CAD0 on #63283E
Aa5.92:1 Good#63283E on #80CAD0
Aa3.45:1 Poor#007A88 on #F6C9D9
Aa3.45:1 Poor#F6C9D9 on #007A88

Color blindness preview

CSS variables

/* Pecan to Siren — https://swatchly.xyz/palette/a2755b-007a88-80cad0-f6c9d9-63283e */
:root {
  --pecan: #a2755b;
  --bermuda: #007a88;
  --summer-of-82: #80cad0;
  --smidgen-of-love: #f6c9d9;
  --siren: #63283e;
}

Tailwind CSS v4

/* Pecan to Siren — https://swatchly.xyz/palette/a2755b-007a88-80cad0-f6c9d9-63283e */
@theme {
  --color-pecan: #a2755b;
  --color-pecan-50: #fff1e9;
  --color-pecan-100: #ffe3d3;
  --color-pecan-200: #f1ccb6;
  --color-pecan-300: #ddb39b;
  --color-pecan-400: #bf9177;
  --color-pecan-500: #a2755b;
  --color-pecan-600: #865c44;
  --color-pecan-700: #6d4831;
  --color-pecan-800: #583723;
  --color-pecan-900: #452a19;
  --color-pecan-950: #2d190d;
  --color-bermuda: #007a88;
  --color-bermuda-50: #e1fbff;
  --color-bermuda-100: #c1f6ff;
  --color-bermuda-200: #a3e5ef;
  --color-bermuda-300: #82cfdc;
  --color-bermuda-400: #57b1bf;
  --color-bermuda-500: #3395a4;
  --color-bermuda-600: #007a88;
  --color-bermuda-700: #00616c;
  --color-bermuda-800: #004c55;
  --color-bermuda-900: #003a42;
  --color-bermuda-950: #00252a;
  --color-summer-of-82: #80cad0;
  --color-summer-of-82-50: #d2fbff;
  --color-summer-of-82-100: #c3f1f5;
  --color-summer-of-82-200: #a7dfe3;
  --color-summer-of-82-300: #80cad0;
  --color-summer-of-82-400: #64abb0;
  --color-summer-of-82-500: #469096;
  --color-summer-of-82-600: #2b767b;
  --color-summer-of-82-700: #165f64;
  --color-summer-of-82-800: #064b50;
  --color-summer-of-82-900: #003b3f;
  --color-summer-of-82-950: #002528;
  --color-smidgen-of-love: #f6c9d9;
  --color-smidgen-of-love-50: #fff1f5;
  --color-smidgen-of-love-100: #ffe2ec;
  --color-smidgen-of-love-200: #f6c9d9;
  --color-smidgen-of-love-300: #dbb5c2;
  --color-smidgen-of-love-400: #bd94a3;
  --color-smidgen-of-love-500: #a17988;
  --color-smidgen-of-love-600: #855f6d;
  --color-smidgen-of-love-700: #6c4a57;
  --color-smidgen-of-love-800: #563844;
  --color-smidgen-of-love-900: #432a34;
  --color-smidgen-of-love-950: #2b1920;
  --color-siren: #63283e;
  --color-siren-50: #fff1f5;
  --color-siren-100: #ffe3eb;
  --color-siren-200: #fdc6d6;
  --color-siren-300: #eaacbf;
  --color-siren-400: #cd8a9f;
  --color-siren-500: #b06d83;
  --color-siren-600: #925368;
  --color-siren-700: #763e51;
  --color-siren-800: #63283e;
  --color-siren-900: #4a212f;
  --color-siren-950: #2f121d;
}