Foggy Plum to Glimpse Into Space Color Palette

About this palette

Foggy Plum to Glimpse Into Space is a 5-color muted palette: #C0A1A3 (Foggy Plum), #796164 (Reading Tea Leaves), #434E5B (Abyssal), #C5D6B7 (Nature), #10140E (Glimpse Into Space). It mixes red, gray, green, black tones and feels balanced overall. The strongest text pairing is #C5D6B7 on #10140E with a contrast ratio of 12.12:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Foggy Plum	rgb(192, 161, 163)	hsl(356, 20%, 69%)
Reading Tea Leaves	rgb(121, 97, 100)	hsl(352, 11%, 43%)
Abyssal	rgb(67, 78, 91)	hsl(212, 15%, 31%)
Nature	rgb(197, 214, 183)	hsl(93, 27%, 78%)
Glimpse Into Space	rgb(16, 20, 14)	hsl(100, 18%, 7%)

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.

Aa12.12:1 Super#C5D6B7 on #10140E
Aa12.12:1 Super#10140E on #C5D6B7
Aa7.86:1 Very good#C0A1A3 on #10140E
Aa7.86:1 Very good#10140E on #C0A1A3
Aa5.52:1 Good#434E5B on #C5D6B7
Aa5.52:1 Good#C5D6B7 on #434E5B
Aa3.69:1 Poor#796164 on #C5D6B7
Aa3.69:1 Poor#C5D6B7 on #796164

Color blindness preview

CSS variables

/* Foggy Plum to Glimpse Into Space — https://swatchly.xyz/palette/c0a1a3-796164-434e5b-c5d6b7-10140e */
:root {
  --foggy-plum: #c0a1a3;
  --reading-tea-leaves: #796164;
  --abyssal: #434e5b;
  --nature: #c5d6b7;
  --glimpse-into-space: #10140e;
}

Tailwind CSS v4

/* Foggy Plum to Glimpse Into Space — https://swatchly.xyz/palette/c0a1a3-796164-434e5b-c5d6b7-10140e */
@theme {
  --color-foggy-plum: #c0a1a3;
  --color-foggy-plum-50: #fff5f6;
  --color-foggy-plum-100: #feeaeb;
  --color-foggy-plum-200: #eed7d8;
  --color-foggy-plum-300: #dbc1c2;
  --color-foggy-plum-400: #c0a1a3;
  --color-foggy-plum-500: #a28486;
  --color-foggy-plum-600: #85696b;
  --color-foggy-plum-700: #6b5153;
  --color-foggy-plum-800: #543e40;
  --color-foggy-plum-900: #412e30;
  --color-foggy-plum-950: #281b1c;
  --color-reading-tea-leaves: #796164;
  --color-reading-tea-leaves-50: #fff1f3;
  --color-reading-tea-leaves-100: #f7e5e7;
  --color-reading-tea-leaves-200: #e5d0d2;
  --color-reading-tea-leaves-300: #d0b8bb;
  --color-reading-tea-leaves-400: #b1989b;
  --color-reading-tea-leaves-500: #957c7f;
  --color-reading-tea-leaves-600: #796164;
  --color-reading-tea-leaves-700: #614c4f;
  --color-reading-tea-leaves-800: #4d3b3d;
  --color-reading-tea-leaves-900: #3c2d2f;
  --color-reading-tea-leaves-950: #261b1c;
  --color-abyssal: #434e5b;
  --color-abyssal-50: #eff6ff;
  --color-abyssal-100: #e4ecf6;
  --color-abyssal-200: #cdd7e3;
  --color-abyssal-300: #b4bfcc;
  --color-abyssal-400: #929eac;
  --color-abyssal-500: #758190;
  --color-abyssal-600: #5b6673;
  --color-abyssal-700: #434e5b;
  --color-abyssal-800: #343d46;
  --color-abyssal-900: #272e37;
  --color-abyssal-950: #171c22;
  --color-nature: #c5d6b7;
  --color-nature-50: #e9f4e1;
  --color-nature-100: #dde9d4;
  --color-nature-200: #c5d6b7;
  --color-nature-300: #b1c0a5;
  --color-nature-400: #93a286;
  --color-nature-500: #79886c;
  --color-nature-600: #606f54;
  --color-nature-700: #4c5941;
  --color-nature-800: #3b4731;
  --color-nature-900: #2d3724;
  --color-nature-950: #1b2215;
  --color-glimpse-into-space: #10140e;
  --color-glimpse-into-space-50: #f3f6f1;
  --color-glimpse-into-space-100: #e9ece7;
  --color-glimpse-into-space-200: #d5d9d2;
  --color-glimpse-into-space-300: #bec3bb;
  --color-glimpse-into-space-400: #9ea39b;
  --color-glimpse-into-space-500: #80857d;
  --color-glimpse-into-space-600: #636861;
  --color-glimpse-into-space-700: #4b4f49;
  --color-glimpse-into-space-800: #363a35;
  --color-glimpse-into-space-900: #252824;
  --color-glimpse-into-space-950: #10140e;
}