New in Sketch: Taking Smart Layout beyond Symbols
Skip Navigation

Tints

Last updated on 12 Oct 2023

Tints apply a single color to an entire group or Symbol. Unlike fills, Tints take into account semi-filled elements with different opacities and borders. Tints are great for things like complex icons or tabs in a navigation bar — or anywhere you want to show different states through a change in color.

Applying a tint

To apply a Tint, create a group or Symbol instance then click the + in the Tint panel in the Inspector. Tints work in a similar way to fills, where you can use the Color Picker or enter a hex code and change the overall opacity. However, you can only select a solid color as a tint.

You can override Tints in Symbol instances via the Overrides panel in the Inspector.

Semi-filled parts of this sample icon take on the Tint color, but with a lower opacity that reflects the original design