Fill, stroke, palette, and color

Summary

The Color panel sets the color used for new paint strokes and for recoloring an existing shape, path, or text layer. Fill and Stroke are separate, independently colored targets. Colors come from a wheel, hex or numeric input, an eyedropper sampling the canvas, or saved swatches.

Use it when

• You want to change a shape's fill or outline color after drawing it.
• You want to pick a specific color before drawing with Pencil or Brush.
• You want to match a color already present in your artwork.
• You want to reuse a color across a session or future visit.

Before you begin

Nothing to prepare. The Color panel is always visible in the inspector, independent of which layer or tool is active.

Steps

1. Choose Fill or Stroke at the top of Color — this selects which property the panel's color controls will affect.
2. Set a color using any of:
   • The Color wheel swatch, which opens a native color picker.
   • The Hex field.
   • The Hue slider plus the H/S/V or R/G/B numeric fields — all of these stay in sync with each other and with Hex.
   • A Starter swatch (16 fixed presets), a Recent swatch (colors you've used before), or a Saved swatch (colors you've explicitly saved).
   • Eyedropper (I) — select it, then click anywhere on the artboard to sample that pixel's color into the picker.
3. To recolor an existing shape, path, or text layer: select the layer, set Fill or Stroke and the color as above, then select Use color.
4. To draw with a specific color from the start: set the color first (with Fill as the target), then draw with Pencil or Brush — the stroke uses that color immediately, with no extra step.
5. Select Save swatch to add the current color to your Saved swatches for later reuse.

What changes

• Use color applies the current color to the selected layer's Fill or Stroke — whichever is active — and only takes effect once you select it. Typing a new hex value alone does not change a layer's existing color.
• A new Pencil or Brush stroke picks up whatever color is currently set, automatically, as soon as you draw — confirmed by drawing with the color set to #800080 and sampling the resulting pixels directly, which matched exactly. No Use color click is needed for this case.
• Eyedropper only loads the sampled color into the picker — it does not apply it to anything by itself. Confirmed by sampling a red shape's fill while Stroke was the active target: the picker updated to the sampled color, but the shape's stroke stayed its original color until Use color was selected.
• Recoloring does nothing to a placed image layer — Fill, Stroke, and Use color have no visible effect on images, confirmed by attempting to apply black fill to a placed photo with no change.
• Save swatch and ordinary color use both persist to this browser via localStorage (bb:creative-swatches:v1 for Saved, bb:recent-colors:v1 for Recent), matching the panel's own note, Palette stored on this device.

Print note

Fill and stroke colors you set here become part of the actual exported artwork for shapes, paths, text, and paint strokes — unlike the picker's own interface chrome. This article does not verify color management or gamut conversion for print; see the placeholder color-profile notes in Export PNG and Print PDF + Silhouette cut guide before relying on exact color reproduction.

Warnings and limits

• Changing the Hex, Hue, or RGB/HSV fields updates the picker only — nothing on the artboard changes until you select Use color (for an existing layer) or start a new paint stroke (for Pencil/Brush).
• Fill/Stroke/Use color silently do nothing on a placed image layer. If recoloring seems to have no effect, check whether the selected layer is an image rather than a shape, path, or text.
• Saved and recent swatches are stored per browser/device, the same as device recovery — they do not follow you to another browser or device and are not part of an account (no account system for palettes is described here).

Desktop and mobile

The Color panel's fields, swatch rows, and Use color/Save swatch controls are reachable the same way on both layouts, per The editor at a glance and Artboard, stage, and tool rail — on mobile, it appears inside the tool-rail-triggered Creative tools sheet rather than inline in the inspector. Panel contents were not independently re-verified at mobile width for this article.

Troubleshooting

Related topics

• Select, pencil, brush, and eraser
• Shapes, paths, and text
• Creative presets and Pointillism
• Export PNG

Verification note

Verified against Blotter Builder on 2026-07-20.

Source notes

Primary observations — all from the live application at https://blotterbuilder.tdl.fyi, 2026-07-20:

• Observed — drew a Shape rectangle with a 10px stroke, selected it, set Fill target and hex #FF0000, selected Use color: the shape filled red while its stroke stayed black. Then set Stroke target and hex #0000FF, selected Use color again: the stroke turned blue, fill stayed red — confirming Fill and Stroke apply independently.
• Observed — selected a placed image layer, left Fill at its default #000000, and selected Use color: the image was visibly unchanged.
• Observed — with Eyedropper active and Stroke as the target, clicked inside the red shape's fill: the Hex field updated to #FF0000, but the shape's stroke remained blue until Use color was selected afterward.
• Observed — selecting Save swatch added the current hex to localStorage['bb:creative-swatches:v1'] as a JSON array; a separate localStorage['bb:recent-colors:v1'] key also held the sampled color. The Color panel's own Saved swatch row sits below the text Palette stored on this device.
• Observed — placed a Text layer, typed "HI", selected it, set Fill to #00AA00, selected Use color: the text rendered green.
• Observed — set Fill to #800080 (with no layer selected — the Pencil tool active instead), then drew a new stroke. Sampled the rendered canvas pixels directly along the stroke's path using getImageData: multiple sample points returned rgba(128, 0, 128, 255) — an exact match for #800080 — confirming the stroke used the current color without any Use color step.
• Observed — the Color panel's structure, top to bottom: Fill/ Stroke toggle, Use color, Color wheel, Hex, Hue slider, H/S/V fields, R/G/B fields, Starter swatches, Recent swatches, Save swatch (with the "stored on this device" note), Saved swatches.

Verification log