Tints · Sketch

Tints apply a single color to an entire frame, graphic, 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.
To apply a Tint, select a frame, graphic, group or Symbol instance then click on the Effects section header, or + icon and select Tint. 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.
Semi-filled parts of this sample icon take on the Tint color, but with a lower opacity that reflects the original design
To use tints as overrides with nested Symbols, you first need to apply a default tint to any Symbol instances on the Symbol Source you’re working with.
Now, when you select a Symbol instance , you’ll see the tint override as a color override in the Color section in the Inspector. Clicking on the color icon will bring up the Color panel so you can easily override the default tint.
A Tint override being applied on multiple Symbol instances.
Did you find this useful?
Submitting your vote…
Want a reply? Add your email and we’ll get back to you.
Need help now? Add your email and we’ll get back to you, or contact our support team.
Need help now? See our Support pages or get in touch.
Get all the latest news, blog posts and product updates from Sketch, delivered directly to your inbox. We’ll rarely send more than one email a month.