Color and Brightness

Color and brightness are handled a bit differently in Vixen 3.  To understand the color system in Vixen 3, you need to know a little bit about color models.

RGB (Red Green Blue)

The RGB (Red, Green, Blue) color model is the most well known and is what is used most commonly in other sequencers. It defines a color space in terms of three components:

  • Red, which ranges from 0-255
  • Green, which ranges from 0-255
  • Blue, which ranges from 0-255

The RGB color model is an additive one. In other words, Red, Green and Blue values (known as the three primary colors) are combined to reproduce other colors. For example, the color “Red” can be represented as [R=255, G=0, B=0], “Violet” as [R=238, G=130, B=238], etc.

Its common graphic representation is the following image:

RGB color space


HSB (HSV) color space

The HSB (Hue, Saturation, Brightness) color model defines a color space in terms of three constituent components:

  • Hue : the color type (such as red, blue, or yellow).
    • Ranges from 0 to 360° in most applications. (each value corresponds to one color : 0 is red, 45 is a shade of orange and 55 is a shade of yellow).
  • Saturation : the intensity of the color.
    • Ranges from 0 to 100% (0 means no color, that is a shade of grey between black and white; 100 means intense color).
    • Also sometimes called the “purity” by analogy to the colorimetric quantities excitation purity.
  • Brightness (or Value) : the brightness of the color.
    • Ranges from 0 to 100% (0 is always black; depending on the saturation, 100 is the brightest version of the color in the given hue and saturation.).

Its common graphic representation is the following image:

The conical representation of the HSV model; Wikipedia image.

The HSB model is also known as HSV (Hue, Saturation, Value) model. The HSV model was created in 1978 by Alvy Ray Smith. It is a nonlinear transformation of the RGB color space. In other words, color is not defined as a simple combination (addition/substraction) of primary colors but as a mathematical transformation.

Note: HSV and HSB are the same, but HSL is different.  HSL and other color models are beyond the scope of this document and will not be explained here.

Color Models and Light Sequencers

As mentioned earlier, most sequencers other than Vixen 3 use the RGB color model.  While this corresponds conveniently with most basic RGB lighting devices, it’s not particularly convenient for actually working with color and brightness transitions in lighting design.  For lighting applications, the HSV color model is a more suitable system for conceptually working with color and brightness.  It is actually more useful to think about color and to interact with it using the parameters of the HSV system.  For example, in the RGB color model, if you wanted to make the lights brighter, you would have to take all three values and increase them proportionally.  In the HSV model, you would just increase the V value.  Similarly, if you want to make a color more or less vibrant, you would increase or decrease the saturation.

Of the 3 parts of a HSV color, only two parts describe the color: the Hue and Saturation.  The Value describes how bright the color is.  In vixen 3, the Hue and Saturation are controlled by the color controls (color picker or gradient editor). This describes the color itself.   The Value is always tied to the brightness controls (intensity or curve).  This is how bright the light is.

You’ll notice in the color picker, that the V is always 100.  You can only choose the full brightness version of any given color.    This is often a point of confusion with users who are used to other sequencers. If you want to adjust the intensity, you don’t use the color picker.  That is done using the intensity controls.  For example, if you wanted to create a dark green color, you might be familiar with using like RGB values 17,130,41.  This translates to a Hue of 133, Saturation of 87 and a Value of 51.  The value will always be 100 on the Vixen 3 color picker.  Vixen will automatically correct this to 100, and you will see your RGB values change to 33, 255, 80.  This looks like a bright green.  There’s nothing wrong here, this is how it is designed to work.  To get that dark green, you then need to set the intensity (or curve, depending on the effect) to 51.

Colors and Gradients

The word Color is used to refer to a color that doesn’t change over time.  Colors that change over time are referred to as Gradients.  Gradients contain one or more colors, and the timing relationship of when the colors change.  The time relationship is not absolute.  It is a percentage relative to the length of the effect.

Intensity and Curves

Similar to the concept of colors and gradients above; an intensity is a fixed brightness value.  A Curve is a change in brightness over time.  The time relationship is not absolute.  It is a percentage relative to the length of the effect.


*Color model explanations and imagery from

Preview Zoom In/Out

While the new (in 2013) preview has really helped people plan their displays and improved sequencing with the ability to see instant feedback, you have not been able to really get in and fine tune the props displayed on the screen.

After the alignment tools added last month, the second most requested feature for the preview was the ability to zoom in and out.

You can now zoom in and out with the mouse wheel, the Ctrl+ and Ctrl- keyboard buttons or the slider located in the status bar.

As usual, here’s a video showing off this new feature. In addition, the video also shows how to add a snowman with 3 body parts, a left eye, a right eye, a nose and a 3 section mouth.

New Preview Align & Distribute Tools


I’ve (finally) added alignment tools to the preview. You know… when you’re adding 16 micro-trees to your display and you want them all to be the exact same size and shape, aligned to the same place and evenly distributed. Well, rejoice!

You see (from left to right in the above image):

  • Align Left
  • Align Right
  • Align Top
  • Distribute Horizontally
  • Copy Properties
  • Align Horizontally
  • Align Vertically
  • Align Bottom
  • Distribute Vertically

Check out the video for a demonstration of adding, aligning and distributing micro trees and arches.

Starburst Prop Added

I’ve started planning my display for next year and wanted to add a prop that I’ve been calling a starburst. I started drawing it by hand in the Vixen 3 preview, but that was just a little bit annoying. Plus, I had to link each of the strings individually for each one I added to my preview. I’ve seen these in videos of other people’s displays, so I know this is not unique to my display — which means other people have or will have the same type of features in their displays.

So, for a quick example of how to add the prop to your element tree, add it to your display preview and apply a couple effects to it, check out the video.

Check out the video:

Vixen 3.0.6 Released