3D Colour Configurator for Products: How the Aura Reformer Colour Picker Works

Project summary

Aura Reformer is a pilates equipment brand. For this project I built 3D models of six products, from the Barrel to the Basic Reformer, and made each one something a visitor can rotate, zoom into and recolour on the website. The upholstery palette contains 57 colours in total: 20 Aspendos leather, 29 Harşena leather and 8 Toskanto felt. The wider story of the work is on the Aura Reformer project page. This article is about the mechanics: how a colour configurator is put together, which decisions mattered, and where the pitfalls are.

I have written it for brands that sell products in many colours and materials, whether that is gym equipment, furniture, textiles or fittings. The Aura Reformer work is the worked example. Everything that is general advice is marked as such, and where I describe a situation that did not happen in this project, I say it is hypothetical.

Why a configurator instead of a gallery of photographs?

When a product comes in dozens of colours, a gallery of photographs has to answer a hard question: who photographs all of them, and under which light? Every extra colour means a sample, a studio day, a repeated lighting set-up and a round of retouching. Colours shot on different days can also drift apart in tone, so the same sofa looks warmer in one picture and cooler in the next, and the customer reads that difference as a property of the product.

A 3D model separates shape from appearance. The geometry is built once. The colour is then just a value in a material. Camera, lens, light and floor stay exactly as they were, so every variation is produced under identical conditions. The real gains are consistency and ease of correction, more than raw speed: if one tone turns out wrong, you fix one material value and nothing else moves.

A configurator takes that idea one step further. Instead of rendering fixed images, the colour change happens live on the model, inside the visitor's browser. They choose a colour and the product responds. If you are still deciding between photographs and renders in general, the comparison in product photography vs 3D render for e-commerce is a good place to start.

Six products, one system

The Aura Reformer range has six products: Barrel, Cadillac, Tower, Tower Package, Chair and Basic Reformer. The most important early decision was not to treat them as six separate jobs. They share one lighting set-up, one material language and one viewer. That choice has a practical consequence: every new product inherits the logic of the previous one, and the range reads as a single brand rather than six unrelated models.

This is one of the strongest arguments for 3D across a product family. The expensive thinking, such as how leather catches light, how felt looks different from wood, and how the viewer behaves on a phone, is done once. Later products reuse it. If you are weighing up how much a range like this would cost, 3D product modelling cost: what affects the price explains what actually moves a quote.

Naming and grouping parts so the picker has something to work with

A colour picker can only recolour what the model lets it separate. On a pilates machine, the leather pads, the wooden frame, the metal parts, the springs and the straps may look like separate things to a person, but if they were modelled as one merged object, no software rule could tell them apart.

So each part was built as its own object, and the materials were given names that describe the role of the part. The colour series were then linked to parts through those names:

• Aspendos: the top cushion.
• Harşena: the other leather cushions.
• Toskanto felt: the wooden parts.

Not every product has every part. A product without a top cushion simply does not show an Aspendos tab, because there is nothing for that series to colour. The interface follows the model rather than the other way round.

This naming work is invisible when it is done well, which is exactly why it gets skipped. In general terms, I would recommend writing the naming rules down before modelling starts. Fixing names across a finished model, or across six of them, is slow and error-prone.

Series that do not overwrite each other

Because each series is tied to a different group of parts, a visitor can try the top cushion in one colour, the lower cushions in another and the wood in a third tone, all at the same time. Choosing a colour in one series does not erase the selection made in another; switching series keeps what was chosen before.

This sounds like a small detail, but it changes how people use the tool. If every click reset the previous choice, a visitor could never build a complete combination. They would only ever see one colour change at a time. Letting selections coexist turns the configurator from a swatch viewer into a real way of composing a finished product.

Building the materials

A colour change is only convincing if the surface still behaves like the material. For the leather, the material uses roughness, a slight sheen and a fine surface texture. The felt is more matte and shows a denser, fibrous feel. The wood keeps its grain, and its colour is changed with a tint rather than by replacing the texture.

The principle behind this is general. When the colour changes, the other material properties should stay put. If roughness shifts between a pale and a dark variant, the two stop looking like the same product in different colours and start looking like two different materials. The vocabulary of roughness and reflectivity is the territory of physically based rendering, which is also what browsers display when they load a model in the glTF family of formats. If those terms are new to you, the GLB file format explained for web 3D shows where that material data lives inside the file.

The colour studio: how 57 choices stay usable

Fifty-seven colours in a single list would be a mess. The interface groups them into three families, one tab each. A few decisions make the picking feel considered rather than mechanical:

• The name and code of the selected colour are shown large, so there is no ambiguity about what was chosen.
• The swatches are drawn with texture and a hint of light, so they read as material rather than flat squares.
• The chosen colour casts a soft glow behind the model.
• The model's colour changes with a smooth transition, not an abrupt jump.
• Previous, next and random buttons allow fast browsing.

None of this is decoration for its own sake. It makes choosing a colour feel like exploring, while the product itself stays in the middle of the screen. The discipline in an interface like this is to keep every flourish subordinate to one goal: helping the visitor understand the product in the colour they are considering.

