Vaporised to Beige and Sage color palette

C8F1F7Vaporised 18181FViolet Void 254B4BMysterious Waters 927574Moon Rock C1C59BBeige and Sage

About this palette

Vaporised to Beige and Sage is a 5-color muted palette: #C8F1F7 (Vaporised), #18181F (Violet Void), #254B4B (Mysterious Waters), #927574 (Moon Rock), #C1C59B (Beige and Sage). It mixes turquoise, black, red, green tones and feels balanced overall. The strongest text pairing is #C8F1F7 on #18181F with a contrast ratio of 14.61:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vaporised	rgb(200, 241, 247)	hsl(188, 75%, 88%)
Violet Void	rgb(24, 24, 31)	hsl(240, 13%, 11%)
Mysterious Waters	rgb(37, 75, 75)	hsl(180, 34%, 22%)
Moon Rock	rgb(146, 117, 116)	hsl(2, 12%, 51%)
Beige and Sage	rgb(193, 197, 155)	hsl(66, 27%, 69%)

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.

Aa14.61:1 Super#C8F1F7 on #18181F
Aa14.61:1 Super#18181F on #C8F1F7
Aa9.86:1 Very good#18181F on #C1C59B
Aa9.86:1 Very good#C1C59B on #18181F
Aa7.95:1 Very good#C8F1F7 on #254B4B
Aa7.95:1 Very good#254B4B on #C8F1F7
Aa5.36:1 Good#254B4B on #C1C59B
Aa5.36:1 Good#C1C59B on #254B4B

Color blindness preview

CSS variables

/* Vaporised to Beige and Sage — https://swatchly.xyz/palette/c8f1f7-18181f-254b4b-927574-c1c59b */
:root {
  --vaporised: #c8f1f7;
  --violet-void: #18181f;
  --mysterious-waters: #254b4b;
  --moon-rock: #927574;
  --beige-and-sage: #c1c59b;
}

Tailwind CSS v4

/* Vaporised to Beige and Sage — https://swatchly.xyz/palette/c8f1f7-18181f-254b4b-927574-c1c59b */
@theme {
  --color-vaporised: #c8f1f7;
  --color-vaporised-50: #e1f8fb;
  --color-vaporised-100: #c8f1f7;
  --color-vaporised-200: #bddce0;
  --color-vaporised-300: #a4c6cb;
  --color-vaporised-400: #82a8ad;
  --color-vaporised-500: #678d93;
  --color-vaporised-600: #4e7378;
  --color-vaporised-700: #3a5c61;
  --color-vaporised-800: #2a484c;
  --color-vaporised-900: #1e383b;
  --color-vaporised-950: #102325;
  --color-violet-void: #18181f;
  --color-violet-void-50: #f4f4fa;
  --color-violet-void-100: #eaeaf1;
  --color-violet-void-200: #d6d7de;
  --color-violet-void-300: #c0c0c8;
  --color-violet-void-400: #a0a0aa;
  --color-violet-void-500: #84848d;
  --color-violet-void-600: #686871;
  --color-violet-void-700: #505158;
  --color-violet-void-800: #3d3d43;
  --color-violet-void-900: #2c2c32;
  --color-violet-void-950: #18181f;
  --color-mysterious-waters: #254b4b;
  --color-mysterious-waters-50: #e4fbfa;
  --color-mysterious-waters-100: #d8f1f1;
  --color-mysterious-waters-200: #c0dfde;
  --color-mysterious-waters-300: #a6c9c9;
  --color-mysterious-waters-400: #84abaa;
  --color-mysterious-waters-500: #688f8f;
  --color-mysterious-waters-600: #4f7575;
  --color-mysterious-waters-700: #3b5e5d;
  --color-mysterious-waters-800: #254b4b;
  --color-mysterious-waters-900: #1f3939;
  --color-mysterious-waters-950: #112424;
  --color-moon-rock: #927574;
  --color-moon-rock-50: #ffefee;
  --color-moon-rock-100: #f7e2e1;
  --color-moon-rock-200: #e5cccb;
  --color-moon-rock-300: #cfb3b2;
  --color-moon-rock-400: #af9290;
  --color-moon-rock-500: #927574;
  --color-moon-rock-600: #785d5c;
  --color-moon-rock-700: #614948;
  --color-moon-rock-800: #4d3838;
  --color-moon-rock-900: #3d2b2b;
  --color-moon-rock-950: #271a1a;
  --color-beige-and-sage: #c1c59b;
  --color-beige-and-sage-50: #f5f8e0;
  --color-beige-and-sage-100: #ebeed3;
  --color-beige-and-sage-200: #d7dbbb;
  --color-beige-and-sage-300: #c1c59b;
  --color-beige-and-sage-400: #a2a57e;
  --color-beige-and-sage-500: #868a62;
  --color-beige-and-sage-600: #6c6f49;
  --color-beige-and-sage-700: #565836;
  --color-beige-and-sage-800: #434526;
  --color-beige-and-sage-900: #33351b;
  --color-beige-and-sage-950: #20210e;
}