Paint

Colour and fills

The palette

Each artwork has a palette, shown in the Palette panel and in the strip beside the canvas. The two current colours sit at the top of the strip, as in Illustrator: the solid square is the fill, the hollow one the stroke, and the one in front is active. Clicking a swatch sets the active one, and recolours the selection's fills or strokes to match; clicking the swatch it already holds opens that swatch's editor. A selection with only fills, or only strokes, takes the swatch there whichever square is in front, and that square comes forward. Click the square behind to bring it forward, or press X; click the one in front to pick its colour (see Free colours below). ⇧X or the arrow swaps the two colours. The pencil and paint bucket paint with whichever colour is in front, and the eyedropper picks up into it (right-click: into the one behind). Shapes, text and brush strokes always take the stroke and fill.

On a swatch, S and F in the top left mark the current stroke and fill, and the role (bg, fg, ac) sits in the bottom right. The small filled corner in the top right means it is a swatch: a colour from the palette. In the strip, drag the background, foreground or accent onto another of the three to swap their roles.

Free colours

A pixel, a shape or text can hold a colour of its own instead of a swatch: a free colour. Free colours and swatches mix freely, even in one layer. A free colour stays exactly as it is when you edit the palette, and a free pixel and a swatch pixel of the same colour count as different to the bucket and the magic wand.

Click the stroke or fill square in front to open a colour picker starting from its colour. Whatever you pick there is a free colour: editing the square never changes the swatch it held. To draw with a swatch, click it in the palette, or right-click it and choose Use as stroke or Use as fill. The eyedropper picks up whichever kind a pixel holds, a free colour even when a swatch has exactly the same colour. Add to palette in that picker makes the free colour a swatch, and links every pixel, shape and text using it. There is no list of free colours: to keep a few at hand, dab them on a pixel layer and pick them up with the eyedropper.

In the Recolour section of the properties, and in an instance's Colour remap, the colour menu also has Free colour... and Detach from swatch: the first replaces a colour with a free colour you pick, the second keeps the colour but stops it following its swatch, only in what is selected. Picking a swatch there links a free colour back to the palette. With an artboard selected, Recolour works on everything on the artboard. To detach a swatch everywhere at once, right-click it and choose Unlink.

Past 24 colours, such as a photograph or anti-aliased edges, Recolour stops listing them and offers Recolour..., which is also there for any selection. Its dialog gathers colours near each other into one row by its Tolerance (0 keeps every colour apart), and every colour in a row becomes the one picked for it. The artwork shows the result as you choose, Cancel puts it back, and Apply is one step to undo.

To change the kind of colour a layer's pixels use, right-click the layers (or groups holding them) in Contents or on the canvas and choose Convert to swatches or Convert to free colours. With a pixel selection, the canvas menu converts only the selected pixels. Converting to swatches links each free colour to a swatch of exactly that colour when the palette has one, and adds a swatch otherwise; background, foreground and accent are never reused. When it adds more than 12 swatches, it groups them by shade, as Group similar shades does. Converting to free colours gives each pixel its swatch's current colour, background, foreground and accent included, and leaves the palette as it is. Undo turns a conversion back in one step.

Always use swatches for colours, in the Artwork tab of Settings, keeps an artwork to its palette: the stroke and fill squares edit their swatches, and colours pasted from other apps are matched to the palette. Turning it on in an artwork that has free colours asks, for each pixel layer using them, whether they become swatches or the layer becomes an image fill; colours on shapes and text become swatches.

To fold similar swatches into one, select them, right-click the one to keep and choose Merge ... colours into this one. Every pixel, shape and text using the others takes the one you kept, and the others are deleted. The background, foreground and accent colours are never merged away.

While you're working in the Palette panel, Delete deletes the selected swatches rather than what's selected on the canvas. Right-click a selected swatch and the menu's lock, duplicate, unlink and delete act on every selected swatch.

The panel's header counts the swatches: the three functional ones (background, foreground and accent), the regular ones, and the steps in colour scales.

