Colors and gradients

RRGGBB, transparency, and the eight corners.

The spelling

A color is written in hexadecimal, without a hash:

<color>2E447C</color>       <!-- opaque -->
<color>2E447C80</color>     <!-- half transparent -->

6 characters: RRGGBB, opaque;
8 characters: RRGGBBAA, the last two give the opacity — 00 invisible, 80 half, FF opaque.

The most useful transparency values

Everyone knows a color's code. The two opacity characters, much less:

Opacity	To write	Opacity	To write
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`

The math, if your value is not there: the percentage × 255, written in hexadecimal.

Gradients

box and image accept one color per edge or per corner. Giving two is enough to get a gradient.

Property	Effect
`colorTop` + `colorBottom`	vertical gradient
`colorLeft` + `colorRight`	horizontal gradient
`colorTopLeft`, `colorTopRight`, `colorBottomLeft`, `colorBottomRight`	four-corner gradient

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

A gradient from half-transparent black to fully transparent: the classic veil under which a title stays readable whatever the image behind.

Tinting an image

On an image component, color does not fill: it multiplies the image. A white image therefore takes exactly the given color — that is how you recolor an icon without redoing the file.

<image name="etoile">
  <path>${root}/data/arts/etoile-blanche.svg</path>
  <color>FFC24B</color>      <!-- the star turns golden -->
</image>