Color picker component with single and multiple color selection. Refine luminosity with a slider when necessary.
Use it for filtering and anywhere where users need to pick colors.
Shipping with useful features for a refined UX, including:
- Usage on mobile and desktop
- Single and multiple select
- Refine luminosity
- List any number of color presets
- Multiple theme support
- Modal, popup and inline display support
- RTL Support
- Full localization and microcopy
As part of Pickers & dropdowns it can be picked up with the Framework and Complete licenses or with the component license.
Color demos available for other frameworks.
Viewing demos & code for
Color - Single/multiple select
Single and multiple color select from a predefined set of colors. Custom set can be used. With source code.
Color - Swipe direction
Color picker demo with a predefined set of colors. Supporting both horizontal and vertical scrolling. With source code.
Color - Refine
Color picker demo for selecting and setting the luminosity for a single color with a slider. For desktop & mobile.
Color - Custom colors
Color picker demo with selection from a custom set of colors. Use it on both mobile & desktop.
Color - Multiple select count
Multiple select count
Multiple color select with a maximum of six available slots. Custom set can be used. Use it on desktop & mobile.
Color - Color format
Color picker demo with support for value format in HEX, HSL and RGB. Return and work with the color value.
Color - Event handlers
Color picker for mobile and desktop demo with event hooks for custom integration and functionality.
Color - Display modes
Color picker for mobile and desktop with top, bottom, popup, center, modal, bubble and inline embeddable display.
Color - Desktop
desktop color picker for the web. Interact on the UI with cursor & pointer for usage on not just touchscreens.
Color - Theming capabilities
The look and feel of the color can be deeply customized. There are four levels of customization:
- Base themes: Choose between
Android Material and
- Light or dark: Every theme has a
dark variant. Setting the
'auto' will switch based on system settings.
- Custom themes: Use the theme builder to customize the colors and make it match your brand.
- Custom CSS: If you need further customization, the sky is the limit with CSS overrides.
You can also see how every example looks by changing the theme in the floating action bar on the right side.
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.