How to create shade charts for foundation on a beauty e‑commerce site? A unified approach for swatches, packaging visuals, and SKU pages.

When launching a new liquid foundation, the most time-consuming part is often creating the color swatch images. With the product bottle already photographed and arm‑test swatches in hand, the editor only realized upon placing both sets of images on the product page that the same neutral light shade appeared slightly yellow in the bottle, pinkish on the skin, and even one shade lighter on the color card. No one dared to hit “publish” just yet.

Applying the same filter to the entire set of images won’t solve this issue. Liquid foundations are affected by the container, application thickness, skin tone, and lighting conditions, making it impossible for every pixel in the image to match perfectly. What truly matters is maintaining the correct order of shades—light to dark—along with the right balance between cool and warm undertones, and ensuring proper SKU correspondence. First, nail these three key elements, then proceed with model shots and scene imagery.

I. Before starting work on the liquid foundation color swatch images, create a full‑range color comparison chart first.

This color comparison chart isn’t a consumer‑facing poster—it’s a working document shared among the visual, product, and marketing teams. Each shade should include four components: a confirmed sample of the actual formula, a standard color swatch, a front‑view photo of the bottle, and the shade name. All files must use the same numbering system; avoid situations where the shoot file labels a shade as “Light Two,” while the backend calls it “Light Neutral.”

Cool, warm, and neutral are common undertone categories used by beauty brands, but each brand may classify peach, olive, and golden tones differently. The specific way these fields are labeled depends entirely on the brand’s own shade‑naming conventions. The visual team’s role is strictly to follow these guidelines faithfully—not to arbitrarily change a neutral shade to warm simply because the image appears slightly gray.

The color comparison chart first clarifies “which SKU corresponds to this particular shade,” before moving on to discuss whether the overall image looks good.

II. Why Does the Same Foundation Shade Look Different in the Bottle, on the Color Card, and on the Skin?

Inside the bottle, the formula is viewed through glass or plastic; the color card presents a flat, solid hue; and arm‑test swatches inevitably blend with the skin’s natural undertones. These differences are entirely normal. During quality control, don’t rely on an eyedropper tool to extract a single RGB value and force all three images into uniformity. Instead, compare them side by side against the color comparison chart, checking if the ranking of lightness and darkness has shifted, or if the undertone has changed from cool to warm, or turned pink instead of staying neutral.

1. For bottle photos, first assess the color of the formula itself, then examine the packaging material.

For clear bottles, distinguish between the formula color and reflections off the bottle walls; frosted bottles naturally reduce saturation. When retouching, dust can be cleaned off labels, pump heads, and caps, but the color inside the bottle should not be adjusted along with the background. If two adjacent shades show a clear difference in reality, retain that distinction even in white‑background bottle images.

2. Flat color cards must preserve the sequence of lightness and darkness—do not enhance any single square in isolation.

Color swatches are best suited for horizontal comparison. When creating them, arrange the colors in the brand’s established order, ensuring uniform color block sizes, margins, and backgrounds; if a particular shade appears “not prominent enough,” do not highlight it separately. Otherwise, when buyers click through from the swatch to the SKU image, they may perceive it as another shade.

3. For skin tone testing, focus on coverage and undertones—do not strive for pixel-perfect consistency with the color swatch.

When demonstrating shades on the arm, clearly indicate the number of applications, edge shapes, and lighting conditions. Do not mix thin and thick layers in the same row, nor directly compare highly glossy, wet textures with fully dried color patches. The caption should clarify that this is a shade‑testing demonstration; avoid presenting AI‑generated images as real‑world tests of coverage or long‑wear performance.

The three types of media do not need to match pixel‑for‑pixel; however, the order of shades and the direction of undertones must remain consistent.

III. Beauty arm‑test images should not aim to show “how many colors there are,” but rather “which skin tones each shade suits.”

A single arm displaying over a dozen shades may seem informative, yet buyers struggle to determine which one matches their own skin tone. A more practical approach is to first group shades by skin tone depth, then ensure each image maintains consistent lighting, application width, and shade order. Which skin tones the model should cover depends on the actual sales range and product shade lineup—not on hastily adding models just to make the visuals appear lively.

When expanding the composition of shade tests, prepare reference images of bare skin and diagrams indicating application areas. In PixPix, generate a standardized base image for testing—with consistent camera angles, lighting, and negative space—using and . AI should only handle the arm or model, camera position, and layout; it must not independently create or infer the final skin tone after foundation application. Ultimately, the test area presented to buyers should come from real‑world photos taken under uniform conditions or from brand‑approved materials, combined according to confirmed positions.

