Frozen Periwinkle to Noir Mystique color palette

CACBF1Frozen Periwinkle A0A574Willow Leaf 7E7A95Your Shadow 625E33Reptile Revenge 46475CGun Powder 1E1C11Noir Mystique

Open in generator Export PNG, PDF, ASE…

About this palette

Frozen Periwinkle to Noir Mystique is a 6-color muted palette: #CACBF1 (Frozen Periwinkle), #A0A574 (Willow Leaf), #7E7A95 (Your Shadow), #625E33 (Reptile Revenge), #46475C (Gun Powder), #1E1C11 (Noir Mystique). It mixes purple, green, brown, gray tones and feels cool overall. The strongest text pairing is #CACBF1 on #1E1C11 with a contrast ratio of 10.84:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frozen Periwinkle	rgb(202, 203, 241)	hsl(238, 58%, 87%)
Willow Leaf	rgb(160, 165, 116)	hsl(66, 21%, 55%)
Your Shadow	rgb(126, 122, 149)	hsl(249, 11%, 53%)
Reptile Revenge	rgb(98, 94, 51)	hsl(55, 32%, 29%)
Gun Powder	rgb(70, 71, 92)	hsl(237, 14%, 32%)
Noir Mystique	rgb(30, 28, 17)	hsl(51, 28%, 9%)

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.

Aa10.84:1 Very good#CACBF1 on #1E1C11
Aa10.84:1 Very good#1E1C11 on #CACBF1
Aa6.61:1 Good#A0A574 on #1E1C11
Aa6.61:1 Good#1E1C11 on #A0A574
Aa5.75:1 Good#CACBF1 on #46475C
Aa5.75:1 Good#46475C on #CACBF1
Aa4.21:1 Poor#CACBF1 on #625E33
Aa4.21:1 Poor#625E33 on #CACBF1

Color blindness preview

CSS variables

/* Frozen Periwinkle to Noir Mystique — https://swatchly.xyz/palette/cacbf1-a0a574-7e7a95-625e33-46475c-1e1c11 */
:root {
  --frozen-periwinkle: #cacbf1;
  --willow-leaf: #a0a574;
  --your-shadow: #7e7a95;
  --reptile-revenge: #625e33;
  --gun-powder: #46475c;
  --noir-mystique: #1e1c11;
}

Tailwind CSS v4

/* Frozen Periwinkle to Noir Mystique — https://swatchly.xyz/palette/cacbf1-a0a574-7e7a95-625e33-46475c-1e1c11 */
@theme {
  --color-frozen-periwinkle: #cacbf1;
  --color-frozen-periwinkle-50: #edeeff;
  --color-frozen-periwinkle-100: #e0e1fb;
  --color-frozen-periwinkle-200: #cacbf1;
  --color-frozen-periwinkle-300: #b6b7d7;
  --color-frozen-periwinkle-400: #9898bb;
  --color-frozen-periwinkle-500: #7e7ea1;
  --color-frozen-periwinkle-600: #656686;
  --color-frozen-periwinkle-700: #50516e;
  --color-frozen-periwinkle-800: #3f3f59;
  --color-frozen-periwinkle-900: #303046;
  --color-frozen-periwinkle-950: #1d1d2d;
  --color-willow-leaf: #a0a574;
  --color-willow-leaf-50: #f4f8dc;
  --color-willow-leaf-100: #eaeece;
  --color-willow-leaf-200: #d6dbb5;
  --color-willow-leaf-300: #bfc499;
  --color-willow-leaf-400: #a0a574;
  --color-willow-leaf-500: #858a5a;
  --color-willow-leaf-600: #6b6f41;
  --color-willow-leaf-700: #55582e;
  --color-willow-leaf-800: #424520;
  --color-willow-leaf-900: #333515;
  --color-willow-leaf-950: #1f210a;
  --color-your-shadow: #7e7a95;
  --color-your-shadow-50: #f3f2ff;
  --color-your-shadow-100: #e8e5f9;
  --color-your-shadow-200: #d3d0e7;
  --color-your-shadow-300: #bbb7d1;
  --color-your-shadow-400: #9a96b2;
  --color-your-shadow-500: #7e7a95;
  --color-your-shadow-600: #65617b;
  --color-your-shadow-700: #504d63;
  --color-your-shadow-800: #3f3c4f;
  --color-your-shadow-900: #312e3f;
  --color-your-shadow-950: #1e1c28;
  --color-reptile-revenge: #625e33;
  --color-reptile-revenge-50: #f9f7dd;
  --color-reptile-revenge-100: #efedd0;
  --color-reptile-revenge-200: #dddbb9;
  --color-reptile-revenge-300: #c9c69f;
  --color-reptile-revenge-400: #aba87d;
  --color-reptile-revenge-500: #918d61;
  --color-reptile-revenge-600: #787449;
  --color-reptile-revenge-700: #625e33;
  --color-reptile-revenge-800: #4d4925;
  --color-reptile-revenge-900: #3b3819;
  --color-reptile-revenge-950: #25230c;
  --color-gun-powder: #46475c;
  --color-gun-powder-50: #f3f4ff;
  --color-gun-powder-100: #e9eafa;
  --color-gun-powder-200: #d4d6e9;
  --color-gun-powder-300: #bfc0d6;
  --color-gun-powder-400: #a0a2b9;
  --color-gun-powder-500: #86889f;
  --color-gun-powder-600: #6d6f85;
  --color-gun-powder-700: #58596e;
  --color-gun-powder-800: #46475c;
  --color-gun-powder-900: #363746;
  --color-gun-powder-950: #22222e;
  --color-noir-mystique: #1e1c11;
  --color-noir-mystique-50: #f7f5ed;
  --color-noir-mystique-100: #edebe2;
  --color-noir-mystique-200: #dad8cd;
  --color-noir-mystique-300: #c3c1b5;
  --color-noir-mystique-400: #a4a294;
  --color-noir-mystique-500: #888678;
  --color-noir-mystique-600: #6d6b5e;
  --color-noir-mystique-700: #565448;
  --color-noir-mystique-800: #424036;
  --color-noir-mystique-900: #313028;
  --color-noir-mystique-950: #1e1c11;
}