Vai al contenuto principale

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA
Cerca nella documentazione

Colori Custom

Colori Custom

Modifica colori di background, testo e bordi con colori custom.

Definisci colori di background, bordi, colore di testo attraverso specifiche classi.

Colori Primari

I colori primari sono il Blu Italia e il bianco.
Il Blu Italia è il colore identificativo dell’intera brand identity e rappresenta la radice per creare altri colori della palette primaria.

#0066CC
#FFFFFF
Testo bianco su background colore primario
Testo colore primario su background con bordo primario

1
2

<div class="primary-bg p-3"><span class="white-color">Testo bianco su background colore primario</span></div>
<div class="primary-border-color border p-3"><span class="primary-color">Testo colore primario su background con bordo primario</span></div>

Utilizzo delle classi:

.primary-bg : per background color
.primary-color : per text color
.primary-border-color : per border color

Varianti monocromatiche del colore base

Il colore primario possiede tre tipologie di varianti cromatiche. Per utilizzarle è sufficiente utilizzare la relativa classe

Utilizzo delle classi:

.primary-bg- + variante-colore : per background color
.primary-color- + variante-colore : per text color
.primary-border-color- + variante-colore : per border color

(es. .primary-bg-a5 per utilizzare come background il colore primario con variante a5 )

Tinte e ombre

a1
a2
a3
a4
a5
a6
a7
a8
a9
a10
a11
a12

Toni

b1
b2
b3
b4
b5
b6
b7

Variazione di saturazione

c1
c2
c3
c4
c5
c6
c7
c8
c9
c10
c11
c12

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<div class="bd-example-border-utils">
  <div class="row">
    <div class="col-xs-12 col-md-3">
      <p>Tinte e ombre</p>
      <div class="c-line primary-bg-a1">a1</div>
      <div class="c-line primary-bg-a2">a2</div>
      <div class="c-line primary-bg-a3">a3</div>
      <div class="c-line primary-bg-a4">a4</div>
      <div class="c-line primary-bg-a5">a5</div>
      <div class="c-line white-color primary-bg-a6">a6</div>
      <div class="c-line white-color primary-bg-a7">a7</div>
      <div class="c-line white-color primary-bg-a8">a8</div>
      <div class="c-line white-color primary-bg-a9">a9</div>
      <div class="c-line white-color primary-bg-a10">a10</div>
      <div class="c-line white-color primary-bg-a11">a11</div>
      <div class="c-line white-color primary-bg-a12">a12</div>
    </div>
    <div class="col-xs-12 col-md-3">
      <p>Toni</p>
      <div class="c-line primary-bg-b1 white-color">b1</div>
      <div class="c-line primary-bg-b2 white-color">b2</div>
      <div class="c-line primary-bg-b3 white-color">b3</div>
      <div class="c-line primary-bg-b4 white-color">b4</div>
      <div class="c-line primary-bg-b5 white-color">b5</div>
      <div class="c-line primary-bg-b6 white-color">b6</div>
      <div class="c-line primary-bg-b7 white-color">b7</div>
    </div>
    <div class="col-xs-12 col-md-3">
      <p>Variazione di saturazione</p>
      <div class="c-line primary-bg-c1">c1</div>
      <div class="c-line primary-bg-c2">c2</div>
      <div class="c-line primary-bg-c3">c3</div>
      <div class="c-line primary-bg-c4">c4</div>
      <div class="c-line primary-bg-c5">c5</div>
      <div class="c-line primary-bg-c6">c6</div>
      <div class="c-line primary-bg-c7">c7</div>
      <div class="c-line primary-bg-c8">c8</div>
      <div class="c-line primary-bg-c9">c9</div>
      <div class="c-line primary-bg-c10">c10</div>
      <div class="c-line white-color primary-bg-c11">c11</div>
      <div class="c-line white-color primary-bg-c12">c12</div>
    </div>
  </div>
</div>

Colori secondari

Analoghi

Ai colori monocromatici può essere affiancato un accent color, definito così perché si tratta di un colore molto luminoso, serve ad attirare l’attenzione.

Devono essere usati in modo parsimonioso.

#3126ff
#0bd9d2


Utilizzo delle classi:

.analogue-(+ 1/2 +)-bg : per background color
.analogue-(+ 1/2 +)-color : per text color
.analogue-(+ 1/2 +)-border-color : per border color

Testo bianco su background colore analogo 1
Testo nero su background colore analogo 2

1
2

<div class="analogue-1-bg p-3"><span class="white-color">Testo bianco su background colore analogo 1</span></div>
<div class="analogue-2-bg p-3"><span>Testo nero su background colore analogo 2</span></div>

Complementari e triadici

#f73e5a
#ff9900
#00cf86


Utilizzo delle classi:

