Opal Green to Cosmic Green color palette

0A7D5BOpal Green 2E5C47Herbes de Provence C3F1D5Mystery Mint 113828Pitch-Black Forests 78C0A4Celadon Porcelain 2FA773Cosmic Green

Open in generator Export PNG, PDF, ASE…

About this palette

Opal Green to Cosmic Green is a 6-color cool, earthy, monochromatic palette: #0A7D5B (Opal Green), #2E5C47 (Herbes de Provence), #C3F1D5 (Mystery Mint), #113828 (Pitch-Black Forests), #78C0A4 (Celadon Porcelain), #2FA773 (Cosmic Green). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #C3F1D5 on #113828 with a contrast ratio of 10.41:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Opal Green	rgb(10, 125, 91)	hsl(162, 85%, 26%)
Herbes de Provence	rgb(46, 92, 71)	hsl(153, 33%, 27%)
Mystery Mint	rgb(195, 241, 213)	hsl(143, 62%, 85%)
Pitch-Black Forests	rgb(17, 56, 40)	hsl(155, 53%, 14%)
Celadon Porcelain	rgb(120, 192, 164)	hsl(157, 36%, 61%)
Cosmic Green	rgb(47, 167, 115)	hsl(154, 56%, 42%)

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.41:1 Very good#C3F1D5 on #113828
Aa10.41:1 Very good#113828 on #C3F1D5
Aa6.16:1 Good#2E5C47 on #C3F1D5
Aa6.16:1 Good#C3F1D5 on #2E5C47
Aa6.09:1 Good#113828 on #78C0A4
Aa6.09:1 Good#78C0A4 on #113828
Aa4.26:1 Poor#113828 on #2FA773
Aa4.26:1 Poor#2FA773 on #113828

Color blindness preview

CSS variables

/* Opal Green to Cosmic Green — https://swatchly.xyz/palette/0a7d5b-2e5c47-c3f1d5-113828-78c0a4-2fa773 */
:root {
  --opal-green: #0a7d5b;
  --herbes-de-provence: #2e5c47;
  --mystery-mint: #c3f1d5;
  --pitch-black-forests: #113828;
  --celadon-porcelain: #78c0a4;
  --cosmic-green: #2fa773;
}

Tailwind CSS v4

/* Opal Green to Cosmic Green — https://swatchly.xyz/palette/0a7d5b-2e5c47-c3f1d5-113828-78c0a4-2fa773 */
@theme {
  --color-opal-green: #0a7d5b;
  --color-opal-green-50: #dbffee;
  --color-opal-green-100: #c2fae0;
  --color-opal-green-200: #a4e8ca;
  --color-opal-green-300: #84d3b2;
  --color-opal-green-400: #5ab591;
  --color-opal-green-500: #369975;
  --color-opal-green-600: #0a7d5b;
  --color-opal-green-700: #006447;
  --color-opal-green-800: #004e37;
  --color-opal-green-900: #003c2a;
  --color-opal-green-950: #002619;
  --color-herbes-de-provence: #2e5c47;
  --color-herbes-de-provence-50: #e2fdee;
  --color-herbes-de-provence-100: #d5f4e4;
  --color-herbes-de-provence-200: #bce1ce;
  --color-herbes-de-provence-300: #a1cbb5;
  --color-herbes-de-provence-400: #7dab94;
  --color-herbes-de-provence-500: #608f78;
  --color-herbes-de-provence-600: #46735e;
  --color-herbes-de-provence-700: #2e5c47;
  --color-herbes-de-provence-800: #244837;
  --color-herbes-de-provence-900: #19372a;
  --color-herbes-de-provence-950: #0d2319;
  --color-mystery-mint: #c3f1d5;
  --color-mystery-mint-50: #dcf7e6;
  --color-mystery-mint-100: #c3f1d5;
  --color-mystery-mint-200: #b9dcc6;
  --color-mystery-mint-300: #a0c7b0;
  --color-mystery-mint-400: #80aa91;
  --color-mystery-mint-500: #658f76;
  --color-mystery-mint-600: #4c755e;
  --color-mystery-mint-700: #395f49;
  --color-mystery-mint-800: #294b38;
  --color-mystery-mint-900: #1d3a2a;
  --color-mystery-mint-950: #102419;
  --color-pitch-black-forests: #113828;
  --color-pitch-black-forests-50: #e5fcf0;
  --color-pitch-black-forests-100: #d8f3e5;
  --color-pitch-black-forests-200: #c1e0d0;
  --color-pitch-black-forests-300: #a7cbb9;
  --color-pitch-black-forests-400: #84ab98;
  --color-pitch-black-forests-500: #688f7c;
  --color-pitch-black-forests-600: #4e7462;
  --color-pitch-black-forests-700: #395c4b;
  --color-pitch-black-forests-800: #294739;
  --color-pitch-black-forests-900: #113828;
  --color-pitch-black-forests-950: #0f2119;
  --color-celadon-porcelain: #78c0a4;
  --color-celadon-porcelain-50: #ecfff7;
  --color-celadon-porcelain-100: #d5fdec;
  --color-celadon-porcelain-200: #bdeed9;
  --color-celadon-porcelain-300: #a2dbc3;
  --color-celadon-porcelain-400: #78c0a4;
  --color-celadon-porcelain-500: #5aa187;
  --color-celadon-porcelain-600: #3c846a;
  --color-celadon-porcelain-700: #246952;
  --color-celadon-porcelain-800: #12523e;
  --color-celadon-porcelain-900: #063f2e;
  --color-celadon-porcelain-950: #01261b;
  --color-cosmic-green: #2fa773;
  --color-cosmic-green-50: #e3ffee;
  --color-cosmic-green-100: #c2ffdd;
  --color-cosmic-green-200: #a5f0c7;
  --color-cosmic-green-300: #85ddaf;
  --color-cosmic-green-400: #59c18e;
  --color-cosmic-green-500: #2fa773;
  --color-cosmic-green-600: #008959;
  --color-cosmic-green-700: #006c45;
  --color-cosmic-green-800: #005435;
  --color-cosmic-green-900: #004128;
  --color-cosmic-green-950: #002817;
}