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.

Download the sketch palette

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 _vars.scss, 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 _vars.scss, 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 scss/_vars.scss reactive to theme change, for consistent shades of gray across your project.

100

200

300

400

500

600

700

800

900

Within _vars.scss, 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 _vars.scss, 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 _vars.scss, 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);