Overview

Colors can be defined for many skin controls, such as text controls (<textcolor>), button controls, layout controls, and so on.  In addition, colors can be altered using the <colordiffuse> tag, or set differently when controls are in focus or not in focus (<textcolorNoFocus>, <disabledcolor>, <dimColor>). See the specific Skin Controls to learn which tags or attributes are supported for different controls.

Defining Colors

Colors can be specified in the following ways:

• Named colors from the W3C standard HTML palette, for example:
  
  • White
  • Gainsboro
  • White:#60 (white using a hexadecimal alpha-channel value of 60)
  • White:96 (white using a decimal alpha-channel value of 96)
• Hexadecimal values in the format RRGGBB (for example, 330099), where:
  
  • RR is the red value
  • GG is the green value
  • BB is the blue value
• Hexadecimal values in the format AARRGGBB (for example, 20C8C8C8), where:
  
  • AA is the alpha-channel value (this controls the transparency)
  • RR is the red value
  • GG is the green value
  • BB is the blue value

Color names and hexadecimal values are not case sensitive, and can be specified in upper case, lower case, or any mixture.

Special cases

There is one MediaPortal skin file that has different rules, namely the file SplashScreen.xml.  This file is processed before the full MediaPortal environment has been established.  As a result, only the following ways of specifying colors are valid:

• Named colors
• Hexadecimal RRGGBB or AARRGGBB values, prefixed with the hash character ("#").  Examples:
  #8080FF
  #2030BB40
  Note that the alpha-channel value AA is accepted for colors specified in SplashScreen.xml, but the value is ignored.

Important: the hash prefix must not be specified for hexadecimal colors in other MediaPortal skin files.

Selecting Colors

A convenient way of selecting colors is to use a "color picker".   Many are available on the web, but this HTML Color Picker provides color samples, and displays the hexadecimal value of the color selected.

Examples

<!-- named colors -->
<textcolor>White</textcolor>
<textcolor>Gainsboro</textcolor>
<!-- named color with hexadecimal alpha-channel -->
<textcolor>White:#60</textcolor>
<!-- named color with decimal alpha-channel -->
<textcolor>White:96</textcolor>
<!-- hexadecimal color with default alpha channel (default: FF) -->
<textcolor>330099</textcolor>
<!-- hexadecimal color with non-default alpha channel -->
<textcolor>20c8c8c8</textcolor>