.complementary-(+ 1/2/3 +)-bg : per background color
.complementary-(+ 1/2/3 +)-color : per text color
.complementary-(+ 1/2/3 +)-border-color : per border color

Testo su background colore complementare 1
Testo su background colore complementare 2
Testo su background colore complementare 3

1
2
3

<div class="complementary-1-bg p-3"><span>Testo su background colore complementare 1</span></div>
<div class="complementary-2-bg p-3"><span>Testo su background colore complementare 2</span></div>
<div class="complementary-3-bg p-3"><span>Testo su background colore complementare 3</span></div>

Varianti colori secondari

Analoghi

I colori analoghi possiedono due tipologie di varianti cromatiche. Per utilizzarle è sufficiente utilizzare la relativa classe

Utilizzo delle classi:

.analogue-(+ 1/2 )-bg- + variante-colore : per background color
.analogue-(+ 1/2 )-color- + variante-colore : per text color
.analogue-(+ 1/2 )-border-color- + variante-colore : per border color

(es. .analogue-1-bg-a5 per utilizzare come background il colore analogo 1 con variante a5 )

a1
a2
a3
a4
a5
a6
a7
a8
a9
a10
a11
a12
b1
b2
b3
b4
b5
b6
b7
b8
a1
a2
a3
a4
a5
a6
a7
a8
a9
a10
a11
a12
b1
b2
b3
b4
b5
b6
b7
b8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<div class="row">
  <div class="col-md-3">
    <div class="c-line analogue-1-bg-a1">a1 </div>
    <div class="c-line analogue-1-bg-a2">a2 </div>
    <div class="c-line analogue-1-bg-a3">a3 </div>
    <div class="c-line white-color analogue-1-bg-a4">a4 </div>
    <div class="c-line white-color analogue-1-bg-a5">a5 </div>
    <div class="c-line white-color analogue-1-bg-a6">a6 </div>
    <div class="c-line white-color analogue-1-bg-a7">a7 </div>
    <div class="c-line white-color analogue-1-bg-a8">a8 </div>
    <div class="c-line white-color analogue-1-bg-a9">a9 </div>
    <div class="c-line white-color analogue-1-bg-a10">a10 </div>
    <div class="c-line white-color analogue-1-bg-a11">a11 </div>
    <div class="c-line white-color analogue-1-bg-a12">a12 </div>
  </div>
  <div class="col-md-3">
    <div class="c-line white-color analogue-1-bg-b1">b1</div>
    <div class="c-line white-color analogue-1-bg-b2">b2</div>
    <div class="c-line white-color analogue-1-bg-b3">b3</div>
    <div class="c-line white-color analogue-1-bg-b4">b4</div>
    <div class="c-line white-color analogue-1-bg-b5">b5</div>
    <div class="c-line white-color analogue-1-bg-b6">b6</div>
    <div class="c-line white-color analogue-1-bg-b7">b7</div>
    <div class="c-line white-color analogue-1-bg-b8">b8</div>
  </div>
  <div class="col-md-3">
    <div class="c-line analogue-2-bg-a1">a1</div>
    <div class="c-line analogue-2-bg-a2">a2</div>
    <div class="c-line analogue-2-bg-a3">a3</div>
    <div class="c-line analogue-2-bg-a4">a4</div>
    <div class="c-line analogue-2-bg-a5">a5</div>
    <div class="c-line analogue-2-bg-a6">a6</div>
    <div class="c-line analogue-2-bg-a7">a7</div>
    <div class="c-line analogue-2-bg-a8">a8</div>
    <div class="c-line white-color analogue-2-bg-a9">a9</div>
    <div class="c-line white-color analogue-2-bg-a10">a10</div>
    <div class="c-line white-color analogue-2-bg-a11">a11</div>
    <div class="c-line white-color analogue-2-bg-a12">a12</div>
  </div>
  <div class="col-md-3">
    <div class="c-line white-color analogue-2-bg-b1">b1</div>
    <div class="c-line white-color analogue-2-bg-b2">b2</div>
    <div class="c-line white-color analogue-2-bg-b3">b3</div>
    <div class="c-line white-color analogue-2-bg-b4">b4</div>
    <div class="c-line white-color analogue-2-bg-b5">b5</div>
    <div class="c-line white-color analogue-2-bg-b6">b6</div>
    <div class="c-line white-color analogue-2-bg-b7">b7</div>
    <div class="c-line white-color analogue-2-bg-b8">b8</div>
  </div>
</div>

Complementari e triadici

I colori Complementari possiedono due tipologie di varianti cromatiche. Per utilizzarle è sufficiente utilizzare la relativa classe

Utilizzo delle classi:

.complementary-(+ 1/2/3 )-bg- + variante-colore : per background color
.complementary-(+ 1/2/3 )-color- + variante-colore : per text color
.complementary-(+ 1/2/3 )-border-color- + variante-colore : per border color

