Mood Board Maker (Photos, Colours & Fonts)

About the Mood Board Maker (Photos, Colours & Fonts)

Collect the look of a brand, a room, a wedding, a collection, a product or a film on one board. Drop, paste or choose your photos, then add colour swatches, font specimens in nine open-licence fonts, textures (linen, paper, concrete, marble, wood, terrazzo, knit, film grain), sticky notes, a title and a palette strip. Drag items around with snapping and alignment guides, resize and turn them, or start from 12 layouts for brand, interior, wedding, fashion, product and film-look boards — grids, masonry and a hero with a strip.

Every photo you add feeds the board's palette: 5 to 8 colours found with k-means in the OKLab colour space, each with its HEX, RGB and an approximate CMYK, and the colour pairs that pass WCAG 2.2 for text. Lock the colours you want to keep and reorder them. With a Pro pass, download the board as a PNG (1920 × 1080, 1080 × 1350 or 1080 × 1920), a client PDF on A4, A3 or US Letter at 300 DPI with an optional page listing the colours, fonts and notes, and the palette as CSS variables, an ASE swatch file or a swatch card; without a pass the board shows with a watermark as a free preview. Your photos stay in your browser.

Common uses

• Brand direction before a logo or a website: photos, palette and type in one place for the client.
• Interior and event planning: materials, colours and notes to share with suppliers.
• Fashion and product shoots: references for the stylist, photographer and set designer.
• Film and video looks: stills and the grade’s palette for the colourist.

How the palette is made

Each photo is read at a small size (96 pixels on its longest side) and its pixels are converted to OKLab, a colour space in which distances follow how different colours look (OKLab by Björn Ottosson). K-means then groups those colours into as many clusters as the palette has places, larger photos counting more; each cluster’s average is a palette colour, most common first. A locked colour is a fixed cluster centre, so the other colours form around it. The same photos always give the same palette.

Each colour shows its HEX and RGB values, an approximate CMYK (a plain conversion without a printer profile, so a print shop’s own conversion will differ) and the black or white text that reads best on it. The pairs list shows the palette’s colour pairs with a contrast of at least 3:1 — 3:1 is enough for large text, 4.5:1 for normal text and 7:1 for the enhanced level (WCAG 2.2: Contrast (Minimum)).

The 12 layouts

• Brand: a grid of six photos beside a title, the palette, a font specimen and a note; or a hero photo with a strip of four.
• Interior: masonry columns with a texture; or a large room photo with four details, the palette and a material.
• Wedding: soft masonry with rounded corners; or a hero between a title and a strip of three.
• Fashion: an editorial grid of eight; or masonry under a title and the palette.
• Product: a hero with three details, four swatches and a note; or a grid of four.
• Film look: a 2.39:1 frame over four stills and the palette; or a grid of nine stills.

Every layout fits all three board sizes. Your photos fill the photo slots in order, your notes and other items keep their place in the layout, and empty slots wait for more photos.

Files

• PNG at the board’s own size: 1920 × 1080, 1080 × 1350 or 1080 × 1920.
• PDF on A4, A3 or US Letter, turned to match the board, with the board at 300 DPI inside 10 mm margins; the optional second page lists the colours (with swatches), the fonts and the notes as real text (a note in a script other than Latin is drawn as a picture of its text).
• CSS variables (--mood-1 …), an ASE swatch file (Adobe Swatch Exchange, which design programs import) and a swatch card PNG with each colour’s HEX and RGB.
• Project file: a ZIP with board.json and your photos, to open the board again here.

Limitations

• Only files you add are used: there is no import of boards or pins from other sites.
• HEIC photos cannot be opened in the browser: convert them with HEIC to JPG first. Photos larger than 4,096 px are made smaller on your device.
• A board holds up to 40 photos and 80 items. The CMYK values are approximate and not a print proof.
• Boards saved in this browser (the 12 most recent) stay on this device; use Save project file to move a board to another one.

Privacy

On this device: nothing is sent

Your photos, notes and boards never leave your device: the board is drawn in your browser and saved in this browser’s storage (IndexedDB), and the project file is saved where you choose.