How to Clearly Show Products in Different Colors on the Web | Color Schemes for Color Selection UI

TIPS

When a sweater comes in several colors, switching the product photo alone may not make it clear which version someone is viewing or how it differs from the others. A color selection UI (user interface, the on-screen controls for choosing a product color) works best when photos, color names, and the surrounding page colors are designed together. Here is a practical approach for helping shoppers compare color variations from a product listing to its detail page.

Keep product photos and color names easy to compare

On a product listing card, place a label such as “Available in 3 colors” next to the main product photo so visitors know there are alternatives. On the detail page, display a large photo of the current color alongside thumbnails (small preview pictures) of the other colors. Photograph every variation from the same angle, distance, and lighting where possible, so the product color is the main difference between the images.

Next to the selected image, show a clear label such as “Color: Forest (3 colors available).” Whenever the main image changes, update the color name at the same time, using the same naming convention on listing and detail pages. On phones, avoid an interaction that reveals color information only while a pointer hovers over a picture; the chosen color should remain identifiable after a tap.

There is no need to change the entire page background or Add to Cart button to match each sweater color. Keeping the surrounding interface colors consistent lets customers focus on the differences between the actual products rather than changes in the page design.

Example palette for a sweater in three colors

Imagine a sweater offered in Ivory, Forest, and Terracotta. The following HEX values (hexadecimal codes describing colors on a screen) illustrate a possible interface design. They are not a promise that an on-screen color sample will match real fabric.

Product color samples: Ivory ■#EADDC7, Forest ■#365E58, and Terracotta ■#BB6048. Always include the color names as text.
Page and product-card background: white ■#FFFFFF. Give the photo area a consistent light gray ■#EDF0F2 background, with the three products shown at the same visual scale.
Product title and price: dark gray ■#283544. Use gray ■#4B5864 for supplementary labels. Against the white page, their contrast ratios (measures of lightness difference) are approximately 12.48:1 and 7.29:1 respectively.
Photo and thumbnail borders: gray ■#64748B. Against the light gray photo background, this border has a contrast ratio of approximately 4.16:1 and can separate one image area from the next.
Selected-color information: use a very pale blue ■#EAF1F6 panel with a dark blue ■#285477 outline and the text “Viewing: Forest.” The outline contrasts with that panel background at approximately 7.01:1.
Add to Cart button: dark blue ■#285477 with white ■#FFFFFF text. This pair has a contrast ratio of approximately 8.00:1.

A light-colored product such as the Ivory sweater can blend into a pale photography background. Instead of artificially darkening the product itself, adjust the lighting, shadows, or visible edges when taking the photos, while applying consistent photography conditions across all three variants.

Check that product information stays consistent as colors change

After a color switch, verify that the main photo, color name, price, stock information, and actual product SKU (the code identifying a stock-keeping unit) all refer to the same variation. If you show the variations as separate product cards, keep the product names and prices in consistent positions, too. Because screens and lighting can change how colors look, offer enlarged fabric photos or material descriptions where helpful.

Do not indicate the selected variation with a pale background alone; add a visible label and outline. Under WCAG 2.2 (Web Content Accessibility Guidelines), regular-size text generally needs at least a 4.5:1 contrast ratio against its background, while essential visual indicators of controls and their states generally need at least 3:1 against adjacent colors. Test the color pairings that people will actually see.

Finally, try the full journey on both mobile and desktop: open the product from the listing, switch among all three colors, then return to the first. A page that keeps its purchase controls visually consistent while giving the products the spotlight makes it easier to compare the available colors.