Color Picker Component New

The Ignite UI for React Color Picker is a form-associated component that lets users pick and edit a color through an interactive dropdown with a gradient canvas, hue and alpha sliders, format switching, an eye-dropper, and predefined swatches.

Live Demo

The React Color Picker demo shows the anchor in input mode that previews the currently selected color and opens a dropdown where you can edit or select a different color.

Anatomy

The React Color Picker is composed of an anchor that opens a popover dropdown containing the picker surface — a gradient canvas, hue and alpha sliders, format-aware color inputs, action buttons, and an optional swatch grid.

<igc-color-picker>
└── ::part(color-picker)
    ├── igc-popover
    │   ├── ::part(anchor)                   // trigger button (default mode) or swatch button in the input prefix (input mode)
    │   │                                    // also ::part(empty) with no value, ::part(input-mode) in input mode
    │   └── ::part(picker)                   // dropdown, role="dialog"
    │       ├── ::part(picker-canvas)        // gradient canvas
    │       │   └── ::part(marker)           // focusable slider; also ::part(dragging) while dragged
    │       ├── ::part(main-row)
    │       │   ├── ::part(hue)              // hue range slider
    │       │   └── ::part(buttons)
    │       │       ├── ::part(copy)         // copy-to-clipboard button
    │       │       └── ::part(eye-dropper)  // eye-dropper button
    │       ├── ::part(alpha-row)            // rendered when show-alpha is set
    │       │   ├── ::part(alpha)            // alpha range slider
    │       │   └── ::part(alpha-input)      // alpha percentage input
    │       ├── ::part(inputs-row)
    │       │   ├── ::part(format-select)    // format switcher, hidden when hide-formats is set
    │       │   └── color value input
    │       └── ::part(swatches)             // rendered when swatches is non-empty
    │           └── ::part(swatch)           // individual swatch buttons
    ├── ::part(label)                        // default mode, rendered when label is set
    └── helper text and validation messages

Getting Started

To use the React Color Picker, complete the Ignite UI for React Getting Started topic for the basic project setup, then register the component.

The Color Picker requires igniteui-react 19.9.0 or later.

Import the IgrColorPicker wrapper and a theme:

import { IgrColorPicker } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

Render the Color Picker with a label:

<IgrColorPicker label="Pick a color"></IgrColorPicker>

Usage

