Components

Color Swatch Picker

A grid-based selection tool that presents a set of predefined colors for easy and consistent color choices.

Basic

A color swatch picker allows users to choose a color from a predefined set.

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Composed Components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

The Color Swatch Picker comes packed with several components to enhance functionality and provide a seamless experience.

A predefined color block that allows users to quickly select commonly used or brand-specific colors.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

Anatomy

Controlled

The color swatch can be managed in a controlled manner.

hex#0D6EFDhexa#0D6EFDFFrgbrgb(13, 110, 253)rgbargba(13, 110, 253, 1)hslhsl(215.75, 98.36%, 52.16%)hslahsla(215.75, 98.36%, 52.16%, 1)hsbhsb(215.75, 94.86%, 99.22%)hsbahsba(215.75, 94.86%, 99.22%, 1)

Disabled

While you can disable individual picker items, disabling the entire picker is possible but generally not recommended.

hex#0D6EFDhexa#0D6EFDFFrgbrgb(13, 110, 253)rgbargba(13, 110, 253, 1)hslhsl(215.75, 98.36%, 52.16%)hslahsla(215.75, 98.36%, 52.16%, 1)hsbhsb(215.75, 94.86%, 99.22%)hsbahsba(215.75, 94.86%, 99.22%, 1)

Get premium Blocks

Create stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.
Previous
Color Swatch
Next
Color Thumb