Monet Magic to Nocturne color palette

C3B0C4Monet Magic CFBE99Crepe 72A5B8Serene Sea 7D744FGreek Oregano 64465BGrape Fizz 324A53Nocturne

Open in generator Export PNG, PDF, ASE…

About this palette

Monet Magic to Nocturne is a 6-color muted, vintage palette: #C3B0C4 (Monet Magic), #CFBE99 (Crepe), #72A5B8 (Serene Sea), #7D744F (Greek Oregano), #64465B (Grape Fizz), #324A53 (Nocturne). It mixes pink, yellow, blue, purple, gray tones and feels warm overall. The strongest text pairing is #CFBE99 on #324A53 with a contrast ratio of 5.12:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Monet Magic	rgb(195, 176, 196)	hsl(297, 14%, 73%)
Crepe	rgb(207, 190, 153)	hsl(41, 36%, 71%)
Serene Sea	rgb(114, 165, 184)	hsl(196, 33%, 58%)
Greek Oregano	rgb(125, 116, 79)	hsl(48, 23%, 40%)
Grape Fizz	rgb(100, 70, 91)	hsl(318, 18%, 33%)
Nocturne	rgb(50, 74, 83)	hsl(196, 25%, 26%)

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.

Aa5.12:1 Good#CFBE99 on #324A53
Aa5.12:1 Good#324A53 on #CFBE99
Aa4.61:1 Good#C3B0C4 on #324A53
Aa4.61:1 Good#324A53 on #C3B0C4
Aa4.47:1 Poor#CFBE99 on #64465B
Aa4.47:1 Poor#64465B on #CFBE99
Aa4.02:1 Poor#C3B0C4 on #64465B
Aa4.02:1 Poor#64465B on #C3B0C4

Color blindness preview

CSS variables

/* Monet Magic to Nocturne — https://swatchly.xyz/palette/c3b0c4-cfbe99-72a5b8-7d744f-64465b-324a53 */
:root {
  --monet-magic: #c3b0c4;
  --crepe: #cfbe99;
  --serene-sea: #72a5b8;
  --greek-oregano: #7d744f;
  --grape-fizz: #64465b;
  --nocturne: #324a53;
}

Tailwind CSS v4

/* Monet Magic to Nocturne — https://swatchly.xyz/palette/c3b0c4-cfbe99-72a5b8-7d744f-64465b-324a53 */
@theme {
  --color-monet-magic: #c3b0c4;
  --color-monet-magic-50: #f7ecf8;
  --color-monet-magic-100: #ede0ed;
  --color-monet-magic-200: #d9c9da;
  --color-monet-magic-300: #c3b0c4;
  --color-monet-magic-400: #a593a6;
  --color-monet-magic-500: #8b798c;
  --color-monet-magic-600: #726173;
  --color-monet-magic-700: #5c4d5d;
  --color-monet-magic-800: #493c4a;
  --color-monet-magic-900: #3a2e3a;
  --color-monet-magic-950: #241c25;
  --color-crepe: #cfbe99;
  --color-crepe-50: #fdf4df;
  --color-crepe-100: #f4e9d2;
  --color-crepe-200: #e2d5b9;
  --color-crepe-300: #cfbe99;
  --color-crepe-400: #af9f7c;
  --color-crepe-500: #948461;
  --color-crepe-600: #796948;
  --color-crepe-700: #615334;
  --color-crepe-800: #4d4126;
  --color-crepe-900: #3c311a;
  --color-crepe-950: #261e0e;
  --color-serene-sea: #72a5b8;
  --color-serene-sea-50: #e3f7ff;
  --color-serene-sea-100: #ceeffc;
  --color-serene-sea-200: #b4dbea;
  --color-serene-sea-300: #98c5d6;
  --color-serene-sea-400: #72a5b8;
  --color-serene-sea-500: #588a9d;
  --color-serene-sea-600: #407082;
  --color-serene-sea-700: #2d5a69;
  --color-serene-sea-800: #1f4754;
  --color-serene-sea-900: #143743;
  --color-serene-sea-950: #09232b;
  --color-greek-oregano: #7d744f;
  --color-greek-oregano-50: #fbf6df;
  --color-greek-oregano-100: #f3edd5;
  --color-greek-oregano-200: #e2dbbe;
  --color-greek-oregano-300: #cec6a5;
  --color-greek-oregano-400: #b0a883;
  --color-greek-oregano-500: #978d68;
  --color-greek-oregano-600: #7d744f;
  --color-greek-oregano-700: #645c3a;
  --color-greek-oregano-800: #4f4729;
  --color-greek-oregano-900: #3d361d;
  --color-greek-oregano-950: #26210f;
  --color-grape-fizz: #64465b;
  --color-grape-fizz-50: #fff0fa;
  --color-grape-fizz-100: #fae3f3;
  --color-grape-fizz-200: #e9cde0;
  --color-grape-fizz-300: #d3b5c9;
  --color-grape-fizz-400: #b594aa;
  --color-grape-fizz-500: #98778e;
  --color-grape-fizz-600: #7c5d72;
  --color-grape-fizz-700: #64465b;
  --color-grape-fizz-800: #4e3647;
  --color-grape-fizz-900: #3d2937;
  --color-grape-fizz-950: #261822;
  --color-nocturne: #324a53;
  --color-nocturne-50: #e9f8fe;
  --color-nocturne-100: #ddeff5;
  --color-nocturne-200: #c7dbe3;
  --color-nocturne-300: #afc6cf;
  --color-nocturne-400: #8ea8b2;
  --color-nocturne-500: #738d97;
  --color-nocturne-600: #5a737c;
  --color-nocturne-700: #465c65;
  --color-nocturne-800: #324a53;
  --color-nocturne-900: #27393f;
  --color-nocturne-950: #172428;
}