Embarrassed to Piggy Bank Color Palette

About this palette

Embarrassed to Piggy Bank is a 5-color warm palette: #F07590 (Embarrassed), #61113B (Soul Anchor), #992700 (Burnt Red), #BB5E00 (Fire Ant), #FFCEC1 (Piggy Bank). It mixes pink, red, orange tones and feels warm overall. The strongest text pairing is #61113B on #FFCEC1 with a contrast ratio of 8.99:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Embarrassed	rgb(240, 117, 144)	hsl(347, 80%, 70%)
Soul Anchor	rgb(97, 17, 59)	hsl(328, 70%, 22%)
Burnt Red	rgb(153, 39, 0)	hsl(15, 100%, 30%)
Fire Ant	rgb(187, 94, 0)	hsl(30, 100%, 37%)
Piggy Bank	rgb(255, 206, 193)	hsl(13, 100%, 88%)

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.99:1 Very good#61113B on #FFCEC1
Aa8.99:1 Very good#FFCEC1 on #61113B
Aa5.62:1 Good#992700 on #FFCEC1
Aa5.62:1 Good#FFCEC1 on #992700
Aa4.63:1 Good#F07590 on #61113B
Aa4.63:1 Good#61113B on #F07590
Aa3.15:1 Poor#BB5E00 on #FFCEC1
Aa3.15:1 Poor#FFCEC1 on #BB5E00

Color blindness preview

CSS variables

/* Embarrassed to Piggy Bank — https://swatchly.xyz/palette/f07590-61113b-992700-bb5e00-ffcec1 */
:root {
  --embarrassed: #f07590;
  --soul-anchor: #61113b;
  --burnt-red: #992700;
  --fire-ant: #bb5e00;
  --piggy-bank: #ffcec1;
}

Tailwind CSS v4

/* Embarrassed to Piggy Bank — https://swatchly.xyz/palette/f07590-61113b-992700-bb5e00-ffcec1 */
@theme {
  --color-embarrassed: #f07590;
  --color-embarrassed-50: #fff2f3;
  --color-embarrassed-100: #ffe4e8;
  --color-embarrassed-200: #ffc7d0;
  --color-embarrassed-300: #ffa3b4;
  --color-embarrassed-400: #f07590;
  --color-embarrassed-500: #d05975;
  --color-embarrassed-600: #b03e5c;
  --color-embarrassed-700: #922846;
  --color-embarrassed-800: #771935;
  --color-embarrassed-900: #5e0e28;
  --color-embarrassed-950: #3e0517;
  --color-soul-anchor: #61113b;
  --color-soul-anchor-50: #fff1f6;
  --color-soul-anchor-100: #ffe2ed;
  --color-soul-anchor-200: #ffc4db;
  --color-soul-anchor-300: #f5a6c6;
  --color-soul-anchor-400: #d983a7;
  --color-soul-anchor-500: #be678d;
  --color-soul-anchor-600: #a14e73;
  --color-soul-anchor-700: #863a5c;
  --color-soul-anchor-800: #6d2a4a;
  --color-soul-anchor-900: #61113b;
  --color-soul-anchor-950: #3b1025;
  --color-burnt-red: #992700;
  --color-burnt-red-50: #fff2ee;
  --color-burnt-red-100: #ffe5dd;
  --color-burnt-red-200: #ffc9bb;
  --color-burnt-red-300: #ffa890;
  --color-burnt-red-400: #ef7c5d;
  --color-burnt-red-500: #d35e3f;
  --color-burnt-red-600: #b34224;
  --color-burnt-red-700: #992700;
  --color-burnt-red-800: #791d00;
  --color-burnt-red-900: #5f1400;
  --color-burnt-red-950: #3e0a00;
  --color-fire-ant: #bb5e00;
  --color-fire-ant-50: #fff0e6;
  --color-fire-ant-100: #ffe0cd;
  --color-fire-ant-200: #ffc39c;
  --color-fire-ant-300: #f9a165;
  --color-fire-ant-400: #da7c36;
  --color-fire-ant-500: #bb5e00;
  --color-fire-ant-600: #984b00;
  --color-fire-ant-700: #7a3b00;
  --color-fire-ant-800: #612d00;
  --color-fire-ant-900: #4d2200;
  --color-fire-ant-950: #321400;
  --color-piggy-bank: #ffcec1;
  --color-piggy-bank-50: #fff5f2;
  --color-piggy-bank-100: #ffe8e2;
  --color-piggy-bank-200: #ffcec1;
  --color-piggy-bank-300: #e2b9ae;
  --color-piggy-bank-400: #c4988c;
  --color-piggy-bank-500: #a87b70;
  --color-piggy-bank-600: #8b6156;
  --color-piggy-bank-700: #714b41;
  --color-piggy-bank-800: #593930;
  --color-piggy-bank-900: #462b23;
  --color-piggy-bank-950: #2d1914;
}