Avocado

Muted and modern — avocado's yellow-green warmth brings organic vitality and contemporary cool.

Shades 11

Base #568203

RGB 86, 130, 3

100

200

300

400

500

600

700

800

All Avocado Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --avocado-50: #f5faeb;
  --avocado-100: #e6f3cc;
  --avocado-200: #cce89a;
  --avocado-300: #aad660;
  --avocado-400: #84b82a;
  --avocado-500: #568203;
  --avocado-600: #446802;
  --avocado-700: #334e02;
  --avocado-800: #233601;
  --avocado-900: #142001;
  --avocado-950: #0a1000;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        avocado: {
          50: '#f5faeb',
          100: '#e6f3cc',
          200: '#cce89a',
          300: '#aad660',
          400: '#84b82a',
          500: '#568203',
          600: '#446802',
          700: '#334e02',
          800: '#233601',
          900: '#142001',
          950: '#0a1000',
        },
      },
    },
  },
};

SCSS Map

$avocado-palette: (
  50: #f5faeb,
  100: #e6f3cc,
  200: #cce89a,
  300: #aad660,
  400: #84b82a,
  500: #568203,
  600: #446802,
  700: #334e02,
  800: #233601,
  900: #142001,
  950: #0a1000,
);