Midnight Express to Strawberry Risotto Color Palette

About this palette

Midnight Express to Strawberry Risotto is a 5-color muted, vintage, gradient palette: #232938 (Midnight Express), #41523C (Hōjicha), #5C7559 (Cactus), #C99F95 (Cashmere Clay), #ECC8BF (Strawberry Risotto). It mixes gray, green, red, pink tones and feels balanced overall. The strongest text pairing is #232938 on #ECC8BF with a contrast ratio of 9.39:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Express	rgb(35, 41, 56)	hsl(223, 23%, 18%)
Hōjicha	rgb(65, 82, 60)	hsl(106, 15%, 28%)
Cactus	rgb(92, 117, 89)	hsl(114, 14%, 40%)
Cashmere Clay	rgb(201, 159, 149)	hsl(12, 32%, 69%)
Strawberry Risotto	rgb(236, 200, 191)	hsl(12, 54%, 84%)

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#232938 on #ECC8BF
Aa9.39:1 Very good#ECC8BF on #232938
Aa6.14:1 Good#232938 on #C99F95
Aa6.14:1 Good#C99F95 on #232938
Aa5.44:1 Good#41523C on #ECC8BF
Aa5.44:1 Good#ECC8BF on #41523C
Aa3.56:1 Poor#41523C on #C99F95
Aa3.56:1 Poor#C99F95 on #41523C

Color blindness preview

CSS variables

/* Midnight Express to Strawberry Risotto — https://swatchly.xyz/palette/232938-41523c-5c7559-c99f95-ecc8bf */
:root {
  --midnight-express: #232938;
  --h-jicha: #41523c;
  --cactus: #5c7559;
  --cashmere-clay: #c99f95;
  --strawberry-risotto: #ecc8bf;
}

Tailwind CSS v4

/* Midnight Express to Strawberry Risotto — https://swatchly.xyz/palette/232938-41523c-5c7559-c99f95-ecc8bf */
@theme {
  --color-midnight-express: #232938;
  --color-midnight-express-50: #f1f5ff;
  --color-midnight-express-100: #e6ebf8;
  --color-midnight-express-200: #d1d7e6;
  --color-midnight-express-300: #bac1d2;
  --color-midnight-express-400: #989fb2;
  --color-midnight-express-500: #7b8294;
  --color-midnight-express-600: #5f6677;
  --color-midnight-express-700: #484e5d;
  --color-midnight-express-800: #353a46;
  --color-midnight-express-900: #232938;
  --color-midnight-express-950: #15181f;
  --color-h-jicha: #41523c;
  --color-h-jicha-50: #eef9ea;
  --color-h-jicha-100: #e3f0df;
  --color-h-jicha-200: #ccdbc7;
  --color-h-jicha-300: #b2c3ad;
  --color-h-jicha-400: #90a38b;
  --color-h-jicha-500: #74866e;
  --color-h-jicha-600: #596a54;
  --color-h-jicha-700: #41523c;
  --color-h-jicha-800: #33402f;
  --color-h-jicha-900: #263123;
  --color-h-jicha-950: #161e14;
  --color-cactus: #5c7559;
  --color-cactus-50: #ebfae9;
  --color-cactus-100: #e0f1de;
  --color-cactus-200: #cadfc8;
  --color-cactus-300: #b2c9af;
  --color-cactus-400: #91ab8e;
  --color-cactus-500: #769073;
  --color-cactus-600: #5c7559;
  --color-cactus-700: #475d44;
  --color-cactus-800: #364933;
  --color-cactus-900: #283926;
  --color-cactus-950: #172316;
  --color-cashmere-clay: #c99f95;
  --color-cashmere-clay-50: #fff6f4;
  --color-cashmere-clay-100: #ffebe6;
  --color-cashmere-clay-200: #f5d6ce;
  --color-cashmere-clay-300: #e3bfb7;
  --color-cashmere-clay-400: #c99f95;
  --color-cashmere-clay-500: #aa8279;
  --color-cashmere-clay-600: #8d675d;
  --color-cashmere-clay-700: #724f47;
  --color-cashmere-clay-800: #5a3c35;
  --color-cashmere-clay-900: #462d27;
  --color-cashmere-clay-950: #2c1a16;
  --color-strawberry-risotto: #ecc8bf;
  --color-strawberry-risotto-50: #ffece8;
  --color-strawberry-risotto-100: #f8e0da;
  --color-strawberry-risotto-200: #ecc8bf;
  --color-strawberry-risotto-300: #d3b4ac;
  --color-strawberry-risotto-400: #b6958d;
  --color-strawberry-risotto-500: #9b7b72;
  --color-strawberry-risotto-600: #80625a;
  --color-strawberry-risotto-700: #684d46;
  --color-strawberry-risotto-800: #543c36;
  --color-strawberry-risotto-900: #422d28;
  --color-strawberry-risotto-950: #2a1b17;
}