Europa Component Library

Colour

Documentation • Demo

EMA Colors

<div class="palette-color" style="background-color: {{ code }}"></div>
<div class="palette-color__content">
  <div class="palette-color__name">${{ name }}</div>
  <div class="palette-color__code">{{ code }}</div>
</div>
 
/* Ema Color Primary */
{
  "code": "#003399",
  "name": "ema-color-primary",
  "category": "primary"
}


/* Ema Color Blue 1 */
{
  "code": "#2651a8",
  "name": "ema-color-blue-1",
  "category": "blue"
}


/* Ema Color Blue 2 */
{
  "code": "#4066b3",
  "name": "ema-color-blue-2",
  "category": "blue"
}


/* Ema Color Blue 3 */
{
  "code": "#4c70b7",
  "name": "ema-color-blue-3",
  "category": "blue"
}


/* Ema Color Blue 4 */
{
  "code": "#5275ba",
  "name": "ema-color-blue-4",
  "category": "blue"
}


/* Ema Color Epar Red */
{
  "code": "#e32a0d",
  "name": "ema-color-epar-red",
  "category": "epar"
}


/* Ema Color Epar Green */
{
  "code": "#06854b",
  "name": "ema-color-epar-green",
  "category": "epar"
}


/* Ema Color Epar Grey */
{
  "code": "#737373",
  "name": "ema-color-epar-grey",
  "category": "epar"
}


/* Ema Color Grey 1 */
{
  "code": "#4c4c4c",
  "name": "ema-color-grey-1",
  "category": "grey"
}


/* Ema Color Grey 2 */
{
  "code": "#606060",
  "name": "ema-color-grey-2",
  "category": "grey"
}


/* Ema Color Grey 3 */
{
  "code": "#b1b1b1",
  "name": "ema-color-grey-3",
  "category": "grey"
}


/* Ema Color Light Grey 1 */
{
  "code": "#e5e5e5",
  "name": "ema-color-light-grey-1",
  "category": "grey"
}


/* Ema Color Light Grey 2 */
{
  "code": "#efefef",
  "name": "ema-color-light-grey-2",
  "category": "grey"
}


/* Ema Color Light Grey 3 */
{
  "code": "#f8f8f8",
  "name": "ema-color-light-grey-3",
  "category": "grey"
}


/* Ema Color Light Grey 4 */
{
  "code": "#fcfcfc",
  "name": "ema-color-light-grey-4",
  "category": "grey"
}


<!-- Ema Color Primary -->
<div class="palette-color" style="background-color: #003399"></div>
<div class="palette-color__content">
  <div class="palette-color__name">$ema-color-primary</div>
  <div class="palette-color__code">#003399</div>
</div>


<!-- Ema Color Blue 1 -->
<div class="palette-color" style="background-color: #2651a8"></div>
<div class="palette-color__content">
  <div class="palette-color__name">$ema-color-blue-1</div>
  <div class="palette-color__code">#2651a8</div>
</div>


<!-- Ema Color Blue 2 -->
<div class="palette-color" style="background-color: #4066b3"></div>
<div class="palette-color__content">
  <div class="palette-color__name">$ema-color-blue-2</div>
  <div class="palette-color__code">#4066b3</div>
</div>


<!-- Ema Color Blue 3 -->
<div class="palette-color" style="background-color: #4c70b7"></div>
<div class="palette-color__content">
  <div class="palette-color__name">$ema-color-blue-3</div>
  <div class="palette-color__code">#4c70b7</div>
</div>


<!-- Ema Color Blue 4 -->
<div class="palette-color" style="background-color: #5275ba"></div>
<div class="palette-color__content">
  <div class="palette-color__name">$ema-color-blue-4</div>
  <div class="palette-color__code">#5275ba</div>
</div>


<!-- Ema Color Epar Red -->
<div class="palette-color" style="background-color: #e32a0d"></div>
<div class="palette-color__content">
  <div class="palette-color__name">$ema-color-epar-red</div>
  <div class="palette-color__code">#e32a0d</div>
</div>


<!-- Ema Color Epar Green -->
<div class="palette-color" style="background-color: #06854b"></div>
<div class="palette-color__content">
  <div class="palette-color__name">$ema-color-epar-green</div>
  <div class="palette-color__code">#06854b</div>
</div>


<!-- Ema Color Epar Grey -->
<div class="palette-color" style="background-color: #737373"></div>
<div class="palette-color__content">
  <div class="palette-color__name">$ema-color-epar-grey</div>
  <div class="palette-color__code">#737373</div>
</div>


<!-- Ema Color Grey 1 -->
<div class="palette-color" style="background-color: #4c4c4c"></div>
<div class="palette-color__content">
  <div class="palette-color__name">$ema-color-grey-1</div>
  <div class="palette-color__code">#4c4c4c</div>
</div>


<!-- Ema Color Grey 2 -->
<div class="palette-color" style="background-color: #606060"></div>
<div class="palette-color__content">
  <div class="palette-color__name">$ema-color-grey-2</div>
  <div class="palette-color__code">#606060</div>
</div>


<!-- Ema Color Grey 3 -->
<div class="palette-color" style="background-color: #b1b1b1"></div>
<div class="palette-color__content">
  <div class="palette-color__name">$ema-color-grey-3</div>
  <div class="palette-color__code">#b1b1b1</div>
</div>


<!-- Ema Color Light Grey 1 -->
<div class="palette-color" style="background-color: #e5e5e5"></div>
<div class="palette-color__content">
  <div class="palette-color__name">$ema-color-light-grey-1</div>
  <div class="palette-color__code">#e5e5e5</div>
</div>


<!-- Ema Color Light Grey 2 -->
<div class="palette-color" style="background-color: #efefef"></div>
<div class="palette-color__content">
  <div class="palette-color__name">$ema-color-light-grey-2</div>
  <div class="palette-color__code">#efefef</div>
</div>


<!-- Ema Color Light Grey 3 -->
<div class="palette-color" style="background-color: #f8f8f8"></div>
<div class="palette-color__content">
  <div class="palette-color__name">$ema-color-light-grey-3</div>
  <div class="palette-color__code">#f8f8f8</div>
</div>


<!-- Ema Color Light Grey 4 -->
<div class="palette-color" style="background-color: #fcfcfc"></div>
<div class="palette-color__content">
  <div class="palette-color__name">$ema-color-light-grey-4</div>
  <div class="palette-color__code">#fcfcfc</div>
</div>