A colour scale is a row of swatches blended between two colours: an easy way to build a shading ramp. In its editor, Spacing bunches the steps toward one end, and Blend in picks how the two colours mix: Default (even, perceptual steps that keep their hue), OKLab, OKLCH (round the hue wheel, the short way or the long way), CIELAB, sRGB (the plain mix most pixel-art tools use) or Linear light (brighter in the middle, as light mixes). With its End set to Transparent, a scale is one swatch at falling opacity, a row of tints to paint with, and Steps as a screen turns each tint into the swatch's dots over nothing, fewer at every step. Add colour scale makes one when the stroke and fill are the same swatch.

A swatch's Type can be Composite: a swatch made of others. It draws its Ground, then each ink at its Coverage, either Smooth or on a halftone screen as dots of the ink's colour. Smooth inks mix into what's beneath in the Mix (Layer lays them on like paint), and inks that overlap meet by Blend (Multiply for overprinting). The first ink added is solid on a fine screen (2-pixel cells at 60°, dots on the display's CSS pixels). Inks go down in their order, each over the ones above it in the list; drag one by its handle to change where it sits. A composite follows the swatches it's made of, so changing one of those changes it. Painting a composite at a lower opacity scales every ink's coverage: fewer dots, the ground unchanged. A palette screen is shared, so changing it on the Palette panel's Halftone screens tab changes every ink on it. Cell is the distance between dots in art pixels and Angle turns the whole screen. The screen is laid over the whole artwork, so neighbouring layers share one pattern, and it stays in place when a layer or shape moves. Dots on says what the dots belong to: the artwork, a dot per art pixel at most or judged per output pixel for smooth edges, or the display, measured in its CSS or device pixels and the same size at any zoom. A PNG exported at a larger scale draws them on its own pixels, a CSS pixel being the scale in output pixels; a publication's PDF and PNG draw them at the publication's resolution, a CSS pixel being 1/96 inch. Composite presets... in the Palette panel makes one from the selected swatches: CMYK splits a colour into cyan, magenta, yellow and black dots over white paper, each at its classic angle; Newsprint and Ben-Day are one swatch's dots; Duotone two swatches' dots, overprinting. A colour scale's Steps as can be a screen too: each step is then its start with its end's dots over it, the end's coverage the step's place between them. Deleting a screen leaves each ink on it with a copy of its own. Not supported yet: a browser without WebGPU draws every screen per art pixel on the canvas, so there output and display dots only show in an export; and a composite's inks can't be composites themselves.

Swatch groups keep related shades together. Select two or more swatches and choose Group, in the panel or the right-click menu, or press ⌘G (and ⌘⇧G to ungroup) before clicking anywhere outside the panel; a group shows as one strip in the strip beside the canvas and as a row in the panel. Click a group's row to select all its swatches, double-click its name to rename it, and use the arrow to list its swatches underneath. Drag a swatch into an open group, or out of it, to change what it holds; hold a dragged swatch next to a closed group for a second and it opens. Dragging a selected swatch carries the whole selection. In the strip beside the canvas, a drag moves a whole group; hold ⌘ while dragging a swatch to move just that one, into a group at the place you let go of it, or out to a place of its own. Ungroup puts the swatches back where the group was.

Right-click a group's row for more: Open in separate panel, Rename, lock or unlock its colours, Sort, Split into smaller groups, Ungroup, or delete the group together with its swatches. Split cuts a group in two where the line between its colours is clearest: by lightness, saturation, hue, or a mix of them. With no clear line, it halves the group along the way its colours vary most. Each half keeps at least two swatches. With several groups selected, the menu acts on all of them, and Merge ... into this one folds the others into the group you right-clicked.

