# VectorPaint two-colour overlaps: compare opacity and stacking order Language: en Canonical: [VectorPaint two-colour overlaps: compare opacity and stacking order]() 中文：[中文 HTML]() English: [English HTML]() Published: 2026-10-23T00:00:00+08:00 Modified: 2026-10-23T10:44:58+08:00 Author: Bison Use two coloured shapes and a fixed background to compare object opacity, overlapping areas and front-to-back order in an explainable colour study. English translation of the [Chinese original](), translated on 2026-10-23. The article body uses automated translation; app descriptions, historical reading notes and video subtitles receive separate editorial checks. Original publication dates, attribution, code and version notes are retained. Two translucent color shapes can produce a new visible color, but both the background and stacking order affect the result. This VectorPaint exercise separates color, opacity, and order on a two-color test board, then uses the findings for a simple abstract graphic. ## Establish a baseline with fully opaque shapes Create a 900×600 px landscape canvas with a light background. Draw two equal circles, one warm and one cool, fully opaque and without strokes. Overlap them partially and observe how the upper circle covers the lower. Record which circle is in front and which behind. At this stage, the overlap mostly shows the upper object; do not expect a third blended color automatically. Understand ordinary occlusion before adjusting opacity so normal stacking is not mistaken for a color failure. ## Change only the upper object's opacity Select the upper circle and gradually lower opacity, comparing approximately three-quarters, one-half, and one-quarter. Keep the lower circle, background, and colors unchanged. Inspect both overlapping and nonoverlapping areas each time, noting that the upper circle itself is affected by the background too. Do not change both fill-color transparency and overall object opacity together, or their contributions become unclear. Complete the exercise through one control before comparing the other. Record whether you changed the object or color so a later reset does not miss a change hidden elsewhere. ## Swap stacking order for a second comparison Copy both circles beside the originals, preserving colors and opacity while swapping only their order. Compare overlap colors and which edge covers which. Normal transparency compositing depends on order, so changing it may alter appearance. If the two groups look nearly identical, verify that their transparency and colors allow an observable difference and that the intended objects were reordered. Do not change colors merely to exaggerate the difference; this round tests order only. Fixed comparison conditions identify the true cause. ## Try a dark background Add a dark background in a copy while leaving circle settings unchanged. Translucent areas combine with it, potentially changing the entire mood. This does not necessarily mean the original fill color changed; the compositing conditions differ. Inspect the separately exposed part of each circle, then the overlap center. For stable use across backgrounds, increase opacity or make explicit light-background and dark-background variants. Satisfaction on a white editing background does not guarantee the same appearance on every webpage color. ## Turn the experiment into a graphic Choose a relationship you like from the test board and create or save a separate practice copy. Build an abstract graphic from two circles and a rectangle, limiting translucent overlap to an intended accent area and leaving space elsewhere. Define one focal point instead of covering the canvas with translucent fragments. Use a rectangle as a stable base and two circles for soft overlap. Check stacking and group related objects if useful. Changing a group's overall opacity affects the entire combination and may differ from changing objects individually, so keep original parameter notes for comparison. ## Check how overlap affects reading For text over the graphic, find a relatively stable color area first. Text crossing multiple overlaps repeatedly changes contrast and may need a backing or revised layout. Attractive graphics and readable text require separate checks. Transparency need not solve every task. Likewise, important icons should not depend only on subtle color overlap. View the graphic temporarily in grayscale or at reduced size to check its main silhouette. Color relationships add depth, but basic shape and space should work independently, especially at small sizes or low brightness. ## Check exports on the actual background For transparent PNG, exclude the test background and inspect the image on its real destination color. For a fixed appearance, provide a version with an explicit background alongside the transparent one, naming their purposes distinctly. A transparent file alone cannot guarantee identical appearance on different backgrounds. For SVG, check layer order and opacity in the receiving environment. Include a PNG comparison reference while retaining the VectorPaint original for further editing. After export, verify that color, opacity, order, and background match the confirmed version. ## Frequently asked questions **Does a third color in the overlap mean the app added an object?** Not necessarily. Translucent shapes combine with underlying content to create visible results without a separate third shape. Hide objects individually to observe each contribution. **Does lower opacity simply mean a lighter color?** On white, the result may look lighter; on dark, it may darken or shift in combined color. Opacity controls how much underlying content contributes, not simply lightness. Compare on a fixed background, then choose settings for the actual environment to make results more predictable. ## Keep test backgrounds out of deliverables Name background boards clearly in comparison copies, such as Light Comparison and Dark Comparison. Before exporting transparency, inspect layers so only the graphic remains. If the output still has a solid rectangle around it, check for a normal bottom rectangle rather than repeatedly toggling export options. A background object's color differs from the canvas display background; separate checks locate the problem faster. ## Related tutorials and sources [Fill versus stroke](), [Transparent-output checks](). Based on [VectorPaint App Store description]() and the available feature entry points; [Apple release information]()Checked on October 23, 2026: public version 1.0.7, requiring iOS / iPadOS 17 or later. The dimensions, wording and shapes in this guide are suggested exercises.