Aqua

Crystal-clear freshness inspired by tropical waters and modern interfaces.

Shades 11

Base #00ffff

RGB 0, 255, 255

100

200

300

400

500

600

700

800

All Aqua Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --aqua-50: #f0ffff;
  --aqua-100: #dfffff;
  --aqua-200: #bfffff;
  --aqua-300: #8fffff;
  --aqua-400: #4fffff;
  --aqua-500: #00ffff;
  --aqua-600: #00d9d9;
  --aqua-700: #00a6a6;
  --aqua-800: #007373;
  --aqua-900: #004040;
  --aqua-950: #002020;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        aqua: {
          50: '#f0ffff',
          100: '#dfffff',
          200: '#bfffff',
          300: '#8fffff',
          400: '#4fffff',
          500: '#00ffff',
          600: '#00d9d9',
          700: '#00a6a6',
          800: '#007373',
          900: '#004040',
          950: '#002020',
        },
      },
    },
  },
};

SCSS Map

$aqua-palette: (
  50: #f0ffff,
  100: #dfffff,
  200: #bfffff,
  300: #8fffff,
  400: #4fffff,
  500: #00ffff,
  600: #00d9d9,
  700: #00a6a6,
  800: #007373,
  900: #004040,
  950: #002020,
);