Orange

Warmth, creativity, and enthusiasm — orange energizes every design.

Shades 11

Base #f97316

RGB 249, 115, 22

100

200

300

400

500

600

700

800

All Orange Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;
  --orange-950: #431407;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        orange: {
          50: '#fff7ed',
          100: '#ffedd5',
          200: '#fed7aa',
          300: '#fdba74',
          400: '#fb923c',
          500: '#f97316',
          600: '#ea580c',
          700: '#c2410c',
          800: '#9a3412',
          900: '#7c2d12',
          950: '#431407',
        },
      },
    },
  },
};

SCSS Map

$orange-palette: (
  50: #fff7ed,
  100: #ffedd5,
  200: #fed7aa,
  300: #fdba74,
  400: #fb923c,
  500: #f97316,
  600: #ea580c,
  700: #c2410c,
  800: #9a3412,
  900: #7c2d12,
  950: #431407,
);