Pastrami to Skies of Cyberspace Color Palette

About this palette

Pastrami to Skies of Cyberspace is a 5-color cool palette: #EA717A (Pastrami), #9DDA9E (Leek), #711A15 (Prune), #397743 (Cucumber Queen), #4D70DE (Skies of Cyberspace). It mixes red, green, blue tones and feels cool overall. The strongest text pairing is #9DDA9E on #711A15 with a contrast ratio of 6.96:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastrami	rgb(234, 113, 122)	hsl(356, 74%, 68%)
Leek	rgb(157, 218, 158)	hsl(121, 45%, 74%)
Prune	rgb(113, 26, 21)	hsl(3, 69%, 26%)
Cucumber Queen	rgb(57, 119, 67)	hsl(130, 35%, 35%)
Skies of Cyberspace	rgb(77, 112, 222)	hsl(226, 69%, 59%)

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.

Aa6.96:1 Good#9DDA9E on #711A15
Aa6.96:1 Good#711A15 on #9DDA9E
Aa3.84:1 Poor#EA717A on #711A15
Aa3.84:1 Poor#711A15 on #EA717A
Aa3.33:1 Poor#9DDA9E on #397743
Aa3.33:1 Poor#397743 on #9DDA9E

Color blindness preview

CSS variables

/* Pastrami to Skies of Cyberspace — https://swatchly.xyz/palette/ea717a-9dda9e-711a15-397743-4d70de */
:root {
  --pastrami: #ea717a;
  --leek: #9dda9e;
  --prune: #711a15;
  --cucumber-queen: #397743;
  --skies-of-cyberspace: #4d70de;
}

Tailwind CSS v4

/* Pastrami to Skies of Cyberspace — https://swatchly.xyz/palette/ea717a-9dda9e-711a15-397743-4d70de */
@theme {
  --color-pastrami: #ea717a;
  --color-pastrami-50: #ffefef;
  --color-pastrami-100: #ffe0e0;
  --color-pastrami-200: #ffc2c3;
  --color-pastrami-300: #ff9ca1;
  --color-pastrami-400: #ea717a;
  --color-pastrami-500: #cc5661;
  --color-pastrami-600: #ac3c49;
  --color-pastrami-700: #8f2836;
  --color-pastrami-800: #751928;
  --color-pastrami-900: #5e0f1d;
  --color-pastrami-950: #3f0610;
  --color-leek: #9dda9e;
  --color-leek-50: #ecffec;
  --color-leek-100: #d8fbd7;
  --color-leek-200: #c0ebc0;
  --color-leek-300: #9dda9e;
  --color-leek-400: #7fb881;
  --color-leek-500: #619b63;
  --color-leek-600: #457e48;
  --color-leek-700: #306533;
  --color-leek-800: #204f24;
  --color-leek-900: #153d18;
  --color-leek-950: #09260c;
  --color-prune: #711a15;
  --color-prune-50: #fff2f0;
  --color-prune-100: #ffe4e0;
  --color-prune-200: #ffc8c0;
  --color-prune-300: #fca69a;
  --color-prune-400: #e08276;
  --color-prune-500: #c2655a;
  --color-prune-600: #a24a40;
  --color-prune-700: #84352d;
  --color-prune-800: #711a15;
  --color-prune-900: #531a15;
  --color-prune-950: #360d0a;
  --color-cucumber-queen: #397743;
  --color-cucumber-queen-50: #e0ffe2;
  --color-cucumber-queen-100: #cff7d2;
  --color-cucumber-queen-200: #b4e4b9;
  --color-cucumber-queen-300: #98cf9d;
  --color-cucumber-queen-400: #73af7a;
  --color-cucumber-queen-500: #55935d;
  --color-cucumber-queen-600: #397743;
  --color-cucumber-queen-700: #285f32;
  --color-cucumber-queen-800: #1a4b23;
  --color-cucumber-queen-900: #103b19;
  --color-cucumber-queen-950: #07250d;
  --color-skies-of-cyberspace: #4d70de;
  --color-skies-of-cyberspace-50: #edf3ff;
  --color-skies-of-cyberspace-100: #dce6ff;
  --color-skies-of-cyberspace-200: #bdd0ff;
  --color-skies-of-cyberspace-300: #99b6ff;
  --color-skies-of-cyberspace-400: #698ffe;
  --color-skies-of-cyberspace-500: #4d70de;
  --color-skies-of-cyberspace-600: #3957be;
  --color-skies-of-cyberspace-700: #2943a0;
  --color-skies-of-cyberspace-800: #1d3384;
  --color-skies-of-cyberspace-900: #15266c;
  --color-skies-of-cyberspace-950: #0a174a;
}