Opal to Forester Color Palette

About this palette

Opal to Forester is a 5-color cool, vintage palette: #ACDEDF (Opal), #351828 (Chocolate Kiss), #543A4A (Shadow Purple), #58813E (Shepherd’s Green), #98A983 (Forester). It mixes turquoise, red, green tones and feels cool overall. The strongest text pairing is #ACDEDF on #351828 with a contrast ratio of 10.87:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Opal	rgb(172, 222, 223)	hsl(181, 44%, 77%)
Chocolate Kiss	rgb(53, 24, 40)	hsl(327, 38%, 15%)
Shadow Purple	rgb(84, 58, 74)	hsl(323, 18%, 28%)
Shepherd’s Green	rgb(88, 129, 62)	hsl(97, 35%, 37%)
Forester	rgb(152, 169, 131)	hsl(87, 18%, 59%)

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.87:1 Very good#ACDEDF on #351828
Aa10.87:1 Very good#351828 on #ACDEDF
Aa6.86:1 Good#ACDEDF on #543A4A
Aa6.86:1 Good#543A4A on #ACDEDF
Aa6.35:1 Good#351828 on #98A983
Aa6.35:1 Good#98A983 on #351828
Aa4.01:1 Poor#543A4A on #98A983
Aa4.01:1 Poor#98A983 on #543A4A

Color blindness preview

CSS variables

/* Opal to Forester — https://swatchly.xyz/palette/acdedf-351828-543a4a-58813e-98a983 */
:root {
  --opal: #acdedf;
  --chocolate-kiss: #351828;
  --shadow-purple: #543a4a;
  --shepherd-s-green: #58813e;
  --forester: #98a983;
}

Tailwind CSS v4

/* Opal to Forester — https://swatchly.xyz/palette/acdedf-351828-543a4a-58813e-98a983 */
@theme {
  --color-opal: #acdedf;
  --color-opal-50: #dcf9f9;
  --color-opal-100: #cfefef;
  --color-opal-200: #acdedf;
  --color-opal-300: #9cc7c7;
  --color-opal-400: #7aa9aa;
  --color-opal-500: #5e8e8f;
  --color-opal-600: #467475;
  --color-opal-700: #325d5e;
  --color-opal-800: #244a4b;
  --color-opal-900: #18393a;
  --color-opal-950: #0c2424;
  --color-chocolate-kiss: #351828;
  --color-chocolate-kiss-50: #fff1f7;
  --color-chocolate-kiss-100: #fde3ef;
  --color-chocolate-kiss-200: #eccedc;
  --color-chocolate-kiss-300: #d8b6c6;
  --color-chocolate-kiss-400: #ba95a7;
  --color-chocolate-kiss-500: #9f7b8d;
  --color-chocolate-kiss-600: #846273;
  --color-chocolate-kiss-700: #6c4d5d;
  --color-chocolate-kiss-800: #573c4a;
  --color-chocolate-kiss-900: #462e3a;
  --color-chocolate-kiss-950: #351828;
  --color-shadow-purple: #543a4a;
  --color-shadow-purple-50: #fff0f9;
  --color-shadow-purple-100: #f9e4f0;
  --color-shadow-purple-200: #e8cfde;
  --color-shadow-purple-300: #d3b8c8;
  --color-shadow-purple-400: #b598a9;
  --color-shadow-purple-500: #9a7d8e;
  --color-shadow-purple-600: #7f6374;
  --color-shadow-purple-700: #674d5d;
  --color-shadow-purple-800: #543a4a;
  --color-shadow-purple-900: #402d38;
  --color-shadow-purple-950: #281b23;
  --color-shepherd-s-green: #58813e;
  --color-shepherd-s-green-50: #e5ffd7;
  --color-shepherd-s-green-100: #dbf7cb;
  --color-shepherd-s-green-200: #c5e6b3;
  --color-shepherd-s-green-300: #add298;
  --color-shepherd-s-green-400: #8cb574;
  --color-shepherd-s-green-500: #719b58;
  --color-shepherd-s-green-600: #58813e;
  --color-shepherd-s-green-700: #426729;
  --color-shepherd-s-green-800: #315119;
  --color-shepherd-s-green-900: #233f0e;
  --color-shepherd-s-green-950: #132805;
  --color-forester: #98a983;
  --color-forester-50: #effae4;
  --color-forester-100: #e5f0d7;
  --color-forester-200: #d0ddc0;
  --color-forester-300: #b9c8a6;
  --color-forester-400: #98a983;
  --color-forester-500: #7d8d68;
  --color-forester-600: #63724f;
  --color-forester-700: #4d5b3b;
  --color-forester-800: #3b472b;
  --color-forester-900: #2d371f;
  --color-forester-950: #1b2211;
}