Color & Effects

Color Model

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

• RGB — Standard sRGB color with 8-bit channels (0-255)
• 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.

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).

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).

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.