Fern

Lush and feathery — fern brings the dappled light of forest floors and untamed wilderness.

Shades 11

Base #4f7942

RGB 79, 121, 66

100

200

300

400

500

600

700

800

All Fern Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --fern-50: #f2f8f1;
  --fern-100: #e0f0dc;
  --fern-200: #c0e0b8;
  --fern-300: #96ca8c;
  --fern-400: #6eae60;
  --fern-500: #4f7942;
  --fern-600: #3e6133;
  --fern-700: #2e4926;
  --fern-800: #20331a;
  --fern-900: #131f10;
  --fern-950: #090f08;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        fern: {
          50: '#f2f8f1',
          100: '#e0f0dc',
          200: '#c0e0b8',
          300: '#96ca8c',
          400: '#6eae60',
          500: '#4f7942',
          600: '#3e6133',
          700: '#2e4926',
          800: '#20331a',
          900: '#131f10',
          950: '#090f08',
        },
      },
    },
  },
};

SCSS Map

$fern-palette: (
  50: #f2f8f1,
  100: #e0f0dc,
  200: #c0e0b8,
  300: #96ca8c,
  400: #6eae60,
  500: #4f7942,
  600: #3e6133,
  700: #2e4926,
  800: #20331a,
  900: #131f10,
  950: #090f08,
);