Young Salmon to Eggplant color palette

About this palette

Young Salmon to Eggplant is a 5-color warm palette: #FFB8B2 (Young Salmon), #914D65 (Velour Scar), #650F6E (Velvet Vortex), #FB70AE (Pop That Gum), #430B44 (Eggplant). It mixes pink, red, purple tones and feels warm overall. The strongest text pairing is #FFB8B2 on #430B44 with a contrast ratio of 9.31:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Young Salmonrgb(255, 184, 178)hsl(5, 100%, 85%)
Velour Scarrgb(145, 77, 101)hsl(339, 31%, 44%)
Velvet Vortexrgb(101, 15, 110)hsl(294, 76%, 25%)
Pop That Gumrgb(251, 112, 174)hsl(333, 95%, 71%)
Eggplantrgb(67, 11, 68)hsl(299, 72%, 15%)

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.

  • Aa9.31:1 Very good#FFB8B2 on #430B44
  • Aa9.31:1 Very good#430B44 on #FFB8B2
  • Aa6.90:1 Good#FFB8B2 on #650F6E
  • Aa6.90:1 Good#650F6E on #FFB8B2
  • Aa5.86:1 Good#FB70AE on #430B44
  • Aa5.86:1 Good#430B44 on #FB70AE
  • Aa4.35:1 Poor#650F6E on #FB70AE
  • Aa4.35:1 Poor#FB70AE on #650F6E

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Young Salmon to Eggplant — https://swatchly.xyz/palette/ffb8b2-914d65-650f6e-fb70ae-430b44 */
:root {
  --young-salmon: #ffb8b2;
  --velour-scar: #914d65;
  --velvet-vortex: #650f6e;
  --pop-that-gum: #fb70ae;
  --eggplant: #430b44;
}

Tailwind CSS v4

/* Young Salmon to Eggplant — https://swatchly.xyz/palette/ffb8b2-914d65-650f6e-fb70ae-430b44 */
@theme {
  --color-young-salmon: #ffb8b2;
  --color-young-salmon-50: #ffe8e5;
  --color-young-salmon-100: #ffd7d4;
  --color-young-salmon-200: #ffb8b2;
  --color-young-salmon-300: #e4a6a1;
  --color-young-salmon-400: #c88782;
  --color-young-salmon-500: #ae6d68;
  --color-young-salmon-600: #925551;
  --color-young-salmon-700: #79423e;
  --color-young-salmon-800: #63322f;
  --color-young-salmon-900: #4e2523;
  --color-young-salmon-950: #331514;
  --color-velour-scar: #914d65;
  --color-velour-scar-50: #fff1f5;
  --color-velour-scar-100: #ffe1ea;
  --color-velour-scar-200: #fec2d4;
  --color-velour-scar-300: #eaa8bd;
  --color-velour-scar-400: #cc859c;
  --color-velour-scar-500: #af6880;
  --color-velour-scar-600: #914d65;
  --color-velour-scar-700: #763a50;
  --color-velour-scar-800: #5f2b3e;
  --color-velour-scar-900: #4b2030;
  --color-velour-scar-950: #31121d;
  --color-velvet-vortex: #650f6e;
  --color-velvet-vortex-50: #fef0ff;
  --color-velvet-vortex-100: #fde0ff;
  --color-velvet-vortex-200: #fac0ff;
  --color-velvet-vortex-300: #eba1f3;
  --color-velvet-vortex-400: #ce7cd7;
  --color-velvet-vortex-500: #b25fba;
  --color-velvet-vortex-600: #94449c;
  --color-velvet-vortex-700: #782f80;
  --color-velvet-vortex-800: #650f6e;
  --color-velvet-vortex-900: #4b1451;
  --color-velvet-vortex-950: #300935;
  --color-pop-that-gum: #fb70ae;
  --color-pop-that-gum-50: #fff4f8;
  --color-pop-that-gum-100: #ffe7ef;
  --color-pop-that-gum-200: #ffcbde;
  --color-pop-that-gum-300: #ffa8ca;
  --color-pop-that-gum-400: #fb70ae;
  --color-pop-that-gum-500: #da5291;
  --color-pop-that-gum-600: #b93475;
  --color-pop-that-gum-700: #991b5d;
  --color-pop-that-gum-800: #7c0749;
  --color-pop-that-gum-900: #620037;
  --color-pop-that-gum-950: #3f0022;
  --color-eggplant: #430b44;
  --color-eggplant-50: #ffeffe;
  --color-eggplant-100: #ffe0fe;
  --color-eggplant-200: #f6c5f4;
  --color-eggplant-300: #e2abe1;
  --color-eggplant-400: #c589c4;
  --color-eggplant-500: #ac6fab;
  --color-eggplant-600: #915790;
  --color-eggplant-700: #794379;
  --color-eggplant-800: #643464;
  --color-eggplant-900: #532853;
  --color-eggplant-950: #430b44;
}

Similar palettes