Open in separate panel keeps a group, or a colour scale (from its row's right-click menu), on screen in a panel of its own, next to the palette. With nothing selected, ⌘-clicking a group or scale does the same. Open several to drag swatches between groups: drop a swatch in a group's panel to move it there, or back in the palette to take it out. Hold ⌥ while dragging a swatch onto another to swap their places instead, in the same list or across panels. A scale's panel lists its end colours and steps to pick from; Edit scale... opens its settings.

Sort... orders the whole palette: Most used first, Least used first, Dark to light or By hue. Each group's swatches are sorted, and groups and scales move as one by their swatches together. Use counts how much of the artwork a colour covers, shapes and text included. A group's own Sort sorts just its swatches.

Group similar shades opens a panel and groups the ungrouped swatches for you. Group by chooses what a group shares: Hue makes each group one colour at different lightness, ordered dark to light and named after its hue; Lightness, Saturation and Usage cut the palette into bands, such as darks and lights, greys and vivid colours, or the most and rarely used. Move Similarity to make the groups looser or tighter, and remove any group you don't want before closing the panel. Turn on Include grouped swatches to take the existing groups apart and regroup the whole palette. It is one step to undo.

To hold a swatch up against the artwork, drag it from the Palette panel onto the canvas, or choose Swatch card from its menu. The card stays where you put it on the screen; press its pin to pin it to the artwork instead, so it moves with it as you pan and zoom. Cards aren't part of the artwork and never export.

Adjust colours... opens a panel that changes the swatches themselves, so the whole artwork recolours without a pixel changing: Brightness, Contrast, levels (Black point, White point, Gamma), Hue, Saturation, Temperature, Tint, tone curves and Invert lightness. It works on the whole palette or the swatches selected in the palette panel; to adjust one group alone, right-click it and choose Adjust colours.... Background, foreground and accent are included unless you untick them, and locked swatches are left alone unless you tick them. Closing keeps the result, and the whole session is one step to undo.

Remove unused... lists the swatches nothing uses: no pixels, shapes, text, frames, grids or styles. Locked swatches are listed unticked. If the current stroke or fill goes, it falls back to fg or ac. Simplify... finds swatches that cover little of the picture and sit close to a busier swatch, and folds them in. Pixels count, and so does the area shapes and text paint. Tolerance sets how close is close, and At most how small a share of the painted area counts as rare. Merge moves everything to the nearest busier swatch; Merge and dither splits the pixels between the two swatches either side of the colour in a dither pattern, so an area keeps roughly its shade: any of the patterns fills use, error diffusion (Floyd-Steinberg, Atkinson...) included. Areas smaller than Smallest area, and shapes and text, merge without dithering. Both show the artwork before and after, side by side: hold Hold to compare to flick between them, and tick Only changes to fade everything that stays the same. Untick a row to keep that swatch, or pick a different target for it. Either one is one step to undo. The palette panel mentions it when it finds several swatches used sparingly.

Fills

Shapes, text and frames can have several fills, stacked on top of each other.

• Solid: one colour.
• Linear, Radial and Angular: gradients, drawn smooth, stepped, dithered or halftone. A halftone gradient draws each of its stops' neighbours as dots over it on a Screen, growing along the gradient, and a fill opacity below 100% thins the dots. Their handles sit on the canvas while the item is selected; hold ⇧ while dragging one to keep the gradient's line straight.
• Pattern: another item, tiled across the shape.
• Image: a picture fitted into the shape.

A path's stroke can also be Along path: a gradient that runs the length of the line.

Each fill and stroke has a Lattice: set it to 2×2 or larger, or to one of the artwork's grids, and it's turned into pixels in cells of that size, dither and gradients included, as if drawn at a coarser size. A fill stays inside the cells its stroke draws.

An image fill turns the picture into pixels in one of three ways: Dithered mixes palette colours in a dither pattern, Nearest colour replaces each pixel with the closest palette colour, and Raw keeps the picture's own colours. Dithered and Nearest colour use the whole palette, or a Custom set of swatches you pick.

Levels sets the picture's tone before it becomes pixels, leaving the image itself unchanged: Midtones above 1 lightens the middle, below 1 darkens it. Clean up takes out a dither's lone pixels, and islands of a few pixels far from the rest of the picture; the higher it is, the further away a speck has to be to stay. It treats the lightest swatch as the paper, so it suits dark drawings on a light ground.

To turn anything into a picture, right-click it and choose Convert to > Image fill: a pixel layer drawn as hundreds of near-identical swatches, a finished piece of text or vector work, a group or a frame. It becomes a rectangle with a Raw image fill of what it draws, in the same place, keeping its name, opacity, blend mode and masks, and its colours no longer follow the palette. The swatches it used stay in the palette; Remove unused... clears them. The image stays on this device until you next save. One step to undo.

Turn on Reference only in an image fill to make it a reference: it's there to trace, and left out of exports. ⇧' shows and hides references.

Styles

Fill, stroke, text and effect settings can be saved as styles in the Styles panel. Change a style and everything using it changes too. Style sets keep related styles together.