It is recommended to standardize shooting conditions: Use the same light source, white balance, camera angle, and background for all shades in a given test series; avoid having one shot taken by a window and another under warm lighting.

When the same set of shades is applied to different skin tones, the results will vary; maintain consistent shade order, application thickness, and lighting throughout.

IV. After a buyer on an independent website clicks on a foundation shade, which SKU image should appear first?

In Shopify, each product variant can be linked to a specific image; when a buyer selects that variant, this image serves as the variant’s preview. Other images of the same shade can still be stored in the product’s media library and arranged sequentially alongside. The biggest concern here isn’t having too few images, but rather showing a neutral shade as the preview even after clicking on a warm-toned shade.

For variant preview images, prioritize clear front‑view shots of the bottle, ensuring the shade name and packaging details are easily legible. Follow this with close‑up shots of the product itself, arm tests, and makeup‑look references. Include full‑series group photos toward the front to aid comparisons, but do not use these as substitutes for individual SKU confirmation images.

1. Full‑series shade group photo: clarifies the selection range.

2. Current SKU bottle image: confirms the shade the buyer has selected.

3. Close‑up of the product and its edges: showcases texture and appearance without fabricating usage effects.

4. Arm‑test image: demonstrates how the shade appears on skin.

5. Makeup look or scene image: provides context for usage, but does not replace shade confirmation.

After clicking on a shade, the first image should confirm the SKU; subsequent images can then explain the product’s texture, its effect on skin, and the intended usage scenario.

V. When producing foundation product images in bulk, which files can be reused, and which must be recreated for each shade?

Backgrounds, camera angles, bottle shadows, and gallery layouts can be created as master templates. However, product colors, shade names, batch codes on the bottle bottom, and test‑related content cannot simply be copied from the previous shade. The most efficient bulk workflow involves selecting one intermediate shade to finalize the overall layout, then replacing the confirmed bottle and color card for each individual shade—rather than generating a single image and later adjusting colors en masse using hue sliders.

Once the layouts for white‑background images, detail shots, and scene images have been finalized, PixPix can be used to supplement each shade’s product suite with identical compositions— and . Process only one SKU at a time, uploading both the original bottle image and the corresponding color‑matching cutout simultaneously; after output, verify the shade name and product texture before checking shadows, backgrounds, and props.

The master template is responsible for maintaining a unified composition, while actual color numbers are replaced one by one. Batch processing does not equate to a single-click color change.

VI. Before delivery, the beauty visual team conducts a cross-check using adjacent color numbers.

Do not limit your review to only the lightest and darkest shades—since their differences are too pronounced, many errors may go unnoticed. Arrange the bottle images, color swatches, test samples, and backend variant pictures side by side, comparing them row by row from left to right. If you notice reversed light-dark sequences, abrupt shifts in base tones, or mismatches between color names and corresponding images, immediately suspend use of that entire set of materials.

When exporting web images, retain the editable original files before converting them to sRGB. Adobe’s color management guidelines recommend sRGB as the preferred choice for web graphics; this helps minimize display deviations caused by color profiles, though it cannot ensure perfect consistency across all mobile screens. Final delivery still requires viewing on both desktop and mobile devices, confirming that adjacent shades remain distinguishable after compression.

VII. Common issues with foundation shade illustrations

1. When translating foundation shade names into multiple languages for multilingual websites, should the SKU number also be changed?

Do not modify the SKU number. While the visible shade name can be translated according to brand-approved localization rules, the backend SKU, image filenames, and color chart numbering must remain consistent; otherwise, different language pages may inadvertently link to incorrect images.

2. After replacing the bottle packaging for the same shade, can the old product images still be used?

If there are changes in bottle shape, transparency, pump mechanism, or labeling, a new bottle image must be created. When the formula and shade number remain unchanged, the approved color swatch can continue to serve as a color reference; however, the old bottle image should not appear in variant previews to prevent buyers from misidentifying the packaging.

3. Should out-of-stock shades remain listed on the full-color chart?

For short-term stockouts, the full-color chart may temporarily retain the out-of-stock shade, but the product page must clearly indicate its unavailability. If a shade has been permanently discontinued, update the color chart, variant images, and related shopping guidance accordingly to avoid continuing to present it as an available option.