Color & Effects

Color Model

All colors in Varve are represented as ManagedColor, a discriminated union that supports four color modes:

• RGB — sRGB color with bit-depth-aware channels (8-bit 0-255, 16-bit 0-65535, or float 0-1)
• CMYK — Cyan, Magenta, Yellow, Key (black) percentages for print production
• Grayscale — Single channel grayscale
• Spot — Named spot color (e.g., Pantone) for specialized print output

The ColorPicker supports all four modes with a tabbed interface. You can switch between RGB, CMYK, Grayscale, and Spot color selection at any time. A Gamut Warning indicator alerts you when a color falls outside the printable CMYK gamut. Numeric fields adapt to the document's precision: 0-255 for 8-bit documents, 0-65535 for 16-bit, and 0-1 with decimals for float documents. Editing one channel carries the untouched channels at full precision, and 16-bit/float values survive save and reopen exactly.

Document Color Settings

The Inspector's Document Color section (no selection required) controls the document's color intent:

• Mode — Assign RGB, CMYK, or Grayscale as the working mode. Assignment changes intent only; existing colors keep their values and are converted at export.
• Precision — 8-bit, 16-bit, 16f, or 32f. Sets the storage depth for newly authored colors; existing values are never rewritten.
• Blend space — sRGB or linear-light compositing.

File → Document Color Mode… (also in the command palette) opens the Assign vs Convert dialog: Assign changes the working mode without rewriting values, Convert rewrites every process color in one undoable transaction (analytical in the browser; profile-accurate ICC conversion via the desktop engine).

Color Conversion

Varve includes a full analytical color conversion pipeline (no ICC files needed for basic operations):

• sRGB ↔ Linear RGB ↔ XYZ ↔ CIELAB ↔ Oklab ↔ CMYK
• Perceptual color difference (ΔEOK) for quality assessment
• Gamut mapping via binary-search chroma reduction

For print production, Varve also supports ICC-profile-aware conversion with bundled profiles for common RGB and CMYK standards (sRGB, Adobe RGB, Fogra39, GRACoL, SWOP).

Background Removal

Select an image and choose a user-facing mode: Fast for a local heuristic on simple backgrounds, Auto for the best available general-purpose local model, or High quality for difficult hair, fur, foliage, and thin edges. Auto prefers the optional IS-Net model when installed and otherwise uses bundled U²-NetP. High quality uses downloadable BiRefNet Lite where the available provider and memory budget are safe.

Model downloads require explicit consent, are checksum-verified, and stay on the device. A browser or desktop provider can refuse a model before an unsafe allocation; when that happens, Varve reports the actual model used instead of silently calling the result high quality. Review the mask on the checkerboard, white, and black backgrounds before applying it. The source image stays intact, and the mask can be refined with the brush or trimap tools and undone like any other document edit.

These models estimate foreground alpha. They are not a guarantee of true physical matting for glass, smoke, steam, or other translucent material; use the trimap editor and inspect the result against the final background for those cases.

Fill System

Every shape supports a stack of fills rendered from top to bottom. Each fill has its own opacity and blend mode:

Solid Fill

A single color fill. Select a color from the color picker, then adjust opacity with the alpha slider.

Gradient Fill

Varve supports four gradient types:

• Linear — Color transitions along a line with configurable angle (0-360°)
• Radial — Color transitions outward from a center point
• Angular — Color transitions around a center point (conic gradient)
• Diamond — Color transitions outward in a diamond pattern

Each gradient has a transform matrix for precise positioning (Figma-style gradient handles). Add and remove color stops, adjust their positions, and choose between smooth and stepped interpolation.

Image Fill

Fill a shape with a raster image. Varve's ImageCache handles async loading with LRU eviction (max 200 entries). The fill respects the shape's bounds and can be scaled via the imageFit property (cover, contain, fill).

Image Palette Extraction

Select one image, open the Appearance tab, and expand Palette beside Paint Library. Varve decodes a bounded preview of the source and, when the image is cropped, analyses the visible crop (a Full image choice is available). The calculation is local and deterministic: image pixels are not uploaded and no model download is required.

1. Choose a requested count from 3–12 colours and select Analyze.
2. Review extracted swatches with their coverage and role candidates. Transparent pixels are ignored rather than treated as a colour.
3. Use the HEX copy action, apply an extracted colour as a fill, or save the swatches to the document.
4. Review Derived harmonies and Accessible pairs. Harmony colours are generated suggestions, not colours sampled from the image.

Accessible pairs use the shared WCAG 2.1 contrast calculation: 4.5:1 for body-text AA, 3:1 for large-text AA, and the corresponding AAA thresholds. These checks are a review aid; final contrast still depends on typography, anti-aliasing, display, and export profile.

Save as color tokens creates new document variables without replacing existing variables. Both swatch and variable saves are ordinary document updates and can be undone.

Strokes

Each shape can have multiple strokes, each with independent styling:

• Weight — Stroke thickness in pixels
• Color — Supports all ManagedColor types
• Dash pattern — Array of dash/gap lengths (e.g., [4, 2] for dashed lines)
• Cap style — Butt, Round, or Square
• Join style — Miter, Round, or Bevel
• Miter limit — Maximum miter length before bevel is used

Effects

Varve's effects engine supports multiple effects per node, each with independent blend mode and opacity:

• Drop Shadow — Offset shadow with configurable blur, spread, and color. Renders using the canvas shadow API with proper per-effect blend mode isolation.
• Inner Shadow — Shadow inset within the shape bounds. Uses clip + blur technique for accurate rendering.
• Layer Blur — Blurs the entire layer content with configurable radius.
• Background Blur — Blurs the content behind the layer (requires offscreen canvas compositing).
• Outer Glow — No-offset shadow effect that creates a glow around the shape.
• Inner Glow — No-offset shadow inset within the shape.

Blend Modes

Varve supports 18 blend modes, applied per-fill and per-effect:

• Normal — Standard alpha compositing
• Multiply, Screen, Overlay, Darken, Lighten — Standard layer blending
• Color Dodge, Color Burn, Hard Light, Soft Light — Advanced blending
• Difference, Exclusion — Difference-based blending
• Hue, Saturation, Color, Luminosity — Non-separable W3C L*C*h blend modes
• Pass Through — Group blend mode that passes children through unblended
• Plus Darker, Plus Lighter — Additive and subtractive blending

Color Swatches

Save frequently used colors as swatches for quick access. Swatches are stored in the document and persist across sessions. You can add, remove, update, and apply swatches through the Inspector's color picker.

Color Mode Switching

Documents can be switched between RGB, CMYK, and Grayscale color modes. When switching, Varve converts all document colors using analytical conversion math. This is useful for preparing designs for both screen and print output.