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
Angular Single and multiple color select from a predefined set of colors. Custom set can be used. With source code. For Angular 14 and Ionic 6.
Color - Swipe direction
Angular Color picker demo with a predefined set of colors. Supporting both horizontal and vertical scrolling. With source code. For Angular 14 and Ionic 6.
Color - Refine
Angular Color picker demo for selecting and setting the luminosity for a single color with a slider. For desktop & mobile. For Angular 14 and Ionic 6.
Color - Custom colors
Angular Color picker demo with selection from a custom set of colors. Use it on both mobile & desktop. For Angular 14 and Ionic 6.
Color - Multiple select count
Angular Multiple color select with a maximum of six available slots. Custom set can be used. Use it on desktop & mobile. For Angular 14 and Ionic 6.
Color - Color format
Angular Color picker demo with support for value format in HEX, HSL and RGB. Return and work with the color value. For Angular 14 and Ionic 6.
Color - Event handlers
Angular Color picker for mobile and desktop demo with event hooks for custom integration and functionality. For Angular 14 and Ionic 6.
Color - Display modes
Angular Color picker for mobile and desktop with top, bottom, popup, center, modal, bubble and inline embeddable display. For Angular 14 and Ionic 6.
Color - Desktop
Angular desktop color picker for the web. Interact on the UI with cursor & pointer for usage on not just touchscreens. For Angular 14 and Ionic 6.
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.