Lighting: too much light destroys detail

The lighting needed rebalancing when the models were moved onto a plain background instead of a scene. Strong lights that had been set for an earlier dark scene burned out the models on the plain floor. White cushions turned flat white, and details such as screws and stitching vanished.

The fix was to reduce the total light, reduce the ambient reflection and lower the exposure. The right balance is the one where the folds of the cushions, the grain of the wood and the metal parts can still be told apart. Once these settings were established, they were applied across all the products, which is why the six models read in the same light.

There is a general lesson here for any configurator. Lighting that flatters one colour can ruin another. A pale colour needs headroom so it does not clip; a very dark colour needs enough fill that its form does not disappear. Test the lightest and darkest options early rather than trusting the mid-tones.

File size: the difference between a good model and a usable one

A model that looks good in a studio file is not necessarily a model that opens quickly in a browser. The Cadillac shows the gap clearly. It started as part of a very large file of roughly 830 MB containing all the products, and it included fur detail built from real geometry, around two million triangles. In that state it could not be used on the web.

The work went like this: the Cadillac's parts were separated from the large scene, the fur geometry was simplified to roughly 170 thousand triangles, a few very heavy individual parts were reduced, the 4K textures were scaled down and the model was compressed. The result is a model of roughly five megabytes that opens quickly and works with the colour picker.

The takeaway is that "a beautiful model" and "a model fit for the web" are two different files, and the step between them is real work. For a deeper look at publishing a model on a page, how to add a 3D model to a website with model-viewer covers the embedding side.

What changes on a phone

On touch devices, smoothness matters more than spectacle. The background scene was removed entirely, so the model sits on the viewer's own panel. The resolution limit was lowered and edge smoothing was switched off. Two-finger zoom and pan were supported, and a full-screen button lets the model fill the screen.

The same model runs on desktop and mobile; on a phone it simply uses fewer effects. Every decision follows from the same principle: on a small screen, readability and responsiveness come before visual show.

Where the colours come from, and how they are checked

With 57 colours across six products, each colour must be correct and approved. The palette was entered into a digital list, with each colour stored with a code and a colour value, and those values were applied to the models. The selected colours on the models were then checked by the client.

Two points from this are worth copying. First, keep the colour list in a single data source. When a colour is corrected or a new one is added, you edit one entry, and every product picks up the change. Second, be open about the limit: screens differ, so for a final decision a physical swatch card is still the reference. A configurator helps people choose, but it does not replace the sample in their hand.

A checklist for your own product range

Before commissioning a configurator, work through these questions. They apply to any product with colour or material options, and none of them depends on a particular tool.

• Which parts change colour, and which stay fixed?
• Are those parts separate objects with clear, consistent names?
• Does each colour series map to a defined group of parts?
• Should selections in different groups coexist?
• Where does the master colour list live, and who approves changes?
• What is the target file size, and which heavy details need simplifying?
• How will the lightest and darkest colours look under the chosen lighting?
• What happens on a phone: which effects can go?
• Does resetting the selection return the model to its own colour?
• How will you tell visitors that on-screen colour is a guide?

For the Aura Reformer products, each model went through the same type of check before it was published: proportions against the real product, logo and text placement, correct part names, the correct part recolouring for each colour, reset behaviour, file size, phone performance, detail in the light, and zoom and full screen. Applying one list to all six is what kept them at the same standard.

Hypothetical scenarios to test your thinking

These are examples, not events from this project.

Imagine a sofa maker with three fabric collections of different sizes. The same logic would apply: each collection is linked to the seat, back and cushions through named parts. The risky colours would probably be a very pale cream and a deep charcoal, so those should be tested first.

Imagine a furniture brand with a patterned fabric. A single colour value would not be enough, because the pattern's scale, direction and repeat matter at every seam. That brand would need a texture for each variant, which makes the file heavier and the planning more important.

Imagine a company adding a new colour next season. If the colour list is one data file, the work is one new entry plus a check against the physical sample. If the colours were baked into separate files per product, the same change would be a dozen small edits and a dozen chances to miss one.

Limits worth stating honestly

A configurator does not replace the physical sample. Screens show colour differently, and light changes how a real material looks. The accuracy of the model also depends on the references supplied to build it. Metallic paints, pearlescent finishes and natural materials such as real leather or wood vary from piece to piece, and a single idealised render cannot capture that. A page should say so plainly.

A model is not a product page either. Each product still needs real text: what it is, who it is for, its dimensions and materials, and a clear way to order or get in touch. The viewer supports that text; it does not substitute for it.

Starting with your own range

If you sell products in several colours or materials, the first step is simply to list the products and their options. From that list a realistic scope per product can be drawn up. If you want to talk it through, you can request a quote and I will come back to you with questions about your range, or you can read what 3D product modelling is first if you are new to the subject.

Frequently asked questions

Conclusion

A colour configurator works because shape and colour are kept apart: the model is built once, parts are named so colour series can find them, lighting is balanced for every shade, and the file is made light enough for a browser. Add a single source for the colour list and an honest note about screens, and a large palette becomes something a visitor can explore. If you have a range of your own in mind, send me the products and options and we can scope it together.