Color

The Color object can be used to define, detect, modify and mix colors. Colors can be defined using either a string value or an object. All colors are converted to a Color object with r, g, b, h, s, l and an a value.

bg = new BackgroundLayer
    backgroundColor: "#28affa"

print bg.backgroundColor
# <Color "#28affa">

Supported color models: CSS Names, HEX, RGB, RGBA, HSL and HSLA.

# Multiple ways to define the same color: 
blue = new Color("blue")
blue = new Color("#28AFFA")
blue = new Color("rgb(255, 0, 102)")
blue = new Color("rgba(255, 0, 102, 1)")
blue = new Color("hsl(201, 95, 57)")
blue = new Color("hsla(201, 95, 57, 1)")

You can also create new Color objects and pass in strings, or objects:

# Define a color with a HEX string 
bg = new BackgroundLayer
    backgroundColor: new Color("#fff")

# Define a color with an RGB object 
layerA = new Layer
    backgroundColor: new Color(r: 255, g: 255, b: 255)

# Define a color with an HSL object 
layerB = new Layer
    backgroundColor: new Color(h: 360, s: 1, l: 1, a: 1)

Color Models

You can animate the background color, text color and shadow color of a layer. By default, color transitions use HUSL. With the colorModel property, you can specify in which model to animate. We support rgb, hsl and husl.

bg = new BackgroundLayer
    backgroundColor: "blue"

# Animate in RGB 
bg.animate
    properties:
        backgroundColor: "red"
    colorModel: "rgb"

color.lighten(amount)

Add white and return a lightened color.

Arguments

amount — A number, from 0 to 100. Set to 10 by default.

# Create a new color, lighten it 
blue = new Color("#28affa").lighten(20)

layerA = new Layer
    backgroundColor: blue

color.darken(amount)

Add black and return a darkened color.

Arguments

amount — A number, from 0 to 100. Set to 10 by default.

# Create a new color, darken it 
blue = new Color("#28affa").darken(20)

layerA = new Layer
    backgroundColor: blue

color.saturate(amount)

Increase the saturation of a color.

Arguments

amount — A number, from 0 to 100. Set to 10 by default.

# Create a new Color, saturate it 
blue = new Color("#877DD7").saturate(100)

layerA = new Layer
    backgroundColor: blue

color.desaturate(amount)

Decrease the saturation of a color.

Arguments

amount — A number, from 0 to 100. Set to 10 by default.

# Create a new Color, desaturate it 
blue = new Color("#28affa").desaturate(25)

layerA = new Layer
    backgroundColor: blue

color.grayscale()

Return a fully desaturated color.

# Create a new Color 
yellow = new Color("yellow")

# Convert it to gray 
gray = yellow.grayscale()

layerA = new Layer
    backgroundColor: gray

Color.mix(colorA, colorB, fraction, limit, model)

Blend two colors together, optionally based on user input. The fraction defines the distribution between the two colors, and is set to 0.5 by default.

Arguments

colorA — A color, the first one colorB — A color, the second one fraction — A number, from 0 to 1. (Optional) limit — A boolean, set to false by default. (Optional) model — A string, the color model used to mix. (Optional)

# Mix red with yellow 
orange = Color.mix("red", "yellow", 0.5)

The limit defines if the color can transition beyond its range. This is applicable when transitioning between colors, using Utils.modulate. Below, the limit is set to true, so the transition cannot extend beyond the second color.

# Create new Layer 
layerA = new Layer
    backgroundColor: "red"

# Enable dragging 
layerA.draggable.enabled = true

# On move, transition its color to yellow 
layerA.on Events.Move, (offset) ->

    # Map the dragging distance to a number between 0 and 1 
    fraction = Utils.modulate(offset.x, [0, Screen.width], [0,1], true)

    # Mix the colors, enable the limit, transition in HUSL 
    layerA.backgroundColor =
        Color.mix("red", "yellow", fraction, true, "husl")

Color.random()

Returns a Color instance with a random color value set.

random = Color.random()

Color.isColor(value)

Checks if the value is a valid color object or color string. Returns true or false.

Arguments

value — An object or string, representing a color

print Color.isColor(new Color "red") # true 
print Color.isColor("red") # true

Color.isColorObject(value)

Checks if the value is a valid color object. Returns true or false.

Arguments

value — An object, representing a color

print Color.isColor(new Color "red") # true 
print Color.isColor("red") # false

Color.isColorString(value)

Checks if the value is a color string. Returns true or false.

Arguments

value — A string, representing a color

print Color.isColorString("red") # true 
print Color.isColorString("#28affa") # true

Color.toHexString()

Returns the hexadecimal string representation of a color.

Arguments

value — An object or string, representing a color

blue = new Color("blue")
print blue.toHexString() # "#0000ff"

Color.toRgbString()

Returns the RGB string representation of a color.

Arguments

value — An object or string, representing a color

blue = new Color("blue")
print blue.toRgbString() # "rgb(0, 0, 255)"

Color.toHslString()

Returns the HSL string representation of a color.

Arguments

value — An object or string, representing a color

blue = new Color("blue")
print blue.toHslString() # "hsl(240, 100%, 50%)"