Electric Blue

Charged and kinetic — electric blue crackles with the energy of lightning and neon signs.

Shades 11

Base #7df9ff

RGB 125, 249, 255

100

200

300

400

500

600

700

800

All Electric Blue Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --electric-blue-50: #f0feff;
  --electric-blue-100: #d8fcff;
  --electric-blue-200: #b0faff;
  --electric-blue-300: #7df9ff;
  --electric-blue-400: #38edfc;
  --electric-blue-500: #00d4e8;
  --electric-blue-600: #00a8bc;
  --electric-blue-700: #007e8e;
  --electric-blue-800: #005562;
  --electric-blue-900: #00323a;
  --electric-blue-950: #00191d;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        electric-blue: {
          50: '#f0feff',
          100: '#d8fcff',
          200: '#b0faff',
          300: '#7df9ff',
          400: '#38edfc',
          500: '#00d4e8',
          600: '#00a8bc',
          700: '#007e8e',
          800: '#005562',
          900: '#00323a',
          950: '#00191d',
        },
      },
    },
  },
};

SCSS Map

$electric-blue-palette: (
  50: #f0feff,
  100: #d8fcff,
  200: #b0faff,
  300: #7df9ff,
  400: #38edfc,
  500: #00d4e8,
  600: #00a8bc,
  700: #007e8e,
  800: #005562,
  900: #00323a,
  950: #00191d,
);