(es. .complementary-1-bg-a5 per utilizzare come background il colore complementare 1 con variante a4 )

a1
a2
a3
a4
a5
a6
a7
a8
a9
a10
a11
a12
b1
b2
b3
b4
b5
b6
b7
b8
a1
a2
a3
a4
a5
a6
a7
a8
a9
a10
a11
a12
b1
b2
b3
b4
b5
b6
b7
b8
a1
a2
a3
a4
a5
a6
a7
a8
a9
a10
a11
a12
b1
b2
b3
b4
b5
b6
b7
b8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

<div class="row">
   <div class="col-md-2">
      <div class="c-line complementary-1-bg-a1">a1</div>
      <div class="c-line complementary-1-bg-a2">a2</div>
      <div class="c-line complementary-1-bg-a3">a3</div>
      <div class="c-line complementary-1-bg-a4">a4</div>
      <div class="c-line complementary-1-bg-a5">a5</div>
      <div class="c-line white-color complementary-1-bg-a6">a6</div>
      <div class="c-line white-color complementary-1-bg-a7">a7</div>
      <div class="c-line white-color complementary-1-bg-a8">a8</div>
      <div class="c-line white-color complementary-1-bg-a9">a9</div>
      <div class="c-line white-color complementary-1-bg-a10">a10</div>
      <div class="c-line white-color complementary-1-bg-a11">a11</div>
      <div class="c-line white-color complementary-1-bg-a12">a12</div>
   </div>
   <div class="col-md-2">
      <div class="c-line white-color complementary-1-bg-b1">b1</div>
      <div class="c-line white-color complementary-1-bg-b2">b2</div>
      <div class="c-line white-color complementary-1-bg-b3">b3</div>
      <div class="c-line white-color complementary-1-bg-b4">b4</div>
      <div class="c-line white-color complementary-1-bg-b5">b5</div>
      <div class="c-line white-color complementary-1-bg-b6">b6</div>
      <div class="c-line white-color complementary-1-bg-b7">b7</div>
      <div class="c-line white-color complementary-1-bg-b8">b8</div>
   </div>
   <div class="col-md-2">
      <div class="c-line complementary-2-bg-a1">a1</div>
      <div class="c-line complementary-2-bg-a2">a2</div>
      <div class="c-line complementary-2-bg-a3">a3</div>
      <div class="c-line complementary-2-bg-a4">a4</div>
      <div class="c-line complementary-2-bg-a5">a5</div>
      <div class="c-line complementary-2-bg-a6">a6</div>
      <div class="c-line white-color complementary-2-bg-a7">a7</div>
      <div class="c-line white-color complementary-2-bg-a8">a8</div>
      <div class="c-line white-color complementary-2-bg-a9">a9</div>
      <div class="c-line white-color complementary-2-bg-a10">a10</div>
      <div class="c-line white-color complementary-2-bg-a11">a11</div>
      <div class="c-line white-color complementary-2-bg-a12">a12</div>
   </div>
   <div class="col-md-2">
      <div class="c-line white-color complementary-2-bg-b1">b1</div>
      <div class="c-line white-color complementary-2-bg-b2">b2</div>
      <div class="c-line white-color complementary-2-bg-b3">b3</div>
      <div class="c-line white-color complementary-2-bg-b4">b4</div>
      <div class="c-line white-color complementary-2-bg-b5">b5</div>
      <div class="c-line white-color complementary-2-bg-b6">b6</div>
      <div class="c-line white-color complementary-2-bg-b7">b7</div>
      <div class="c-line white-color complementary-2-bg-b8">b8</div>
   </div>
   <div class="col-md-2">
      <div class="c-line complementary-3-bg-a1">a1</div>
      <div class="c-line complementary-3-bg-a2">a2</div>
      <div class="c-line complementary-3-bg-a3">a3</div>
      <div class="c-line complementary-3-bg-a4">a4</div>
      <div class="c-line complementary-3-bg-a5">a5</div>
      <div class="c-line complementary-3-bg-a6">a6</div>
      <div class="c-line complementary-3-bg-a7">a7</div>
      <div class="c-line complementary-3-bg-a8">a8</div>
      <div class="c-line white-color complementary-3-bg-a9">a9</div>
      <div class="c-line white-color complementary-3-bg-a10">a10</div>
      <div class="c-line white-color complementary-3-bg-a11">a11</div>
      <div class="c-line white-color complementary-3-bg-a12">a12</div>
   </div>
   <div class="col-md-2">
      <div class="c-line white-color complementary-3-bg-b1">b1</div>
      <div class="c-line white-color complementary-3-bg-b2">b2</div>
      <div class="c-line white-color complementary-3-bg-b3">b3</div>
      <div class="c-line white-color complementary-3-bg-b4">b4</div>
      <div class="c-line white-color complementary-3-bg-b5">b5</div>
      <div class="c-line white-color complementary-3-bg-b6">b6</div>
      <div class="c-line white-color complementary-3-bg-b7">b7</div>
      <div class="c-line white-color complementary-3-bg-b8">b8</div>
   </div>
