Neon Orange

High-visibility and unstoppable — neon orange burns bright with urgency and electric heat.

Shades 11

Base #ff6700

RGB 255, 103, 0

100

200

300

400

500

600

700

800

All Neon Orange Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --neon-orange-50: #fff5eb;
  --neon-orange-100: #ffe4c2;
  --neon-orange-200: #ffc885;
  --neon-orange-300: #ffa347;
  --neon-orange-400: #ff8618;
  --neon-orange-500: #ff6700;
  --neon-orange-600: #d45200;
  --neon-orange-700: #a33e00;
  --neon-orange-800: #742c00;
  --neon-orange-900: #471a00;
  --neon-orange-950: #230d00;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        neon-orange: {
          50: '#fff5eb',
          100: '#ffe4c2',
          200: '#ffc885',
          300: '#ffa347',
          400: '#ff8618',
          500: '#ff6700',
          600: '#d45200',
          700: '#a33e00',
          800: '#742c00',
          900: '#471a00',
          950: '#230d00',
        },
      },
    },
  },
};

SCSS Map

$neon-orange-palette: (
  50: #fff5eb,
  100: #ffe4c2,
  200: #ffc885,
  300: #ffa347,
  400: #ff8618,
  500: #ff6700,
  600: #d45200,
  700: #a33e00,
  800: #742c00,
  900: #471a00,
  950: #230d00,
);