Noir Mystique to Matt White color palette

1F1A00Noir Mystique 005F3DFicus Elastica 7E6200Alligator 8F9A38Chorus of Frogs 8BD18CBotanist F5FFCDMatt White

Open in generator Export PNG, PDF, ASE…

About this palette

Noir Mystique to Matt White is a 6-color cool, earthy, gradient palette: #1F1A00 (Noir Mystique), #005F3D (Ficus Elastica), #7E6200 (Alligator), #8F9A38 (Chorus of Frogs), #8BD18C (Botanist), #F5FFCD (Matt White). It mixes brown, green tones and feels cool overall. The strongest text pairing is #1F1A00 on #F5FFCD with a contrast ratio of 16.64:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Noir Mystique	rgb(31, 26, 0)	hsl(50, 100%, 6%)
Ficus Elastica	rgb(0, 95, 61)	hsl(159, 100%, 19%)
Alligator	rgb(126, 98, 0)	hsl(47, 100%, 25%)
Chorus of Frogs	rgb(143, 154, 56)	hsl(67, 47%, 41%)
Botanist	rgb(139, 209, 140)	hsl(121, 43%, 68%)
Matt White	rgb(245, 255, 205)	hsl(72, 100%, 90%)

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.

Aa16.64:1 Super#1F1A00 on #F5FFCD
Aa16.64:1 Super#F5FFCD on #1F1A00
Aa9.62:1 Very good#1F1A00 on #8BD18C
Aa9.62:1 Very good#8BD18C on #1F1A00
Aa7.42:1 Very good#005F3D on #F5FFCD
Aa7.42:1 Very good#F5FFCD on #005F3D
Aa5.68:1 Good#1F1A00 on #8F9A38
Aa5.68:1 Good#8F9A38 on #1F1A00

Color blindness preview

CSS variables

/* Noir Mystique to Matt White — https://swatchly.xyz/palette/1f1a00-005f3d-7e6200-8f9a38-8bd18c-f5ffcd */
:root {
  --noir-mystique: #1f1a00;
  --ficus-elastica: #005f3d;
  --alligator: #7e6200;
  --chorus-of-frogs: #8f9a38;
  --botanist: #8bd18c;
  --matt-white: #f5ffcd;
}

Tailwind CSS v4

/* Noir Mystique to Matt White — https://swatchly.xyz/palette/1f1a00-005f3d-7e6200-8f9a38-8bd18c-f5ffcd */
@theme {
  --color-noir-mystique: #1f1a00;
  --color-noir-mystique-50: #f9f6e3;
  --color-noir-mystique-100: #efecd7;
  --color-noir-mystique-200: #dcd8c0;
  --color-noir-mystique-300: #c6c2a6;
  --color-noir-mystique-400: #a8a384;
  --color-noir-mystique-500: #8b8667;
  --color-noir-mystique-600: #6f6a4d;
  --color-noir-mystique-700: #575338;
  --color-noir-mystique-800: #433f28;
  --color-noir-mystique-900: #322e1c;
  --color-noir-mystique-950: #1f1a00;
  --color-ficus-elastica: #005f3d;
  --color-ficus-elastica-50: #dcffeb;
  --color-ficus-elastica-100: #c9f8de;
  --color-ficus-elastica-200: #ade6c7;
  --color-ficus-elastica-300: #8ed0ad;
  --color-ficus-elastica-400: #67b08b;
  --color-ficus-elastica-500: #47946e;
  --color-ficus-elastica-600: #2b7754;
  --color-ficus-elastica-700: #005f3d;
  --color-ficus-elastica-800: #064a2f;
  --color-ficus-elastica-900: #003923;
  --color-ficus-elastica-950: #002414;
  --color-alligator: #7e6200;
  --color-alligator-50: #fff5da;
  --color-alligator-100: #fce9b9;
  --color-alligator-200: #ead39a;
  --color-alligator-300: #d5bb79;
  --color-alligator-400: #b79a4e;
  --color-alligator-500: #9a7d2c;
  --color-alligator-600: #7e6200;
  --color-alligator-700: #644d00;
  --color-alligator-800: #4f3c00;
  --color-alligator-900: #3d2e00;
  --color-alligator-950: #271c00;
  --color-chorus-of-frogs: #8f9a38;
  --color-chorus-of-frogs-50: #f5fdcb;
  --color-chorus-of-frogs-100: #edf6bf;
  --color-chorus-of-frogs-200: #dbe5a3;
  --color-chorus-of-frogs-300: #c6d185;
  --color-chorus-of-frogs-400: #a9b45b;
  --color-chorus-of-frogs-500: #8f9a38;
  --color-chorus-of-frogs-600: #737d12;
  --color-chorus-of-frogs-700: #5b6300;
  --color-chorus-of-frogs-800: #464d00;
  --color-chorus-of-frogs-900: #353a00;
  --color-chorus-of-frogs-950: #202400;
  --color-botanist: #8bd18c;
  --color-botanist-50: #d9ffd9;
  --color-botanist-100: #caf6c9;
  --color-botanist-200: #afe4af;
  --color-botanist-300: #8bd18c;
  --color-botanist-400: #6fb170;
  --color-botanist-500: #529654;
  --color-botanist-600: #397b3c;
  --color-botanist-700: #25632a;
  --color-botanist-800: #174f1c;
  --color-botanist-900: #0d3e12;
  --color-botanist-950: #052708;
  --color-matt-white: #f5ffcd;
  --color-matt-white-50: #f5ffcd;
  --color-matt-white-100: #ecf2d5;
  --color-matt-white-200: #d7debb;
  --color-matt-white-300: #c0c89f;
  --color-matt-white-400: #a0a87b;
  --color-matt-white-500: #848c5e;
  --color-matt-white-600: #697145;
  --color-matt-white-700: #535a32;
  --color-matt-white-800: #404623;
  --color-matt-white-900: #313618;
  --color-matt-white-950: #1e220c;
}