Colour conversion
How scripts convert between hex strings and the [r, g, b, a] arrays colour properties actually store.
Colours read as [r, g, b, a] arrays in 0..1 - the straight-alpha wire form. These two helpers convert between that shape and the familiar hex string.
rgbToHex
rgbToHex(c: number[]): string
[r, g, b, a] in 0..1 to a rrggbb[aa] string.
Determinism: pure.
Worked example: Channels to a hex string
The scene. Three 200 by 200 swatches stacked on the same spot - coral at the back, gold in the middle, teal on top - ready for a script to cross-fade between them.
- The comp Palette: 640 by 360 at 25 fps, 150 frames (6 seconds).
- Coral: a solid layer, at [320, 180], 200 by 200, filled ff5d73.
- Gold: a solid layer, at [320, 180], 200 by 200, filled f2a833.
- Teal: a solid layer, at [320, 180], 200 by 200, filled 2ec4b6.
The script. Add a project script named Hex check and paste:
export const outputs = ["layer_3:transform.opacity"];
export function frame() {
const hex = rgbToHex([0.2, 0.4, 0.8, 1]);
console.log("the mix is", hex);
return hex.startsWith("#") ? 70 : 100;
}
Line by line:
- Line 4: Colours in scripts are [r, g, b, a] arrays in 0..1. rgbToHex() folds one into the familiar rrggbb string - handy for logging and for comparing colours as text.
- Line 5: The string lands in the script's console - readable from the script's status surfaces while you refine the mix.
- Line 6: The branch is just a visible receipt: hex strings always start with #, so the teal swatch settles at 70 percent.
What you see. The teal swatch settles at 70 percent opacity, and the IDE's console strip reports the mixed colour as a hex string.
hexToRgb
hexToRgb(hex: string): number[]
A rrggbb[aa] string to [r, g, b, a] in 0..1.
Determinism: pure.
Worked example: Read a colour's channels
The scene. Three 200 by 200 swatches stacked on the same spot - coral at the back, gold in the middle, teal on top - ready for a script to cross-fade between them.
- The comp Palette: 640 by 360 at 25 fps, 150 frames (6 seconds).
- Coral: a solid layer, at [320, 180], 200 by 200, filled ff5d73.
- Gold: a solid layer, at [320, 180], 200 by 200, filled f2a833.
- Teal: a solid layer, at [320, 180], 200 by 200, filled 2ec4b6.
The script. Add a project script named Warmth gate and paste:
export const outputs = ["layer_3:transform.opacity"];
export function frame() {
const gold = hexToRgb("#f2a833");
return gold[0] > 0.5 ? 80 : 40;
}
Line by line:
- Line 4: hexToRgb() unfolds a hex string into [r, g, b, a] channels in 0..1 - the shape every colour read in scripts uses.
- Line 5: Gold's red channel is strong (0xf2, about 0.95), so the warm branch wins and the teal swatch above thins to 80, letting the warmth bleed through.
What you see. The teal swatch turns slightly translucent (80 percent), tinted by the gold beneath - the branch chosen by inspecting a colour's red channel.