Colors

SalamiVG has a few simple ways to interact with programmable colors.

How to use colors in SalamiVG

Currently, there are three places where you would use colors in a SalamiVG sketch:

1. The fill property on any tag
2. The stroke property on any tag
3. The setBackground() method on the Svg class

Here are some examples:

renderSvg({}, svg => {
  svg.setBackground('#000')
  svg.fill = ColorRgb.fromHex('#eda')
  svg.stroke = hsl(245, 0.5, 0.8, 0.9)
})

As demonstrated in the above example, there are several classes and functions available to you to create and use colors in SalamiVG.

Strings

If you don't need any fancy programmability in your colors, it is completely acceptable to use string primitives for your colors. For example, all of these are valid color strings that can be passed anywhere that a color is needed:

• #000
• #ffffff
• rgb(245, 189, 239)
• hsl(365, 56%, 80%, 1)

ColorRgb

The ColorRgb class will probably be one of the most familiar classes to use for colors. Correspondingly, there is also an rgb helper function which takes the same arguments as the class constructor if you prefer to use that syntax.

Tip

The r, g, b, and a values much always be in the range [0, 1]. If you pass a value outside of this range, you'll see a console warning that the value was automatically clamped to the appropriate range. The a (alpha) value defaults to 1 and is therefore optional.

A common helper function is ColorRgb.fromHex() which instantiates a ColorRgb instance from a hex string. This is useful if you have a palette of hex strings and you want to convert them into mixable colors.

The most useful feature of the ColorRgb class is the mix function, which allows you to linearly interpolate two colors together. This unlocks a whole new world of color programming which can be really fun and interesting.

ColorHsl

ColorHsl is a sibling to the ColorRgb class, but obviously representing the HSL colorspace. Similarly, there is an hsl function that takes the same arguments as the ColorHsl constructor if you prefer. ColorHsl shares most of the functionality provided by ColorRgb with once notable difference: there is no ColorHsl.fromHex() method. To achieve the equivalent functionality, call ColorRgb.fromHex(hex).toHsl().

Tip

The h argument must be in the range [0, 360], but the other arguments (s, l, and a) must be in the range [0, 1].

ColorSequence

The easiest way to create a mixable spectrum of colors is with the ColorSequence class. Unlike ColorRgb and ColorHsl, a ColorSequence cannot be passed as a color value directly. Rather, a ColorSequence allows us to programmatically mix colors from a sequence of colors, which is a fast way to get a cool spectrum without falling back to discrete color values.

There are basically two ways to instantiate a ColorSequence:

1. If you want an evenly-spaced spectrum of colors, you can call ColorSequence.fromColors() which takes an array of colors (hex strings, ColorRgb instances, or ColorHsl instances) and spaces them evenly along the ColorSequence.
2. If you want control over where colors are spaced in your sequence, you can use the ColorSequence constructor to pass pairs of "ColorStops", e.g. new ColorSequence([[0, '#000'], [0.8, ColorRgb.fromHex('#eda')], [1, new ColorHsl(0, 0, 1)]])

Once you have a ColorSequence instance, you can mix the colors together with the at() method, which takes a value in the range [0, 1] and returns a ColorHsl instance. For example:

const sequence = ColorSequence.fromColors(['#3b9', '#a92', '#eda'])
sequence.at(0)   // returns a ColorHsl instance equivalent to '#3b9'
sequence.at(0.5) // returns a ColorHsl instance equivalent to '#a92'
sequence.at(1)   // returns a ColorHsl instance equivalent to '#eda'

Linear gradients

SalamiVG also has simple support for defining linear gradients in your SVG. First, the gradient must be defined with the svg.defineLinearGradient() method. This returns a LinearGradient instance, which can be assigned to fill and stroke properties, or passed to the svg.setBackground method.

Example

const grad = svg.defineLinearGradient({
  colors: [
    '#2E6479',
    '#2D3F74',
  ],
})
svg.setBackground(grad)

Similar to the ColorSequence, the LinearGradient class can either be created from a list of colors (which results in an evenly-spaced gradient), or from a list of stops (number-color pairs, where the number corresponds to the index in range [0, 1] of the color in the gradient). You can see more details in the class typedef