Set value to any CSS color string: hex (with or without the leading #), rgb/rgba, hsl/hsla, or a named color. An empty or invalid string clears the value, and the anchor shows a checkered pattern.

<IgrColorPicker value="#1976d2"></IgrColorPicker>

Mode

The mode property controls the anchor presentation. Its default value, default, renders a trigger button that previews the current color; input renders an editable text field with a color swatch prefix. Both anchors open the same picker dropdown.

<IgrColorPicker mode="input" label="Background"></IgrColorPicker>

Format

Use the format property to control how the color is serialized. Supported values are hex, rgb, and hsl. Changing the format re-serializes the existing color without altering it, so no igcInput or igcChange event is emitted.

<IgrColorPicker format="rgb" value="#1976d2"></IgrColorPicker>

To hide the built-in format switcher and lock the picker to a single format, set the hideFormats property.

<IgrColorPicker hideFormats={true} format="hex"></IgrColorPicker>

Alpha

By default the picker edits fully opaque colors. Enable the alpha slider and its percentage input by setting the showAlpha property.

<IgrColorPicker showAlpha={true} value="rgba(25, 118, 210, 0.5)"></IgrColorPicker>

Swatches

Provide a list of predefined colors through the swatches property. When set, the picker renders a swatch grid below the color inputs. Clicking a swatch applies it as the current color. There is no limit to the number of swatches you can define.

<IgrColorPicker swatches={['#f44336', '#e91e63', '#9c27b0', '#3f51b5', '#2196f3', '#4caf50']}></IgrColorPicker>

Disabled

Set the disabled property to disable the Color Picker.

<IgrColorPicker disabled={true} value="#1976d2"></IgrColorPicker>

Validation

Mark the control as required to fail form validation when no color is selected. The component supports the standard form-associated API — checkValidity, reportValidity, and setCustomValidity.

Show helper and validation messages under the anchor through these slots:

• helper-text – Displays a hint or instructional message below the anchor.
• value-missing – Renders custom content when the required field validation fails.
• invalid – Renders custom content when the component is in an invalid state.
• custom-error – Displays content when a custom validation message is set using setCustomValidity().

<IgrColorPicker required={true} label="Brand color">
  <span slot="helper-text">Pick the primary brand color.</span>
  <span slot="value-missing">A color is required.</span>
</IgrColorPicker>

Size

Control the Color Picker size by setting the --ig-size variable to one of three options: --ig-size-small, --ig-size-medium, or --ig-size-large. This can be used to adjust the size of both the default and input mode anchors, as well as the dropdown window.

Do/Don’t

When to use: Use the Color Picker when users need to enter or edit an arbitrary color through a visual editor and the value must take part in form submission and validation. Always provide a clear label, and prefer input mode when the picker sits alongside other form fields.

When not to use: When users only choose from a small fixed set of colors, render that set as regular buttons or a select instead.

Do	Don’t
Bring in the full Color Picker for open-ended, creative tasks — a drawing tool’s brush, an illustration fill, a chart series, a custom theme.	Avoid using the Color Picker if users only need to select from a set palette or don’t require advanced customization options.

Properties

The React Color Picker exposes properties for its content, presentation, and form association.

Methods

Events

Styling

The React Color Picker appearance can be customized through CSS variables, CSS parts and the theming system.

Styling Variables

Style Parts

Sass Theming

Use the color-picker-theme function for customizing the appearance of the Color Picker through Sass.

@use "igniteui-theming/sass/themes" as *;

$custom-color-picker-theme: color-picker-theme(
  $picker-background: #e6f2ff,
  $picker-border-color: #a9b8cc,
  $picker-border-radius: 1rem
);

:root {
  @include tokens($custom-color-picker-theme);
}

CSS Variables

Set component CSS variables directly when you need local styling without a Sass build step.

igc-color-picker {
  --ig-color-picker-picker-background: #e6f2ff;
  --ig-color-picker-picker-border-color: #a9b8cc;
  --ig-color-picker-picker-border-radius: 1rem;
  --ig-color-picker-picker-elevation: none;
}

igc-color-picker::part(picker-canvas) {
  border-radius: 1rem;
}

Styling with Tailwind

Style the Color Picker with the custom Tailwind utility classes from igniteui-theming. Set up Tailwind with the Ignite UI theme first:

@import "tailwindcss/theme.css";
@import "tailwindcss/utilities.css";

Apply the light-color-picker utility to give the Color Picker its theme variables, then override individual variables with arbitrary-property classes. The ! prefix marks the utility as important so it takes precedence over the component’s default theme styles.

<IgrColorPicker className="!light-color-picker [--ig-color-picker-picker-background:#fff0eb] [--ig-color-picker-picker-border-color:#f95924]"></IgrColorPicker>

Accessibility

The React Color Picker is a keyboard-operable, form-associated control. The anchor is either a labelled button (default mode) or an editable input (input mode), and the open picker traps focus.

Keyboard Interaction

The keybindings below are skipped while the component is disabled.

Screen Readers / ARIA

• The anchor sets aria-haspopup="dialog" and aria-expanded, and references the helper-text container via aria-describedby so helper and validation messages are announced.
• The picker dropdown has role="dialog" and the accessible name Color picker.
• The gradient canvas marker has role="slider" and announces both axes through aria-valuetext (for example, Saturation 50%, brightness 80%).
• The hue and alpha sliders are native input[type="range"] elements labelled via aria-label (Hue, Alpha slider).
• The format switcher and the color value input carry visually-hidden labels; the copy and eye-dropper buttons expose visually-hidden text.
• Each swatch button exposes its color through aria-label.
• While the picker is open, focus is trapped within it; the picker content is inert while closed and excluded from the tab order.

Accessibility Compliance

Infragistics documents Ignite UI for React accessibility support for Section 508 and WCAG 2.1 guideline areas in the Accessibility Compliance topic.

Your responsibilities:

• Provide an accessible label through the label property or a projected label so the anchor is identifiable to screen readers.
• Do not rely on color alone to convey required or invalid state; use the validation slots or helper text.
• Keep sufficient contrast when overriding theme styles for the anchor and picker surface.

Troubleshooting

The React Color Picker troubleshooting guidance follows a problem → cause → fix format for common integration and platform issues.

Why did my color value clear or revert?

Assigning an empty, whitespace-only, or invalid string to value clears the color instead of keeping the previous value. An invalid string typed into the color input reverts to the current color instead. Assign a valid CSS color string, and make sure the environment supports OffscreenCanvas (see Known Limitations).

Why is the emitted value in a different format than what I typed?

The value is always serialized in the active format, so an input string does not round-trip byte-for-byte. For example, typing red with format="hex" produces #ff0000. Set format to the notation you expect to read back.

Why is no igcInput emitted while I type a color?

The color input commits a typed color when it changes, not on every keystroke, and a typed color emits no igcInput. Listen for igcChange, which fires when focus leaves the component with a different color.

Known Limitations

• The eye-dropper button is enabled only in browsers that implement the EyeDropper API. Support is detected once, when the component is created.
• Copying to the clipboard depends on navigator.clipboard and a secure context (HTTPS or localhost); it silently does nothing where the API is unavailable or permission is denied.
• The component parses every color string through an OffscreenCanvas 2D context. Where OffscreenCanvas is unavailable, every value resolves to empty.
• The built-in accessible labels, such as Hue, Alpha slider, Open color picker, and Copy color value to clipboard, are English-only and not localized.

API References

Dependencies

The React Color Picker requires a theme stylesheet to apply its visual styling. See the setup in Getting Started.

Additional Resources

Use these resources for support and related Ignite UI documentation.

• Ignite UI for React Forums
• Ignite UI for React GitHub

FAQ