Shrimp Toast to Midnight Express color palette

F3C4A7Shrimp Toast 9D95CBEnchanted Lilac 508468Clouded Pine 016D55Into the Green 4A3325Café Noir 27253AMidnight Express

Open in generator Export PNG, PDF, ASE…

About this palette

Shrimp Toast to Midnight Express is a 6-color cool palette: #F3C4A7 (Shrimp Toast), #9D95CB (Enchanted Lilac), #508468 (Clouded Pine), #016D55 (Into the Green), #4A3325 (Café Noir), #27253A (Midnight Express). It mixes orange, purple, green, turquoise, brown tones and feels cool overall. The strongest text pairing is #F3C4A7 on #27253A with a contrast ratio of 9.39:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shrimp Toast	rgb(243, 196, 167)	hsl(23, 76%, 80%)
Enchanted Lilac	rgb(157, 149, 203)	hsl(249, 34%, 69%)
Clouded Pine	rgb(80, 132, 104)	hsl(148, 25%, 42%)
Into the Green	rgb(1, 109, 85)	hsl(167, 98%, 22%)
Café Noir	rgb(74, 51, 37)	hsl(23, 33%, 22%)
Midnight Express	rgb(39, 37, 58)	hsl(246, 22%, 19%)

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.39:1 Very good#F3C4A7 on #27253A
Aa9.39:1 Very good#27253A on #F3C4A7
Aa7.40:1 Very good#F3C4A7 on #4A3325
Aa7.40:1 Very good#4A3325 on #F3C4A7
Aa5.38:1 Good#9D95CB on #27253A
Aa5.38:1 Good#27253A on #9D95CB
Aa4.24:1 Poor#9D95CB on #4A3325
Aa4.24:1 Poor#4A3325 on #9D95CB

Color blindness preview

CSS variables

/* Shrimp Toast to Midnight Express — https://swatchly.xyz/palette/f3c4a7-9d95cb-508468-016d55-4a3325-27253a */
:root {
  --shrimp-toast: #f3c4a7;
  --enchanted-lilac: #9d95cb;
  --clouded-pine: #508468;
  --into-the-green: #016d55;
  --caf-noir: #4a3325;
  --midnight-express: #27253a;
}

Tailwind CSS v4

/* Shrimp Toast to Midnight Express — https://swatchly.xyz/palette/f3c4a7-9d95cb-508468-016d55-4a3325-27253a */
@theme {
  --color-shrimp-toast: #f3c4a7;
  --color-shrimp-toast-50: #ffebdf;
  --color-shrimp-toast-100: #fdddc9;
  --color-shrimp-toast-200: #f3c4a7;
  --color-shrimp-toast-300: #d9b097;
  --color-shrimp-toast-400: #bd9277;
  --color-shrimp-toast-500: #a2785d;
  --color-shrimp-toast-600: #875f45;
  --color-shrimp-toast-700: #6f4a33;
  --color-shrimp-toast-800: #5a3a25;
  --color-shrimp-toast-900: #472c1a;
  --color-shrimp-toast-950: #2d1a0d;
  --color-enchanted-lilac: #9d95cb;
  --color-enchanted-lilac-50: #f3f2ff;
  --color-enchanted-lilac-100: #e8e5ff;
  --color-enchanted-lilac-200: #d4cefa;
  --color-enchanted-lilac-300: #bdb6e7;
  --color-enchanted-lilac-400: #9d95cb;
  --color-enchanted-lilac-500: #837baf;
  --color-enchanted-lilac-600: #696192;
  --color-enchanted-lilac-700: #544c78;
  --color-enchanted-lilac-800: #413b61;
  --color-enchanted-lilac-900: #322d4d;
  --color-enchanted-lilac-950: #1f1b33;
  --color-clouded-pine: #508468;
  --color-clouded-pine-50: #e0feec;
  --color-clouded-pine-100: #d6f7e3;
  --color-clouded-pine-200: #c0e7d0;
  --color-clouded-pine-300: #a7d3ba;
  --color-clouded-pine-400: #85b79b;
  --color-clouded-pine-500: #699d81;
  --color-clouded-pine-600: #508468;
  --color-clouded-pine-700: #396a50;
  --color-clouded-pine-800: #28543d;
  --color-clouded-pine-900: #1b402d;
  --color-clouded-pine-950: #0d291b;
  --color-into-the-green: #016d55;
  --color-into-the-green-50: #dafff1;
  --color-into-the-green-100: #c6f8e6;
  --color-into-the-green-200: #ace8d3;
  --color-into-the-green-300: #8fd5bd;
  --color-into-the-green-400: #68b89e;
  --color-into-the-green-500: #489e83;
  --color-into-the-green-600: #2a836a;
  --color-into-the-green-700: #016d55;
  --color-into-the-green-800: #005642;
  --color-into-the-green-900: #004232;
  --color-into-the-green-950: #002a1f;
  --color-caf-noir: #4a3325;
  --color-caf-noir-50: #fff2eb;
  --color-caf-noir-100: #fae7dc;
  --color-caf-noir-200: #e9d3c6;
  --color-caf-noir-300: #d4bbad;
  --color-caf-noir-400: #b79d8d;
  --color-caf-noir-500: #9d8272;
  --color-caf-noir-600: #83695a;
  --color-caf-noir-700: #6b5446;
  --color-caf-noir-800: #574336;
  --color-caf-noir-900: #4a3325;
  --color-caf-noir-950: #2e2119;
  --color-midnight-express: #27253a;
  --color-midnight-express-50: #f4f4ff;
  --color-midnight-express-100: #eae9fb;
  --color-midnight-express-200: #d6d5ea;
  --color-midnight-express-300: #bfbed6;
  --color-midnight-express-400: #a09eb8;
  --color-midnight-express-500: #86859e;
  --color-midnight-express-600: #6e6c85;
  --color-midnight-express-700: #59576e;
  --color-midnight-express-800: #48465a;
  --color-midnight-express-900: #3a384a;
  --color-midnight-express-950: #27253a;
}