--- title: "Color Palette" description: "Turn a set of colours into every shape a workflow needs: a swatch SHEET (1024x1024 PNG, one labelled band per colour) to wire into a vision or image-edit model as a reference, a prompt-ready TEXT string (\\\"#DBC089, #430510\\\"), an ARRAY for a List Selector or an iterator, and JSON as `{ colors: [...] }`. Three ways to fill it, resolved in this order: wire an IMAGE (a mood board or a photo) and the `count` dominant colours are extracted; else wire the `palette` JSON port, which takes a hex array, a plain string of hexes separated by commas / `*` / spaces, or the whole `brand` object from a Website Research node (it reads the `palette` field); else wire the `text` port; else the colours typed on the card. Hexes are normalised to uppercase #RRGGBB, de-duplicated, and kept in the order given; anything that is not a colour is dropped with a warning rather than guessed at, and a palette with no valid colours is refused instead of rendering an empty sheet. Pure local compute: no external model, 0 credits, and the sheet is content-addressed so re-running with the same colours re-uses the same file." updated: 2026-10-25 --- # Color Palette **Node type:** `utility:color_palette` **Category:** `Data` ## Description Color Palette takes your colours once and hands them back in four shapes: wire a mood board or photo into **Image**, a hex list or a Website Research `brand` object into **Colors (JSON)**, or a string of hexes into **Colors (text)**, or type them on the card, then run the node. You get a **Swatch Sheet** (a 1024x1024 PNG, one labelled band per colour), **Hexes (text)** for a prompt, **Hexes (array)** for a List Selector or an iterator, and **Palette JSON**. Wire the sheet into an image edit or vision model as a reference image, so the model sees the palette rather than parsing hex codes from a sentence. From an image it extracts 2 to 12 dominant colours, 5 by default. If you wire more than one source, the image wins, then the JSON port, then the text port. It calls no model and costs 0 credits. ## Canvas ports These appear as port handles on the left side of the node. | ID | Label | Details | | --------- | ----------------- | ------- | | `palette` | **Colors (JSON)** | `JSON` | | `text` | **Colors (text)** | `TEXT` | | `image` | **Image** | `IMAGE` | ## Sidebar config These render as form fields in the right-side config panel when the node is selected. | ID | Label | Details | | -------- | ------------------------------------------ | -------- | | `count` | **Colors to extract from an image (2-12)** | `NUMBER` | | `colors` | **Colors (typed, comma separated)** | `TEXT` | ## Outputs | ID | Label | Type | | ------- | ----------------- | ------- | | `image` | **Swatch Sheet** | `IMAGE` | | `text` | **Hexes (text)** | `TEXT` | | `array` | **Hexes (array)** | `ARRAY` | | `json` | **Palette JSON** | `JSON` | ## What it is for A brand is a handful of colours, and every downstream surface wants them in a different shape. An image model wants to LOOK at them, a prompt wants a string, a List Selector wants an array, the compositor wants JSON. This node takes the colours once and emits all four, so nothing in between has to split a string or extract a field. ## Three ways to fill it, in this order 1. **Wire an image.** A mood board, a product photo, a screenshot. The dominant colours are read out of it, `count` of them (2 to 12, default 5), most frequent first. 2. **Wire the Colors port.** It takes a hex array, a plain string of hexes separated by commas, `*`, or spaces, or the whole `brand` object a Website Research node produces, in which case it reads that object's `palette` field. There is a second TEXT port for the same job, because a TEXT output cannot connect to a JSON port. 3. **Type them on the card.** Click a band to open a colour picker and a hex box. This is the fallback and only the fallback: the moment a wire lands, the card goes read only and says where the colours came from, so a typed palette can never quietly shadow a wired one. Hexes are normalised to uppercase `#RRGGBB`, duplicates are removed, and the order you gave is the order you get. `#abc` shorthand and `#RRGGBBAA` both work (the alpha is dropped). Anything that is not a colour is dropped and the card tells you which. A palette with no valid colours at all is refused with a message rather than rendering a blank sheet, because a blank sheet looks like a node that worked. ## The four outputs | port | what you get | | ------------- | ------------------------------------------------------------ | | Swatch Sheet | a 1024x1024 PNG, one labelled band per colour, top to bottom | | Hexes (text) | `#DBC089, #430510, ...`, ready to drop into a prompt | | Hexes (array) | the list, for a List Selector or an iterator | | Palette JSON | `{ "colors": ["#DBC089", ...] }` | The sheet is the interesting one. Wire it into an image edit model or a vision model as a reference image and you are telling it the palette in the only language it actually reads, rather than hoping it parses six hex codes out of a sentence. Use the ARRAY output, not the text one, when you want to pick a single colour downstream. The Array node splits text on `*` by default and the text output is comma-joined, so that pairing needs `splitBy` set to a comma. The array port needs no split step at all. ## Free, and why the file does not pile up Nothing here calls a model. It parses, reads pixels, and paints a PNG locally, so it costs 0 credits and refreshes on its own whenever something upstream changes. That last part is why the sheet's filename is a hash of the colours in order: re-running with the same palette re-uses the file already on the CDN instead of uploading another copy of the same picture. Reorder the colours and you get a different picture and a different file, which is correct, because band order is part of what the sheet says. --- _Auto-generated from the Wireflow node registry._ Last updated: 2026-10-25 --- Documentation index: fetch https://www.wireflow.ai/llms.txt for the full list of Wireflow docs.