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
React Single and multiple color select from a predefined set of colors. Custom set can be used. With source code. For React and Ionic React.
Color - Swipe direction
React Color picker demo with a predefined set of colors. Supporting both horizontal and vertical scrolling. With source code. For React and Ionic React.
Color - Refine
React Color picker demo for selecting and setting the luminosity for a single color with a slider. For desktop & mobile. For React and Ionic React.
Color - Custom colors
React Color picker demo with selection from a custom set of colors. Use it on both mobile & desktop. For React and Ionic React.
Color - Multiple select count
React Multiple color select with a maximum of six available slots. Custom set can be used. Use it on desktop & mobile. For React and Ionic React.
Color - Color format
React Color picker demo with support for value format in HEX, HSL and RGB. Return and work with the color value. For React and Ionic React.
Color - Event handlers
React Color picker for mobile and desktop demo with event hooks for custom integration and functionality. For React and Ionic React.
Color - Display modes
React Color picker for mobile and desktop with top, bottom, popup, center, modal, bubble and inline embeddable display. For React and Ionic React.
Color - Desktop
React desktop color picker for the web. Interact on the UI with cursor & pointer for usage on not just touchscreens. For React and Ionic React.
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 from the header.
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.