Our approach
Specialized Coating Systems supplies coatings for sports surfaces, including tennis courts. Choosing a colour scheme involves more than selecting a single paint colour: the playing area and the surrounding court need to work together. We approached the project as a visual decision-making tool, allowing customers to explore combinations directly on a recognisable tennis court illustration.
Instead of presenting a static colour chart, the selector connects two groups of colour swatches to an interactive preview. Visitors can experiment with combinations and immediately see the relationship between the inner playing area and the outer court.
How the colour selector works
- Select an inner court colour. Choose a colour swatch for the main playing area.
- Select an outer court colour. Choose a separate colour for the surrounding surface.
- View the combination. The court illustration updates to show the selected colours together.
- Review the selections. The chosen RAL references and colour names remain visible below the preview.
- Try alternatives. Change either colour to compare another combination without starting over.
Key application features
- Independent selection of inner and outer court colours.
- Immediate visual feedback using an illustrated tennis court.
- RAL colour references and names displayed alongside swatches.
- Clearly identified selections beneath the preview.
- Responsive interface integrated into the existing Specialized Coating Systems website.
- Custom front-end interaction designed around a specific product-selection task.
Screenshots: comparing court colour combinations
The examples below show how the same court can take on a different appearance by changing the inner and outer surface colours independently.
Custom development and technical considerations
The application was developed using HTML, CSS and JavaScript and integrated into the client’s existing PHP-based website. The central interaction links the colour controls to the visual court display so that visitors can compare combinations without navigating away from the page.
A key design consideration was keeping the court illustration, selection controls and chosen colour references understandable as a single workflow. The interface also needed to adapt to different screen sizes while retaining a useful visual preview.
What the solution delivers
The Tennis Court Colour Selector turns a potentially abstract colour-selection exercise into a visual, interactive experience. Customers can compare alternatives before discussing their preferred court colour scheme, while Specialized Coating Systems can use the tool to support enquiries about its sports surface coatings.
The project demonstrates how a focused custom web application can add practical functionality to an existing website, beyond standard pages and product listings.