Skin Default Colors

Back to Skin SDK

Skin SDK: Skin Colors

Colors for texts, fills, borders etc can be defined using HTML (#AARRGGBB in hexadecimal ) or RGB (R,G,B in decimal ) values , pre-defined colors (green, red, blue etc) or even VDJ Script actions that return a color.

HTML colors should start with the # character, followed by..
  • 2 digits for the hex value of Alpha for transparency (from 00 to FF)
  • 2 digits for the hex value of Red (hexadecimal value from h00 to hFF) (Optional. If not defined, colors will be displayed as solid ones).
  • 2 digits for the hex value of Green (hexadecimal value from h00 to hFF)
  • 2 digits for the hex value of Blue (hexadecimal value from h00 to hFF)

If the #value has 6 digits, no transparency will be applied, so color="#20FF0000" is a semi-transparent red while color="#20FF00" is green-ish color.

RGB colors should follow the pattern R,G,B where..
  • R is the value for Red (decimal value from 0 to 255)
  • G is the value for Green (decimal value from 0 to 255)
  • B is the value for Blue (decimal value from 0 to 255)

E.g. color="255,0,0" for red , color="0,0,255" for blue and color="255,255,0" for yellow.

Color Actions

In some cases you can use VDJ Script actions that return a color as value.

In the following example, the source attribute expects an action that returns a color :

<visual type="color" source="pad_color 1">
<pos x="+19" y="+23"/>
<size width="24" height="2"/>

In the following example, the colorattribute expects a color value/text/shortcut and not an action, thus the action is surrounded by ` (back tilt) characters :

<textzone >
<size width="70-25-10" height="20"/>
<pos x="+6+25+10" y="+6"/>
<text fontsize="15" color="`get_key_color`" weight="bold" align="right" action="get_key"/>

Pre-defined Colors in VirtualDJ

VirtualDJ Skin SDK provides the ability to use one of the pre-defined colors by using its text. E.g. color="red" (equal to color=""#FF0000" or color="255,0,0") or color="darkblue" (equal to color=""#00007F" or color="0,0,128")

Color NameARGB valueHTML hex value
redARGB(255, 255, 0, 0)#FF0000
greenARGB(255, 0, 255, 0)#00FF00
blueARGB(255, 0, 0, 255)#0000FF
whiteARGB(255, 255, 255, 255)#FFFFFF
blackARGB(255, 0, 0, 0)#000000
yellowARGB(255, 255, 255, 0)#FFFF00
cyanARGB(255, 0, 255, 255)#00FFFF
magentaARGB(255, 255, 0, 255)#FF00FF
grayARGB(255, 127, 127, 127)#7F7F7F
orangeARGB(255, 255, 127, 0)#FF7F00
darkredARGB(255, 128, 0, 0)#7F0000
darkgreenARGB(255, 0, 128, 0)#007F00
darkblueARGB(255, 0, 0, 128)#00007F
darkyellowARGB(255, 128, 128, 0)#7F7F00
darkcyanARGB(255, 0, 128, 128)#007F7F
darkmagentaARGB(255, 128, 0, 128)#7F007F
darkorangeARGB(255, 128, 63, 0)#7F3F00
darkgrayARGB(255, 100, 100, 100)#646464
lightgrayARGB(255, 216, 216, 216)#D8D8D8
pinkARGB(255, 230, 150, 150)#E69696
beigeARGB(255, 255, 255, 200)#FFFFC8
marineARGB(255, 74, 134, 230)#4A86E6
violetARGB(255, 150, 0, 255)#9600FF
transparentARGB(0, 0, 0, 0)#000000
noneARGB(0, 0, 0, 0)#000000
resetARGB(0, 0, 0, 0)#000000

The following code will display a button with gray fill and light gray border when off (play_pause returns false = deck is stopped) and green fill with white border when on (play_pause returns true = deck is playing)

<button action="play_pause">
<off color="#404040" border="#AAAAAA" border_size="2" />
<on color="green" border="white" border_size="2" />

Custom defined Colors

You can also define your own custom colors and later use their name in your code. See <define>

<!-- Define the color here -->
<define color="myoffcolor" value="#156c89" deck="1"/>
<deck deck="1">
<button action="play_pause">
<off color="myoffcolor" /> <!-- use the defined color here -->

Back to Skin SDK