ColorPicker

Pick colors

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

rgba(47, 119, 150, 0.7)

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

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

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

Color format

ColorPicker supports hex, hexa, rgb, rgba, hsl and hsla color formats. 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 swatches prop:

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

function Demo() {
  return (
    <ColorPicker
      format="hex"
      swatches={['#25262b', '#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 swatchesPerRow prop:

Swatches per row

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

function Demo() {
  return (
    <ColorPicker format="hex" swatches={['#25262b', '#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, Box } from '@mantine/core';

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

  return (
    <Box maw={200} mx="auto">
      <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 ta="center" mt={5}>
        {value}
      </Text>
    </Box>
  );
}

Size

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

Size

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

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

fullWidth

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

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

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

Styles API

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

Component Styles API

Hover over selectors to highlight corresponding elements

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

Accessibility

ColorPicker component is accessible by default:

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

To make 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

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community Follow Mantine on Twitter