Color, fills, and gradients

Every fill in Formo goes well past flat color: gradients, images, and shader fills all live in the same panel, stackable on one object, switchable with a single click, and every color field in that panel can be formula-bound the same way any other property can.

Fills — solid color, gradients, images, and shaders

Where fills live. Select any object, and its Fill section shows a type-toggle row: Solid, Linear, Radial, Angular (three distinct gradient shapes), Image, and Shader. Click any of them to switch the current fill's type instantly, no need to delete and re-add.

Solid. A single flat color, picked from the color picker (covered next).

Gradient. Three shapes:

Linear fades in a straight line

Radial fades outward from a center point

Angular sweeps around a center like a color wheel. Each has its own draggable handles directly on the canvas for adjusting the fade's direction and spread.

Image. Drop in a picture as a fill. You can paste an image directly from your clipboard while the Image tab is active: copy an image anywhere, paste it into the fill, and it's applied immediately, no file browser required. Once an image is placed, a Scale Mode dropdown controls how it fits the shape: Fill crops to cover the whole area with no gaps, Fit shrinks the whole image in without cropping (letting the shape's own background show at the edges if the proportions don't match), Crop lets you pick exactly which region of the source image shows through, and Tile repeats the image edge-to-edge instead of stretching it — the one you want for a small repeating pattern or texture rather than a single hero image.

Shader. A programmable fill built from adjustable parameters instead of a fixed color. Presets, reactive bindings, and everything else it can do get their own dedicated article Shader fills.

Any color field is formula-bindable. This isn't limited to shader parameters: a plain Solid fill's color, a gradient stop, a stroke color, all carry the same fx binding control every other property in Formo does. Bind a solid fill's color to a formula and it recalculates the same way a bound size or position would; the OKLCH picker below happens to make that binding easy to reason about, since lightness and hue are independent numbers you can drive separately.

Adding a new fill. An Add paint action sits above the Fill section. Click it to stack a new fill on top of whatever's already there (more on stacking in section 4).

The OKLCH color picker — lightness, saturation, and hue on their own

Formo's color picker isn't limited to RGB: it has an OKLCH mode alongside RGB and LAB, switchable right in the picker.

Why it's different from RGB. In RGB, lightening or saturating a color usually shifts more than one channel at once. Nudge one slider and the color drifts in ways you didn't intend. OKLCH's three channels — lightness, chroma (saturation), and hue — are independent: adjust lightness, and the hue and saturation hold still; adjust hue, and lightness and saturation don't move.

Switching to it. The color picker has a mode toggle for RGB / LAB / OKLCH. Pick OKLCH, and the picker's wheel and sliders switch to lightness/chroma/hue directly.

Typing a hex value directly. Alongside the wheel and sliders, a plain hex field takes a 6-digit code typed or pasted straight in — useful for matching a brand color exactly rather than eyeballing it on a wheel, and it works no matter which of the three modes (RGB/LAB/OKLCH) the rest of the picker is currently in.

The picker's own eyedropper. A dedicated eyedropper button inside the picker itself activates the same Eyedropper tool that lives on the main toolbar, as a one-shot pick: click it, click anywhere on the canvas, and whatever color is under your cursor feeds straight back into the fill you had open, without you having to leave the panel or separately reopen it afterward.

Document colors — edit a color everywhere at once

Colors in Formo aren't copies baked independently into each shape. A color you've used more than once is a single shared value under the hood.

Where to find it. With nothing selected, the right panel shows Document colors: every color actually in use across the whole document, listed by how often it's used.

Editing it. Change a color from this panel, and every element using that exact color updates simultaneously, document-wide, not just the one shape you happened to select last.

Why this is different from editing a shape's own fill. Recoloring one shape's fill directly, from that shape's own Fill section, only affects that shape (or your current selection); it splits off an independent copy rather than touching the shared value. Editing from the Document Colors panel is the deliberate, "change this everywhere it's used" action.

Stacking multiple fills, strokes, and blend modes

A single object isn't limited to one fill or one stroke.

Adding another fill. Click Add paint in the Fill section as many times as you like. Each one stacks on top of the previous, layered in paint order, exactly like layers in an image editor. A solid color under a gradient under a shader is a completely normal, supported stack.

Reordering and toggling. Each fill in the stack has its own visibility toggle and its own opacity, independent of the others: hide one to preview the shape without it, or dial back one layer's opacity while leaving the rest untouched.

Strokes work the same way: the Stroke section carries its own independent "Add paint" action, so a shape can have multiple stacked strokes exactly as it can have multiple stacked fills. A single stroke's own controls go well beyond a color and a width: an eye toggle and opacity percentage, Weight, a dash-and-gap pattern, Position, Join, etc.

Visibility, color, opacity (top row). The eye icon toggles the stroke on/off. The swatch is the stroke's color. Click to open the picker. 100% is opacity, specific to the stroke.

Weight. The "1" is the stroke's weight in pixels. Click and type, or drag to scrub.

Dash and Gap. This is a composite dash-pattern control: a dash-length field and a gap-length field, sitting together in the row after Weight. Both are confirmed to render "∞" specifically when their value is 0 — meaning "no dash pattern set, this is a solid line" rather than showing a literal zero. So the ∞ you're seeing is the gap (or dash) field telling you it's currently solid, not a fixed decorative icon.

The link/unlink toggle. Sitting between dash and gap is a toggle button (a chain-link icon, not a padlock) that links dash and gap so they move together when you edit either one; click it to unlink them and set each independently. It's hover-revealed when linked (fades in on hover, so it doesn't clutter the row when you're not using it) and stays visible once unlinked, as a reminder that you can re-link it.

Position: CENTER. The stroke sits centered on the shape's edge (vs. Inside or Outside).

Join: MITER. Corners meet in a sharp point (vs. Round or Bevel).

Miter Limit: 26. Only shown because Join is set to Miter; controls how sharp a corner is allowed to get before it's clipped off instead of tapering to an infinite.

Next up — Shader fills: presets, reactive parameters, and making a fill respond to the mouse, time, and other shapes