Red Elegance to Deeply Embarrassed color palette

7D474BRed Elegance 56934FVictorian Garden 81B169Soon to Be Hay 223245Blue Whale EBB6B7Deeply Embarrassed

Open in generator Export PNG, PDF, ASE…

About this palette

Red Elegance to Deeply Embarrassed is a 5-color cool, vintage palette: #7D474B (Red Elegance), #56934F (Victorian Garden), #81B169 (Soon to Be Hay), #223245 (Blue Whale), #EBB6B7 (Deeply Embarrassed). It mixes red, green, blue, pink tones and feels cool overall. The strongest text pairing is #223245 on #EBB6B7 with a contrast ratio of 7.40:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Red Elegance	rgb(125, 71, 75)	hsl(356, 28%, 38%)
Victorian Garden	rgb(86, 147, 79)	hsl(114, 30%, 44%)
Soon to Be Hay	rgb(129, 177, 105)	hsl(100, 32%, 55%)
Blue Whale	rgb(34, 50, 69)	hsl(213, 34%, 20%)
Deeply Embarrassed	rgb(235, 182, 183)	hsl(359, 57%, 82%)

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.40:1 Very good#223245 on #EBB6B7
Aa7.40:1 Very good#EBB6B7 on #223245
Aa5.23:1 Good#81B169 on #223245
Aa5.23:1 Good#223245 on #81B169
Aa4.14:1 Poor#7D474B on #EBB6B7
Aa4.14:1 Poor#EBB6B7 on #7D474B
Aa3.53:1 Poor#56934F on #223245
Aa3.53:1 Poor#223245 on #56934F

Color blindness preview

CSS variables

/* Red Elegance to Deeply Embarrassed — https://swatchly.xyz/palette/7d474b-56934f-81b169-223245-ebb6b7 */
:root {
  --red-elegance: #7d474b;
  --victorian-garden: #56934f;
  --soon-to-be-hay: #81b169;
  --blue-whale: #223245;
  --deeply-embarrassed: #ebb6b7;
}

Tailwind CSS v4

/* Red Elegance to Deeply Embarrassed — https://swatchly.xyz/palette/7d474b-56934f-81b169-223245-ebb6b7 */
@theme {
  --color-red-elegance: #7d474b;
  --color-red-elegance-50: #fff1f2;
  --color-red-elegance-100: #ffe4e4;
  --color-red-elegance-200: #facacc;
  --color-red-elegance-300: #e8b2b5;
  --color-red-elegance-400: #cc9295;
  --color-red-elegance-500: #b1767a;
  --color-red-elegance-600: #955d61;
  --color-red-elegance-700: #7d474b;
  --color-red-elegance-800: #63373a;
  --color-red-elegance-900: #4e282b;
  --color-red-elegance-950: #33181a;
  --color-victorian-garden: #56934f;
  --color-victorian-garden-50: #dfffda;
  --color-victorian-garden-100: #cef7c9;
  --color-victorian-garden-200: #b4e4ae;
  --color-victorian-garden-300: #98cf91;
  --color-victorian-garden-400: #73af6c;
  --color-victorian-garden-500: #56934f;
  --color-victorian-garden-600: #3d7837;
  --color-victorian-garden-700: #2b6125;
  --color-victorian-garden-800: #1d4d18;
  --color-victorian-garden-900: #133c0e;
  --color-victorian-garden-950: #082606;
  --color-soon-to-be-hay: #81b169;
  --color-soon-to-be-hay-50: #e3ffd7;
  --color-soon-to-be-hay-100: #d7f6c8;
  --color-soon-to-be-hay-200: #bfe4ad;
  --color-soon-to-be-hay-300: #a5cf91;
  --color-soon-to-be-hay-400: #81b169;
  --color-soon-to-be-hay-500: #66954e;
  --color-soon-to-be-hay-600: #4d7a35;
  --color-soon-to-be-hay-700: #396222;
  --color-soon-to-be-hay-800: #294d14;
  --color-soon-to-be-hay-900: #1e3c0a;
  --color-soon-to-be-hay-950: #102603;
  --color-blue-whale: #223245;
  --color-blue-whale-50: #eff6ff;
  --color-blue-whale-100: #e0edfc;
  --color-blue-whale-200: #cad9eb;
  --color-blue-whale-300: #b2c3d7;
  --color-blue-whale-400: #91a3b9;
  --color-blue-whale-500: #75879e;
  --color-blue-whale-600: #5b6c82;
  --color-blue-whale-700: #455568;
  --color-blue-whale-800: #344252;
  --color-blue-whale-900: #223245;
  --color-blue-whale-950: #161e28;
  --color-deeply-embarrassed: #ebb6b7;
  --color-deeply-embarrassed-50: #fff5f5;
  --color-deeply-embarrassed-100: #ffe8e8;
  --color-deeply-embarrassed-200: #f8d0d1;
  --color-deeply-embarrassed-300: #ebb6b7;
  --color-deeply-embarrassed-400: #c79798;
  --color-deeply-embarrassed-500: #ab7a7b;
  --color-deeply-embarrassed-600: #8e5f61;
  --color-deeply-embarrassed-700: #73494b;
  --color-deeply-embarrassed-800: #5c3739;
  --color-deeply-embarrassed-900: #47292a;
  --color-deeply-embarrassed-950: #2e1819;
}