Freeze Up to Noir Mystique Color Palette

About this palette

Freeze Up to Noir Mystique is a 5-color muted, gradient palette: #DEE7F7 (Freeze Up), #8ABFC3 (Riverbed), #8D7875 (Moon Rock), #604D49 (Lynx), #1E1A11 (Noir Mystique). It mixes gray, turquoise, black tones and feels cool overall. The strongest text pairing is #DEE7F7 on #1E1A11 with a contrast ratio of 13.94:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Freeze Up	rgb(222, 231, 247)	hsl(218, 61%, 92%)
Riverbed	rgb(138, 191, 195)	hsl(184, 32%, 65%)
Moon Rock	rgb(141, 120, 117)	hsl(8, 10%, 51%)
Lynx	rgb(96, 77, 73)	hsl(10, 14%, 33%)
Noir Mystique	rgb(30, 26, 17)	hsl(42, 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.

Aa13.94:1 Super#DEE7F7 on #1E1A11
Aa13.94:1 Super#1E1A11 on #DEE7F7
Aa8.52:1 Very good#8ABFC3 on #1E1A11
Aa8.52:1 Very good#1E1A11 on #8ABFC3
Aa6.36:1 Good#DEE7F7 on #604D49
Aa6.36:1 Good#604D49 on #DEE7F7
Aa4.19:1 Poor#8D7875 on #1E1A11
Aa4.19:1 Poor#1E1A11 on #8D7875

Color blindness preview

CSS variables

/* Freeze Up to Noir Mystique — https://swatchly.xyz/palette/dee7f7-8abfc3-8d7875-604d49-1e1a11 */
:root {
  --freeze-up: #dee7f7;
  --riverbed: #8abfc3;
  --moon-rock: #8d7875;
  --lynx: #604d49;
  --noir-mystique: #1e1a11;
}

Tailwind CSS v4

/* Freeze Up to Noir Mystique — https://swatchly.xyz/palette/dee7f7-8abfc3-8d7875-604d49-1e1a11 */
@theme {
  --color-freeze-up: #dee7f7;
  --color-freeze-up-50: #ecf1fb;
  --color-freeze-up-100: #dee7f7;
  --color-freeze-up-200: #cdd4e0;
  --color-freeze-up-300: #b7becc;
  --color-freeze-up-400: #98a0ae;
  --color-freeze-up-500: #7d8594;
  --color-freeze-up-600: #646b79;
  --color-freeze-up-700: #4f5662;
  --color-freeze-up-800: #3d434d;
  --color-freeze-up-900: #2e333c;
  --color-freeze-up-950: #1c1f26;
  --color-riverbed: #8abfc3;
  --color-riverbed-50: #d6f5f8;
  --color-riverbed-100: #c6eaed;
  --color-riverbed-200: #abd6d9;
  --color-riverbed-300: #8abfc3;
  --color-riverbed-400: #6ea1a5;
  --color-riverbed-500: #55888c;
  --color-riverbed-600: #3e6f73;
  --color-riverbed-700: #2c5a5d;
  --color-riverbed-800: #1f484b;
  --color-riverbed-900: #15393c;
  --color-riverbed-950: #0a2426;
  --color-moon-rock: #8d7875;
  --color-moon-rock-50: #fef0ee;
  --color-moon-rock-100: #f3e4e2;
  --color-moon-rock-200: #e0cecb;
  --color-moon-rock-300: #cab6b3;
  --color-moon-rock-400: #aa9491;
  --color-moon-rock-500: #8d7875;
  --color-moon-rock-600: #73605d;
  --color-moon-rock-700: #5d4b49;
  --color-moon-rock-800: #4a3a38;
  --color-moon-rock-900: #3a2d2b;
  --color-moon-rock-950: #251c1a;
  --color-lynx: #604d49;
  --color-lynx-50: #fff2ef;
  --color-lynx-100: #f6e7e4;
  --color-lynx-200: #e4d2cf;
  --color-lynx-300: #cebbb7;
  --color-lynx-400: #af9a96;
  --color-lynx-500: #937e7a;
  --color-lynx-600: #776460;
  --color-lynx-700: #604d49;
  --color-lynx-800: #4b3c39;
  --color-lynx-900: #3a2d2b;
  --color-lynx-950: #241b1a;
  --color-noir-mystique: #1e1a11;
  --color-noir-mystique-50: #f8f5ee;
  --color-noir-mystique-100: #eeebe3;
  --color-noir-mystique-200: #dbd7ce;
  --color-noir-mystique-300: #c5c0b6;
  --color-noir-mystique-400: #a6a196;
  --color-noir-mystique-500: #8a8579;
  --color-noir-mystique-600: #6e695f;
  --color-noir-mystique-700: #565248;
  --color-noir-mystique-800: #423e36;
  --color-noir-mystique-900: #312e27;
  --color-noir-mystique-950: #1e1a11;
}