Seafoam

Light and breezy — seafoam captures the pale frothy edge where ocean meets shore.

Shades 11

Base #9fe2bf

RGB 159, 226, 191

100

200

300

400

500

600

700

800

All Seafoam Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --seafoam-50: #f2fdf8;
  --seafoam-100: #e0faef;
  --seafoam-200: #c3f5df;
  --seafoam-300: #9fe2bf;
  --seafoam-400: #72cc9e;
  --seafoam-500: #4ab57d;
  --seafoam-600: #349162;
  --seafoam-700: #266d49;
  --seafoam-800: #194b33;
  --seafoam-900: #0e2c1e;
  --seafoam-950: #07160f;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        seafoam: {
          50: '#f2fdf8',
          100: '#e0faef',
          200: '#c3f5df',
          300: '#9fe2bf',
          400: '#72cc9e',
          500: '#4ab57d',
          600: '#349162',
          700: '#266d49',
          800: '#194b33',
          900: '#0e2c1e',
          950: '#07160f',
        },
      },
    },
  },
};

SCSS Map

$seafoam-palette: (
  50: #f2fdf8,
  100: #e0faef,
  200: #c3f5df,
  300: #9fe2bf,
  400: #72cc9e,
  500: #4ab57d,
  600: #349162,
  700: #266d49,
  800: #194b33,
  900: #0e2c1e,
  950: #07160f,
);