Frosted Fir to Terminal Black color palette

C2D2BDFrosted Fir 8DAF8BFoliage 435D52Ethereal Woods 4E7C7FSubmerged 26332DTerminal Black

About this palette

Frosted Fir to Terminal Black is a 5-color muted, cool palette: #C2D2BD (Frosted Fir), #8DAF8B (Foliage), #435D52 (Ethereal Woods), #4E7C7F (Submerged), #26332D (Terminal Black). It mixes gray, green, turquoise tones and feels cool overall. The strongest text pairing is #C2D2BD on #26332D with a contrast ratio of 8.31:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frosted Fir	rgb(194, 210, 189)	hsl(106, 19%, 78%)
Foliage	rgb(141, 175, 139)	hsl(117, 18%, 62%)
Ethereal Woods	rgb(67, 93, 82)	hsl(155, 16%, 31%)
Submerged	rgb(78, 124, 127)	hsl(184, 24%, 40%)
Terminal Black	rgb(38, 51, 45)	hsl(152, 15%, 17%)

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.31:1 Very good#C2D2BD on #26332D
Aa8.31:1 Very good#26332D on #C2D2BD
Aa5.42:1 Good#8DAF8B on #26332D
Aa5.42:1 Good#26332D on #8DAF8B
Aa4.53:1 Good#C2D2BD on #435D52
Aa4.53:1 Good#435D52 on #C2D2BD

Color blindness preview

CSS variables

/* Frosted Fir to Terminal Black — https://swatchly.xyz/palette/c2d2bd-8daf8b-435d52-4e7c7f-26332d */
:root {
  --frosted-fir: #c2d2bd;
  --foliage: #8daf8b;
  --ethereal-woods: #435d52;
  --submerged: #4e7c7f;
  --terminal-black: #26332d;
}

Tailwind CSS v4

/* Frosted Fir to Terminal Black — https://swatchly.xyz/palette/c2d2bd-8daf8b-435d52-4e7c7f-26332d */
@theme {
  --color-frosted-fir: #c2d2bd;
  --color-frosted-fir-50: #e7f1e4;
  --color-frosted-fir-100: #dbe6d7;
  --color-frosted-fir-200: #c2d2bd;
  --color-frosted-fir-300: #afbdaa;
  --color-frosted-fir-400: #91a08c;
  --color-frosted-fir-500: #778673;
  --color-frosted-fir-600: #5f6d5b;
  --color-frosted-fir-700: #4b5847;
  --color-frosted-fir-800: #3b4638;
  --color-frosted-fir-900: #2d362a;
  --color-frosted-fir-950: #1b2219;
  --color-foliage: #8daf8b;
  --color-foliage-50: #e9fde8;
  --color-foliage-100: #def4dd;
  --color-foliage-200: #c8e2c6;
  --color-foliage-300: #afcdad;
  --color-foliage-400: #8daf8b;
  --color-foliage-500: #729370;
  --color-foliage-600: #587756;
  --color-foliage-700: #425f41;
  --color-foliage-800: #314b30;
  --color-foliage-900: #243923;
  --color-foliage-950: #142414;
  --color-ethereal-woods: #435d52;
  --color-ethereal-woods-50: #e9faf2;
  --color-ethereal-woods-100: #def0e8;
  --color-ethereal-woods-200: #c8ded4;
  --color-ethereal-woods-300: #afc8bd;
  --color-ethereal-woods-400: #8ea99d;
  --color-ethereal-woods-500: #738e82;
  --color-ethereal-woods-600: #597468;
  --color-ethereal-woods-700: #435d52;
  --color-ethereal-woods-800: #344940;
  --color-ethereal-woods-900: #263831;
  --color-ethereal-woods-950: #16231e;
  --color-submerged: #4e7c7f;
  --color-submerged-50: #e1fbfd;
  --color-submerged-100: #d6f3f5;
  --color-submerged-200: #bfe2e4;
  --color-submerged-300: #a6ced0;
  --color-submerged-400: #83b0b3;
  --color-submerged-500: #679699;
  --color-submerged-600: #4e7c7f;
  --color-submerged-700: #396366;
  --color-submerged-800: #284e50;
  --color-submerged-900: #1b3c3e;
  --color-submerged-950: #0e2527;
  --color-terminal-black: #26332d;
  --color-terminal-black-50: #eff8f3;
  --color-terminal-black-100: #e4eee9;
  --color-terminal-black-200: #cfdbd5;
  --color-terminal-black-300: #b7c5be;
  --color-terminal-black-400: #96a59e;
  --color-terminal-black-500: #7a8982;
  --color-terminal-black-600: #606e67;
  --color-terminal-black-700: #4a5650;
  --color-terminal-black-800: #37423d;
  --color-terminal-black-900: #26332d;
  --color-terminal-black-950: #181e1b;
}