Los colores y los degradados

RRGGBB, transparencia, y las ocho esquinas.

La escritura

Un color se escribe en hexadecimal, sin almohadilla:

<color>2E447C</color>       <!-- opaco -->
<color>2E447C80</color>     <!-- medio transparente -->

6 caracteres: RRGGBB, opaco;
8 caracteres: RRGGBBAA, los dos últimos dan la opacidad — 00 invisible, 80 a medias, FF opaco.

Los valores de transparencia más útiles

El código de un color lo conoce todo el mundo. Los dos caracteres de la opacidad, mucho menos:

Opacidad	Escribir	Opacidad	Escribir
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 % — opaco	`FF`

El cálculo, si tu valor no está: el porcentaje × 255, escrito en hexadecimal.

Los degradados

box e image aceptan un color por borde o por esquina. Basta con dar dos para obtener un degradado.

Propiedad	Efecto
`colorTop` + `colorBottom`	degradado vertical
`colorLeft` + `colorRight`	degradado horizontal
`colorTopLeft`, `colorTopRight`, `colorBottomLeft`, `colorBottomRight`	degradado en las cuatro esquinas

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

Un degradado del negro medio transparente al transparente total: el clásico velo bajo el que un título sigue siendo legible sea cual sea la imagen de detrás.

Teñir una imagen

En un componente image, color no rellena: multiplica la imagen. Una imagen blanca toma por tanto exactamente el color dado — así se recolorea un icono sin rehacer el archivo.

<image name="etoile">
  <path>${root}/data/arts/etoile-blanche.svg</path>
  <color>FFC24B</color>      <!-- la estrella se vuelve dorada -->
</image>