Extract 2–16 dominant colors from image pixels, returning both a visual swatch strip and a prevalence-ordered JSON color list.
Where: Flowgen → Add → Image & Vector → Adjust → Color Palette
Key ideas
- Color Palette is one graph step: Extract 2–16 dominant colors from image pixels, returning both a visual swatch strip and a prevalence-ordered JSON color list.
- Typed sockets: Inputs: Image / image_in — one source image.. Outputs: Palette strip / image_out — rendered swatches.; Colors / text_out — JSON containing the extracted hex colors.. Settings stay on the node rather than masquerading as extra wires.
- Card and Properties agree: The compact card and selected-node Properties sidebar expose the same persisted controls: Colors: 2–16, default 6..
- Execution behavior: This browser-local pure operation previews automatically after a short pause while a control changes, then overwrites one durable result file after the value settles. Deselecting the card or starting a downstream flow flushes the pending save. A terminal error exposes Retry; there is no normal Run button.
- Cost and privacy boundary: It calls no generation provider and charges no Sparks/Flowies. Processing happens in the open browser, so it cannot execute in a headless/server-only flow and the source must be readable by the page.
- Color Palette card: PureOpNode uses the authored shared-card path. Extract prevalence-ordered dominant colors as swatches and hex values.
- Properties sidebar: Card-owned operation controls; common properties shell
- Opened surfaces: Swatch preview; JSON result preview
Steps
- Connect an image.
- Choose how many dominant colors to extract.
- Review the swatch strip and the hex values in Properties.
- Reduce the count when small accent colors make the palette noisy.
- Connect image_out for a visual reference or text_out for structured color data.
- Use the palette as evidence rather than assuming every extracted color should become a brand token.
Inputs
- Image / image_in — one source image.
Outputs
- Palette strip / image_out — rendered swatches.
- Colors / text_out — JSON containing the extracted hex colors.
Controls
- Colors: 2–16, default 6.
Important behavior
- The image is sampled and quantized, then colors are reordered by how many source pixels they cover.
- Duplicate colors are removed before the requested count is applied.
- Fully transparent pixels do not influence the palette.
- The text output is data for prompts, Transform, Brain records, or design-system generation; it is not a new color socket type.
MCP authoring
- Create with create_node { type: "colorPalette" }.
- Connect exact handles with connect_nodes when the node has more than one input or output.
- Use set_props with the complete opParams bag and let the open Flowgen client preview/save it; there is no normal run_node step.
Color Palette controls and presets
- Add path: Flowgen → Add → Image & Vector → Adjust → Color Palette.
- Card: PureOpNode.
- Properties: Card-owned operation controls; common properties shell.
- Controls: Colors 2–16.
- Opened surfaces: Swatch preview; JSON result preview.
Tips
- Test the operation on one representative asset before placing it inside a List iteration.
- Keep the untouched source upstream so the operation can be changed or bypassed later.
- Judge edges and color at the intended delivery size as well as at full preview size.
Limitations and important notes
- The method measures pixel prevalence, not semantic importance or accessibility contrast.
- A gradient/photo can yield several near-neighbor colors rather than named design tokens.
Troubleshooting
No palette is produced
The source may be fully transparent or unreadable by the browser. Use an opaque/readable image asset.
FAQ
Does this open the full Image Editor?
No. This is a focused Flowgen node. Use Image Editor when you need layers, selections, paint, paths, or several edits in one document.
Can I use it in a List iteration?
Yes. Wire the current row field into the typed input, collect the exact output handle, and test one row before scaling the run.