ColorPicker

Pick colors in hex(a), rgb(a), hsl(a) and hsv(a) formats

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

PackageIcon

@mantine/core

Usage

rgba(47, 119, 150, 0.7)

import { useState } from 'react';
import { ColorPicker, Text } from '@mantine/core';

function Demo() {
  const [value, onChange] = useState('rgba(47, 119, 150, 0.7)');

  return (
    <>
      <ColorPicker format="rgba" value={value} onChange={onChange} />
      <Text>{value}</Text>
    </>
  );
}

Controlled

The ColorPicker value must be a string; other types are not supported. The onChange function is called with a string value as a single argument.

import { useState } from 'react';
import { ColorPicker } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState('#ffffff');
  return <ColorPicker value={value} onChange={setValue} />;
}

ColorPicker can be used with uncontrolled forms the same way as a native input element. Set the name attribute to include color picker value in FormData object on form submission. To control the initial value in uncontrolled forms, use the defaultValue prop.

Example usage of uncontrolled ColorPicker with FormData:

import { ColorPicker } from '@mantine/core';

function Demo() {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        console.log('Color value:', formData.get('color'));
      }}
    >
      <ColorPicker
        name="color"
        defaultValue="#FF0000"
        format="hex"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Color format

ColorPicker supports hex, hexa, rgb, rgba, hsl and hsla color formats. The slider to change opacity and color preview are displayed only for hexa, rgba and hsla formats:

#C5D899

Format

import { ColorPicker } from '@mantine/core';

function Demo() {
  return <ColorPicker />;
}

With swatches

You can add predefined color swatches with the swatches prop:

import { ColorPicker } from '@mantine/core';

function Demo() {
  return (
    <ColorPicker
      format="hex"
      swatches={['#2e2e2e', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
    />
  );
}

By default, ColorPicker will display 7 swatches per row. You can configure it with the swatchesPerRow prop:

Swatches per row

import { ColorPicker } from '@mantine/core';

function Demo() {
  return (
    <ColorPicker format="hex" swatches={['#2e2e2e', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']} />
  );
}

To display swatches without picker, set withPicker={false} and fullWidth props:

#fff

import { useState } from 'react';
import { DEFAULT_THEME, ColorPicker, Text } from '@mantine/core';

function Demo() {
  const [value, onChange] = useState('#fff');

  return (
    <>
      <ColorPicker
        format="hex"
        value={value}
        onChange={onChange}
        withPicker={false}
        fullWidth
        swatches={[
          ...DEFAULT_THEME.colors.red.slice(0, 7),
          ...DEFAULT_THEME.colors.green.slice(0, 7),
          ...DEFAULT_THEME.colors.blue.slice(0, 7),
        ]}
      />

      <Text>{value}</Text>
    </>
  );
}

Size

ColorPicker has 5 predefined sizes: xs, sm, md, lg and xl:

Size

import { ColorPicker } from '@mantine/core';

function Demo() {
  return <ColorPicker />;
}

fullWidth

Set the fullWidth prop to stretch the component to 100% of parent width. In this case the picker will not have a fixed width, but you can still use the size prop to control the sizes of sliders.

import { ColorPicker } from '@mantine/core';

function Demo() {
  return <ColorPicker fullWidth size="lg" format="rgba" />;
}

Styles API

ColorPicker supports the Styles API; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.

Component Styles API

Hover over selectors to highlight corresponding elements

/*
 * Hover over selectors to apply outline styles
 *
 */

Accessibility

The ColorPicker component is accessible by default:

Saturation, hue and alpha sliders are focusable
When the mouse is used to interact with the slider, focus is moved to the slider
All values can be changed with arrows

To make the component accessible for screen readers, set saturationLabel, hueLabel and alphaLabel:

import { ColorPicker } from '@mantine/core';

function Demo() {
  return (
    <ColorPicker
      saturationLabel="Saturation"
      hueLabel="Hue"
      alphaLabel="Alpha"
    />
  );
}

ColorInput

Fieldset