Colors

Our colors signify our brand but they also help users navigate through the interface. Every color has a a role and a meaning and should be used wisely. Here you'll learn how to use them in our digital products.

Palette

All colors available for ENGIE projects.

Logo color

blue-engie
#0af

Primary colors

blue-corporate
#009de9

white
#ffffff

gradient-primary
#0af - #23d2b5

Secondary colors

green-java
#6ed2b1

orange-crusta
#f78a31

purple
#1f106d

red-mandy
#e74a50

yellow-bright-sun
#fbdb3c

Accent colors

green
#009934

orange
#e07602

red
#c03

Additional colors

blue-bigstone
#0f1e29

blue-allports
#0b74c0

blue-rhino
#2b485c

blue-venice
#005288

cerise
#e62b87

green-fun
#69af23

green-pine
#007873

green-riogrande
#becd00

violet-eggplant
#910f7d

violet
#552382

yellow
#faca08

Color utility classes are available for setting color and background-color.

Within @engie-group/fluid-design-tokens/lib/css/tokens.css, a full range of :root css variables reactive to dark mode.

  --nj-color-base-blue-corporate
  --nj-color-base-blue-corporate-hover
  --nj-color-base-blue-corporate-active
  --nj-color-text-background-blue-corporate

Within _color.scss and _color-dark.scss, you’ll find our legacy color variables and Sass map. Here’s an example of the $colors Sass map:

$colors: (
  "white": $white,
  "blue-corporate": $blue-corporate,
  "blue-allports": $blue-allports,
  "blue-venice": $blue-venice,
  "green-java": $green-java,
  "green-pine": $green-pine,
  "red": $red,
  "green": $green,
  "orange": $orange,
  "yellow": $yellow,
  "purple": $purple,
  "violet-eggplant": $violet-eggplant,
  "violet": $violet,
  "cerise": $cerise,
  "green-fun": $green-fun,
  "green-riogrande": $green-riogrande,
  "blue-rhino": $blue-rhino,
  "blue-bigstone": $blue-bigstone
);

Gradient

You can use ENGIE gradient in several cases (text, background, border).

#0af / #23d2b5

--nj-color-base-gradient-primary

$gradient-primary: linear-gradient(135deg, $blue-engie 0%, #23d2b5 100%);

Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in our scss/_color.scss and scss/_color-dark.scss file.
You can customize theme and expand sass map to get a full themed application.

Primary

Success

Danger

Warning

Light

Within @engie-group/fluid-design-tokens/lib/css/tokens.css, a full range of :root theme css variables reactive to dark mode.

  --nj-color-base-primary
  --nj-color-base-primary-hover
  --nj-color-base-primary-active
  --nj-color-text-background-primary

Grays

An expansive set of gray variables in @engie-group/fluid-design-tokens/lib/css/tokens.css reactive to theme change, for consistent shades of gray across your project.

100

200

300

400

500

600

700

800

900

Within @engie-group/fluid-design-tokens/lib/css/tokens.css, a full range of :root css variables reactive to dark mode.

  --nj-color-base-gray-100
  --nj-color-base-gray-200
  --nj-color-base-gray-300 ...

Within scss/_color.scss and scss/_color-dark.scss, you’ll find our legacy gray sass map.

$gray-100: #f5f5f5;
$gray-200: #eee;
$gray-300: #e0e0e0;
$gray-400: #bdbdbd;
$gray-500: #9e9e9e;
$gray-600: #757575;
$gray-700: #616161;
$gray-800: #454545;
$gray-900: #212121;

$gray-dark-100: #e0e0e0;
$gray-dark-200: #b8bfc3;
$gray-dark-300: #758590;
$gray-dark-400: #485d6c;
$gray-dark-500: #304759;
$gray-dark-600: #1a3447;
$gray-dark-700: #142938;
$gray-dark-800: #0f1e29;
$gray-dark-900: #081016;

Shades of black

An expansive set of black shades variables (rgba).

100 - 0.12

200 - 0.26

300 - 0.38

500 - 0.54

800 - 0.87

100 - 0.12

200 - 0.26

300 - 0.38

500 - 0.54

800 - 0.87

100 - 0.12

200 - 0.26

300 - 0.38

500 - 0.54

800 - 0.87

Within @engie-group/fluid-design-tokens/lib/css/tokens.css, a black opacity range of :root css variables non reactive to dark mode.

  --nj-color-base-black-100: rgba(0,0,0, .12);
  --nj-color-base-black-200: rgba(0,0,0, .26);
  --nj-color-base-black-300: rgba(0,0,0, .38);
  --nj-color-base-black-500: rgba(0,0,0, .54);
  --nj-color-base-black-800: rgba(0,0,0, .87);

Legacy sass variables:

$black-100: rgba($black, 0.12);
$black-200: rgba($black, 0.26);
$black-300: rgba($black, 0.38);
$black-500: rgba($black, 0.54);
$black-800: rgba($black, 0.87);

Shades of white

An expansive set of white shades variables (rgba).

100 - 0.12

300 - 0.3

500 - 0.5

700 - 0.7

Within @engie-group/fluid-design-tokens/lib/css/tokens.css, a white opacity range of :root css variables non-reactive to dark mode.

  --nj-color-base-white-100: rgba(255,255,255, .12);
  --nj-color-base-white-300: rgba(255,255,255, .3);
  --nj-color-base-white-500: rgba(255,255,255, .5);
  --nj-color-base-white-700: rgba(255,255,255, .7);

Legacy sass variables:

$white-100: rgba($white, .12);
$white-300: rgba($white, .3);
$white-500: rgba($white, .5);
$white-700: rgba($white, .7);