</div>

Colori neutrali

#17324d
#e6ecf2


Utilizzo delle classi:

.neutral-(+ 1/2 +)-bg : per background color
.neutral-(+ 1/2 +)-color : per text color
.neutral-(+ 1/2 +)-border-color : per border color

Testo bianco su background colore neutrale 1
Testo su background colore neutrale 2

1
2

<div class="neutral-1-bg p-3"><span class="white-color">Testo bianco su background colore neutrale 1</span></div>
<div class="neutral-2-bg p-3"><span>Testo su background colore neutrale 2</span></div>

Varianti colori neutrali

I colori neutrali possiedono tre tipologie di varianti cromatiche. Per utilizzarle è sufficiente utilizzare la relativa classe

Utilizzo delle classi:

.neutral-(+ 1/2 +)-bg- + variante-colore : per background color
.neutral-(+ 1/2 +)-color- + variante-colore : per text color
.neutral-(+ 1/2 +)-border-color- + variante-colore : per border color

(es. .neutral-1-bg-a5 per utilizzare come background il colore neutrale 1 con variante a5 )

a1
a2
a3
a4
a5
a6
a7
a8
a9
a10
b1
b2
b3
b4
b5
b6
b7
a1
a2
a3
a4
a5
a6
a7

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<div class="row">
  <div class="col-md-3">
    <div class="c-line neutral-1-bg-a1">a1</div>
    <div class="c-line neutral-1-bg-a2">a2</div>
    <div class="c-line neutral-1-bg-a3">a3</div>
    <div class="c-line neutral-1-bg-a4">a4</div>
    <div class="c-line neutral-1-bg-a5">a5</div>
    <div class="c-line neutral-1-bg-a6">a6</div>
    <div class="c-line white-color neutral-1-bg-a7">a7</div>
    <div class="c-line white-color neutral-1-bg-a8">a8</div>
    <div class="c-line white-color neutral-1-bg-a9">a9</div>
    <div class="c-line white-color neutral-1-bg-a10">a10</div>
  </div>
  <div class="col-md-3">
    <div class="c-line neutral-2-bg-b1">b1</div>
    <div class="c-line neutral-2-bg-b2">b2</div>
    <div class="c-line neutral-2-bg-b3">b3</div>
    <div class="c-line neutral-2-bg-b4">b4</div>
    <div class="c-line white-color neutral-2-bg-b5">b5</div>
    <div class="c-line white-color neutral-2-bg-b6">b6</div>
    <div class="c-line white-color neutral-2-bg-b7">b7</div>
  </div>
  <div class="col-md-3">
    <div class="c-line neutral-2-bg-a1">a1</div>
    <div class="c-line neutral-2-bg-a2">a2</div>
    <div class="c-line neutral-2-bg-a3">a3</div>
    <div class="c-line neutral-2-bg-a4">a4</div>
    <div class="c-line white-color neutral-2-bg-a5">a5</div>
    <div class="c-line white-color neutral-2-bg-a6">a6</div>
    <div class="c-line white-color neutral-2-bg-a7">a7</div>
  </div>
</div>

Grigi chiari

I grigi chiari sono di tre tipologie. Per utilizzarle è sufficiente utilizzare la relativa classe

Utilizzo delle classi:

.lightgrey-bg- + variante-colore : per background color
.lightgrey-color- + variante-colore : per text color
.lightgrey-border-color- + variante-colore : per border color

(es. .lightgrey-1-bg-a4 per utilizzare come background il grigio chiaro 1 con variante a5 )

a1
a2
a3
a4
b1
b2
b3
b4
c1
c2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="row">
  <div class="col-md-2">
    <div class="c-line lightgrey-bg-a1">a1</div>
    <div class="c-line lightgrey-bg-a2">a2</div>
    <div class="c-line lightgrey-bg-a3">a3</div>
    <div class="c-line lightgrey-bg-a4">a4</div>
  </div>
  <div class="col-md-2">
    <div class="c-line lightgrey-bg-b1">b1</div>
    <div class="c-line lightgrey-bg-b2">b2</div>
    <div class="c-line lightgrey-bg-b3">b3</div>
    <div class="c-line lightgrey-bg-b4">b4</div>
  </div>
  <div class="col-md-2">
    <div class="c-line lightgrey-bg-c1">c1</div>
    <div class="c-line lightgrey-bg-c2">c2</div>
  </div>
</div>