Color (vuo.color)

Nodes for creating, deconstructing, and mixing colors.

Color Models

A color can be represented in various ways by these nodes:

• The HSL color model corresponds to the way that many people think about colors. An HSL color is represented by three numbers ranging from 0 to 1. The first number represents the hue, the second number represents the saturation, and the third number represents the lightness.
  • Example: Bright red has HSL value [0, 1, 0.5].
• The RGB color model is often used to represent colors on a computer. An RGB color is represented by three numbers ranging from 0 to 1. The first number represents the amount of red, the second number represents the amount of green, and the third color represents the amount of blue. The red, green, and blue components of an RGB color are combined additively, so the result is like mixing light.
  • Example: Bright red has RGB value [1, 0, 0].
  • Example: Pale yellow has RGB value [1, 1, 0.5].
• The CMYK color model is often used to represent colors in printing. A CMYK color is represented by four numbers ranging from 0 to 1. The first number represents the amount of cyan, the second number represents the amount of magenta, the third number represents the amount of yellow, and the fourth color represents the amount of black (also called key). The cyan, magenta, yellow, and black components of a CMYK color are combined subtractively, so the result is like mixing ink.
  • Example: Bright red has CMYK value [0, 1, 1, 0].
  • Example: Pale yellow has CMYK value [0, 0, 0.5, 0].
• Vuo’s Get ICC Color Values and Make ICC Color nodes can convert colors to and from other colorspaces, such as CIE Lab* and CIE XYZ, or any other ICC profile such as those provided by the International Color Consortium and Adobe, and those bundled with printers, scanners, cameras, and displays.
  • To get information about an ICC color profile, such as how many components it uses, double-click the ICC file in Finder, and it will open in the macOS ColorSync Utility. In the “Header” section, the “Space” field shows the number and meaning of the profile’s components.

Vuo natively stores colors as floating-point values in the sRGB colorspace, and treats colors the same regardless of whether they were created using HSL, RGB, or CMYK. For example, you can connect the output port of a Make HSL Color node to any input port that accepts a color, including a Get RGB Color Values node. Vuo can also represent non-sRGB colors by using values outside the standard 0–1 sRGB range.

Opacity

In addition to the numbers representing HSL, RGB, or CMYK, a color can be described by another number representing its opacity (also known as alpha). This number also ranges from 0 to 1, with 1 being fully opaque and 0 being fully transparent. When opacity is included in a color model, the abbreviations are HSLA, RGBA, and CMYKA, respectively.

Sorting

For nodes such as Sort List and Is Less Than that impose an ordering among colors, the sort is performed primarily on the colors' respective R-values, secondarily on their G-values, next on their B-values, and finally on their opacity values.

Example compositions:

• Average Colors: Displays the average color that falls between a chosen color and each of red, green, and blue.
• Change Saturation and Lightness: Displays colors of different hues and varies their saturation and lightness as the mouse moves.
• Pick Color: Samples a color from an image, then displays that color's hexadecimal value in a preview well.

Nodes:

• Average Colors (vuo.color.average): Finds the average of the given colors.
• Blend Colors (vuo.color.blend): Blends two colors into a single color.
• Convert Color List to DMX (vuo.color.list.dmx): Given a list of colors, creates a list of channel intensity values which can be sent to a DMX device using the Send Art-Net Messages node.
• Convert DMX to Color List (vuo.color.dmx.list): Given a list of channel intensity values (received from a DMX device using the Receive Art-Net Messages node), creates a list of colors.
• Get CMYK Color Values (vuo.color.get.cmyk): Gives the CMYK (cyan, magenta, yellow, key/black) values of a color.
• Get HSL Color Values (vuo.color.get.hsl): Gives the HSLA (hue, saturation, lightness, alpha/opacity) values of a color.
• Get Hex Color Value (vuo.color.get.hex): Gives the hexadecimal color code representation of a color.
• Get ICC Color Values (vuo.color.get.icc): Gives the component values of a color in a particular colorspace.
• Get RGB Color Values (vuo.color.get.rgb): Gives the RGBA (red, blue, green, alpha/opacity) components of a color.
• Make CMYK Color (vuo.color.make.cmyk): Creates a color from CMYK (cyan, magenta, yellow, key/black) values.
• Make Gradient Palette (vuo.color.palette.make.gradient): Creates a color palette that transitions between the given anchor colors.
• Make HSL Color (vuo.color.make.hsl): Creates a color from HSLA (hue, saturation, lightness, alpha/opacity) values.
• Make Hex Color (vuo.color.make.hex): Creates a color from a hexadecimal color code.
• Make ICC Color (vuo.color.make.icc): Creates a color from component values in a particular colorspace.
• Make Palette from Image (vuo.color.palette.make.image): Creates a color palette based on the colors in an image.
• Make RGB Color (vuo.color.make.rgb): Creates a color from RGBA (red, green, blue, alpha/opacity) components.