Colors

Colors in Flair are organized by variants. Each variant has different colors for different intensity levels (400—800).

In light color scheme, the higher the intensity, the lighter the color is. To put it simply, a lighter color have the same hue and saturation level, but higher lightness.

In dark color scheme, the higher the intensity, the darker the color is. Try toggling the color scheme using the button below and observe the differences.

Because of how the "intensity" concept works in Flair, in dark color scheme, the order of color for each shades are basically just reversed! Obviously this will not work well in ALL cases, so you will have to adjust according to your needs.

Variants

By default, Flair has 7 color variants: primary, secondary, success, warning, error, dark and light. All of the colors are accessible from the ThemeContext. Accessing a color is as simple as colors[variant][intensity].color. To get the contrasting color, colors[variant][intensity].contrastingColor.

dark

light

primary

secondary

success

warning

error

Foreground and background colors

In light color scheme, background colors will refer to the light-variant colors and foreground colors will refer to the dark-variant colors. Similarly, in dark color scheme, background colors are dark-variant and foreground colors are light-variant.

foreground

background