Skip to main content

Interface: ColorTints

A complete set of color tints across the luminance spectrum.

ColorTints provides a comprehensive scale of luminance variations for a single color, ranging from very light (50) to very dark (1000). This consistent scale enables systematic color application throughout the interface while maintaining proper contrast relationships.

Systematic color tinting creates visual hierarchy and ensures accessibility by providing appropriate contrast levels for different interface elements.

Properties

100

100: string

Very light tint


1000

1000: string

Darkest tint (approaching black)


200

200: string

Light tint


300

300: string

Medium-light tint


400

400: string

Light-medium tint


50

50: string

Lightest tint (near white)


500

500: string

Base/medium tint (primary color)


600

600: string

Medium-dark tint


700

700: string

Dark tint


800

800: string

Very dark tint


900

900: string

Near-black tint