With our original color component, users could upvote or downvote a randomly generated color to train suggestions for other components. The canvas preview showed the color as a background and a set of simulations for various color vision deficiencies.

Because color can be used in a variety of ways, we've added more contexts to preview a color's potential usage. We've also added preview components for applying color to text, borders, gradients, and blends.


Preview your color applied to a linear opacity scale.

Mix blend modes

Visualize how you can blend black and white photos with your brand colors using a set of blend modes available in CSS.

Visual deficiency preview

Appearance of color varies greatly from person to person. Preview how different people will see your designs with our simulations for various types of color blindness.

Previews included for:

Typography & UI

View simple UI elements, including a typography preview with upper and lowercase characters. Background colors are selected automatically based on accessible contrast thresholds.


Preview potential gradient styles, shifted for lightness, darkness, and hue.