Void Wellness Coach to OMGreen Color Palette

About this palette

Void Wellness Coach to OMGreen is a 4-color muted palette: #43373E (Void Wellness Coach), #D3EADD (Splashdown), #7A6472 (Opera), #90AA9C (OMGreen). It mixes gray, green tones and feels cool overall. The strongest text pairing is #43373E on #D3EADD with a contrast ratio of 8.94:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Void Wellness Coach	rgb(67, 55, 62)	hsl(325, 10%, 24%)
Splashdown	rgb(211, 234, 221)	hsl(146, 35%, 87%)
Opera	rgb(122, 100, 114)	hsl(322, 10%, 44%)
OMGreen	rgb(144, 170, 156)	hsl(148, 13%, 62%)

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.

Aa8.94:1 Very good#43373E on #D3EADD
Aa8.94:1 Very good#D3EADD on #43373E
Aa4.54:1 Good#43373E on #90AA9C
Aa4.54:1 Good#90AA9C on #43373E
Aa4.26:1 Poor#D3EADD on #7A6472
Aa4.26:1 Poor#7A6472 on #D3EADD

Color blindness preview

CSS variables

/* Void Wellness Coach to OMGreen — https://swatchly.xyz/palette/43373e-d3eadd-7a6472-90aa9c */
:root {
  --void-wellness-coach: #43373e;
  --splashdown: #d3eadd;
  --opera: #7a6472;
  --omgreen: #90aa9c;
}

Tailwind CSS v4

/* Void Wellness Coach to OMGreen — https://swatchly.xyz/palette/43373e-d3eadd-7a6472-90aa9c */
@theme {
  --color-void-wellness-coach: #43373e;
  --color-void-wellness-coach-50: #fbf2f7;
  --color-void-wellness-coach-100: #f2e8ed;
  --color-void-wellness-coach-200: #dfd4da;
  --color-void-wellness-coach-300: #c8bbc2;
  --color-void-wellness-coach-400: #a89aa2;
  --color-void-wellness-coach-500: #8b7d85;
  --color-void-wellness-coach-600: #6f626a;
  --color-void-wellness-coach-700: #564b52;
  --color-void-wellness-coach-800: #43373e;
  --color-void-wellness-coach-900: #322a2f;
  --color-void-wellness-coach-950: #1f191c;
  --color-splashdown: #d3eadd;
  --color-splashdown-50: #e5f3eb;
  --color-splashdown-100: #d3eadd;
  --color-splashdown-200: #c5d6cc;
  --color-splashdown-300: #aec1b6;
  --color-splashdown-400: #8fa498;
  --color-splashdown-500: #758a7e;
  --color-splashdown-600: #5c7065;
  --color-splashdown-700: #485a50;
  --color-splashdown-800: #37473e;
  --color-splashdown-900: #29362f;
  --color-splashdown-950: #18221d;
  --color-opera: #7a6472;
  --color-opera-50: #fff0f9;
  --color-opera-100: #f6e6f0;
  --color-opera-200: #e4d1dd;
  --color-opera-300: #cfbac7;
  --color-opera-400: #b09aa8;
  --color-opera-500: #957e8d;
  --color-opera-600: #7a6472;
  --color-opera-700: #624e5b;
  --color-opera-800: #4d3c47;
  --color-opera-900: #3c2e37;
  --color-opera-950: #261c22;
  --color-omgreen: #90aa9c;
  --color-omgreen-50: #ebfaf2;
  --color-omgreen-100: #e0f1e7;
  --color-omgreen-200: #caded3;
  --color-omgreen-300: #b2c8bc;
  --color-omgreen-400: #90aa9c;
  --color-omgreen-500: #758e81;
  --color-omgreen-600: #5b7366;
  --color-omgreen-700: #465c50;
  --color-omgreen-800: #35483e;
  --color-omgreen-900: #27372f;
  --color-omgreen-950: #17221c;
}