Olive

Earthy and sophisticated — olive brings timeless natural character.

Shades 11

Base #808000

RGB 128, 128, 0

100

200

300

400

500

600

700

800

All Olive Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --olive-50: #fafae8;
  --olive-100: #f0f0c8;
  --olive-200: #e0e08f;
  --olive-300: #cfcf5f;
  --olive-400: #abab2e;
  --olive-500: #808000;
  --olive-600: #666600;
  --olive-700: #4d4d00;
  --olive-800: #333300;
  --olive-900: #1a1a00;
  --olive-950: #0d0d00;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        olive: {
          50: '#fafae8',
          100: '#f0f0c8',
          200: '#e0e08f',
          300: '#cfcf5f',
          400: '#abab2e',
          500: '#808000',
          600: '#666600',
          700: '#4d4d00',
          800: '#333300',
          900: '#1a1a00',
          950: '#0d0d00',
        },
      },
    },
  },
};

SCSS Map

$olive-palette: (
  50: #fafae8,
  100: #f0f0c8,
  200: #e0e08f,
  300: #cfcf5f,
  400: #abab2e,
  500: #808000,
  600: #666600,
  700: #4d4d00,
  800: #333300,
  900: #1a1a00,
  950: #0d0d00,
);