how to tint liquid glass

To tint Liquid Glass, you can use custom colors selectively to bring attention to elements that serve a distinct functional purpose. Liquid Glass introduces a new way of tinting elements that respects the principles of the material and maximizes legibility. This technique is consistent across all Liquid Glass elements, from labels and text to fully tinted buttons and the time on your lock screen.

When you select a color, it generates a range of tones that are mapped to the content brightness underneath the tinted element. This approach draws inspiration from how colored glass works in reality, changing its hue, brightness, and saturation depending on what's behind it, without deviating too much from the intended color. Tinting should be used to emphasize primary elements and actions in the UI, and it's important to avoid tinting all elements, as this can make nothing stand out and lead to confusion.

For more detailed guidance, you can refer to the session Meet Liquid Glass (15:48).