Material palette & mood-board maker

What a material palette and mood board maker does

A material board is a single sheet that shows the finishes proposed for a space or building side by side: timber, stone, metal, fabric, paint, tile. This maker arranges up to eight of your own photographs on a clean board, labels each one with your material name and adds a strip of four colors sampled from the image.

Boards help clients and teams judge materials together rather than one at a time. A stone that looks right alone can clash with the timber next to it; seeing them at the same size, on the same background, makes the relationships obvious. A board also documents a decision, which is useful when a finish is questioned later.

Everything happens in your browser. Images are decoded and resized on your device and are never uploaded. The colors are sampled from photo pixels, so they reflect your camera, lighting and white balance, not a measured product color.

How to use the material palette & mood-board maker

1. Type a board title (up to 60 characters).
2. Choose up to eight PNG, JPEG or WebP images, each up to 10 MB and 40 megapixels.
3. Pick a board size (A3 landscape, 16:9 or square) and a caption style (label with swatches, label with hex codes, or label only). The preview updates as you go.
4. Rename each material. Labels start from the file name; replace them with names like "WD-01 White oak, oiled".
5. Drag rows to reorder them, or use the up and down buttons. Use the crop button on a row to set the focal point and zoom applied to that tile on the board, and the X button to remove a material.
6. Check the four sampled hex colors listed under each material, then export with Download PNG, PDF (board plus a text list), Swatches (ASE) for Adobe and Affinity apps or Palette JSON for scripts and design tokens.

Worked example

Combine timber, stone and textile photographs into a labelled three-material board with a color strip.

What is a material board in architecture and interior design?

A material board (also called a finish board, sample board or materials palette) shows the actual finishes proposed for a project. A mood board is looser: it collects images that capture an atmosphere or reference, often before specific products are chosen. Many projects use both, the mood board early to agree a direction and the material board later to fix the palette.

Physical boards with real samples are still the best way to judge texture and color. Digital boards are faster to share, easier to revise and useful for remote clients. This maker produces the digital version: consistent spacing, a neutral background and clear labels, so the materials stay the focus.

A common labelling convention is a short finish code plus a description, for example WD-01 for the first wood finish or ST-02 for the second stone. Using the same codes as your finish schedule links the board to the drawings.

How to photograph material samples for a board

Most color problems on a material board start at the camera. A few habits make images more comparable.

• Shoot every sample under the same light, ideally bright, diffuse daylight near a window, out of direct sun.
• Turn off overhead lights so you are not mixing warm artificial light with daylight.
• Set a fixed white balance, or photograph a white or gray card first and correct all images to it.
• Hold the camera square to the sample to avoid perspective and glare. Tilt glossy samples slightly to move reflections out of frame.
• Fill the frame with the material so edges, tables and backgrounds do not affect the sampled colors.
• Turn off filters, portrait modes and automatic enhancement, which change color between shots.
• Each tile is a 4:3 landscape crop. Use the crop control to move the focal point and zoom in if a sample is off-center or has background around it.

How the color sampling works, and its limits

For each image, the tool shrinks a copy to 48 × 48 pixels (2,304 pixels), rounds every color channel to the nearest step of 32, then counts which rounded colors appear most often. The four most frequent become the color strip. Pixels that are mostly transparent are ignored.

Rounding makes the palette stable and readable, but it is coarse: each channel can only take nine values (00, 20, 40, 60, 80, a0, c0, e0, ff), so there are 729 possible colors. Subtle tones shift. A warm white of #f2efe8 is reported as #ffe0e0, and a mid timber brown of #8a6f55 becomes #806060. Use the swatches to compare relationships between materials, not as specification values.

Board sizes, layout and caption styles

Choose one of three fixed board sizes. The maker then picks the number of columns (one to four) that gives the largest 4:3 tile that still fits every material, with its caption, inside the board, and centers the grid under the title. The PNG exports at the pixel size below; the PDF places the same board on an A4 page with a text list of labels and colors.

Caption styles change what sits under each tile: the label with a strip of the four sampled colors, the label with the four hex codes in small type, or the label alone for a quieter board.

Exporting the palette as ASE and JSON

Swatches (ASE) writes an Adobe Swatch Exchange file with one group named after the board and one RGB swatch per sampled color, named after the material and its position (for example WD-01 White oak 1). Adobe Illustrator, Photoshop and InDesign load it through their swatch panels, and Affinity apps import it too. Colors are stored as RGB floats without a color profile, so treat them as screen colors.

Palette JSON writes the same colors as a plain JSON file: the title, board size and one object per material with its label and each color as a hex string and a 0–255 RGB triple. It suits design-token pipelines, scripts and spreadsheets. Both files are generated in your browser.

Who it is for and when to use it

Method, formulas & assumptions

Images are decoded locally, downsampled and placed on a canvas. Quantized pixel colors provide a palette; material names are your own labels.

Common mistakes to avoid

• Photographing samples under different light, then judging color differences that are really lighting differences.
• Using the sampled hex codes as a paint or product specification. They are rounded pixel colors, not measurements.
• Leaving file names as labels. "IMG_4821" means nothing to a client; use a finish code and description.
• Including busy backgrounds in the photo, which then dominate the color strip.
• Adding every candidate at once. Boards with three to six materials are easier to read than a crowded eight.
• Relying only on a screen. Monitors and printers show color differently; confirm key choices with physical samples.

Scope & limits

Up to 8 PNG/JPEG/WebP images, 10 MB each. Colors reflect image pixels, lighting and white balance; they are not measured product colors or AI material identification.

Frequently asked questions

Further reading

• Typical exterior wall assemblies
• All documents & presentation tools
• All free architecture & construction tools
• Harth resource library

In this category

• Room schedule & area program
• Architectural rendering prompt builder
• Architectural design brief builder
• Construction RFI form builder