Les couleurs et les dégradés

RRGGBB, transparence, et les huit coins.

L’écriture

Une couleur s’écrit en hexadécimal, sans dièse :

<color>2E447C</color>       <!-- opaque -->
<color>2E447C80</color>     <!-- à moitié transparent -->

6 caractères : RRGGBB, opaque ;
8 caractères : RRGGBBAA, les deux derniers donnent l’opacité — 00 invisible, 80 à moitié, FF opaque.

Les valeurs de transparence les plus utiles

Le code d’une couleur, on le connaît. Les deux caractères de l’opacité, beaucoup moins :

Opacité	À écrire	Opacité	À écrire
0 % — invisible	`00`	60 %	`99`
10 %	`1A`	70 %	`B3`
20 %	`33`	75 %	`BF`
25 %	`40`	80 %	`CC`
30 %	`4D`	90 %	`E6`
40 %	`66`	95 %	`F2`
50 %	`80`	100 % — opaque	`FF`

Le calcul, si votre valeur n’y est pas : le pourcentage × 255, écrit en hexadécimal.

Les dégradés

box et image acceptent une couleur par bord ou par coin. Il suffit d’en donner deux pour obtenir un dégradé.

Propriété	Effet
`colorTop` + `colorBottom`	dégradé vertical
`colorLeft` + `colorRight`	dégradé horizontal
`colorTopLeft`, `colorTopRight`, `colorBottomLeft`, `colorBottomRight`	dégradé aux quatre coins

<box name="ombre-du-haut">
  <pos>0 0</pos>
  <size>1 0.3</size>
  <colorTop>00000080</colorTop>
  <colorBottom>00000000</colorBottom>
</box>

Un dégradé du noir à moitié transparent vers le transparent complet : le classique voile sous lequel un titre reste lisible quelle que soit l’image derrière.

Teinter une image

Sur un composant image, color ne remplit pas : elle multiplie l’image. Une image blanche prend donc exactement la couleur donnée — c’est ainsi qu’on recolore une icône sans refaire le fichier.

<image name="etoile">
  <path>${root}/data/arts/etoile-blanche.svg</path>
  <color>FFC24B</color>      <!-- l’étoile devient dorée -->
</image>