ColorPicker

Inline color picker
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

Component supports hex, rgb, rgba, hsl and hsla color formats. Slider to change opacity is displayed only for rgba and hsla formats:

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


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

With swatches

You can add any amount of predefined color swatches:

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, there will be 10 swatches per row, you can change this with swatchesPerRow 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']} />
  );
}

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

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


function Demo() {
  const [value, onChange] = useState(null);


  return (
    <div style={{ maxWidth: 200, marginLeft: 'auto', marginRight: 'auto' }}>
      <ColorPicker
        format="hex"
        value={value}
        onChange={onChange}
        withPicker={false}
        fullWidth
        swatches={[
          ...DEFAULT_THEME.colors.red,
          ...DEFAULT_THEME.colors.green,
          ...DEFAULT_THEME.colors.blue,
        ]}
      />
      <Text align="center" style={{ marginTop: 5 }}>
        {value}
      </Text>
    </div>
  );
}

Size

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

Size
xs
sm
md
lg
xl
import { ColorPicker } from '@mantine/core';


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

AlphaSlider

You can import and use AlphaSlider and HueSlider components outside of ColorPicker:

Alpha value: 1
Size
xs
sm
md
lg
xl
import { useState } from 'react';
import { AlphaSlider, Text } from '@mantine/core';


function Demo() {
  const [value, onChange] = useState(1);


  return (
    <>
      <Text>Alpha value: {value}</Text>
      <AlphaSlider color="#1c7ed6" value={value} onChange={onChange} />
    </>
  );
}

HueSlider

Hue value: 250
Size
xs
sm
md
lg
xl
import { useState } from 'react';
import { HueSlider, Text } from '@mantine/core';


function Demo() {
  const [value, onChange] = useState(250);


  return (
    <>
      <Text>Hue value: {value}</Text>
      <HueSlider value={value} onChange={onChange} />
    </>
  );
}

Accessibility and usability

ColorPicker, AlphaSlider and HueSlider components are accessible by default:

  • Saturation, hue and alpha sliders are focusable
  • When user uses mouse to interact with slider, focus is moved on slider
  • All values can be changed with arrows

To make component visible for screen readers provide following props:

<ColorPicker saturationLabel="Saturation" hueLabel="Hue" alphaLabel="Alpha" />
Go back
ColorInput – @mantine/core
Up next
FileInput – @mantine/core

ColorPicker component props

NameTypeDescription
alphaLabel
string
Alpha slider aria-label
defaultValue
string
Uncontrolled component default value
focusable
boolean
Should interactive elements be focusable
format
"hex" | "hexa" | "rgba" | "rgb" | "hsl" | "hsla"
Color format
fullWidth
boolean
Force picker to take 100% width of its container
hueLabel
string
Hue slider aria-label
onChange
(color: string) => void
Called when color changes
onChangeEnd
(color: string) => void
Called when user stops dragging thumb or changes value with arrows
onColorSwatchClick
(color: string) => void
Called when color swatch is clicked
saturationLabel
string
Saturation slider aria-label
size
"xs" | "sm" | "md" | "lg" | "xl"
Predefined component size
swatches
string[]
Predefined colors
swatchesPerRow
number
Number of swatches displayed in one row
value
string
Controlled component value
withPicker
boolean
Set to false to display swatches only

ColorPicker component Styles API

NameStatic selectorDescription
wrapper.mantine-ColorPicker-wrapperRoot element
body.mantine-ColorPicker-bodyIncludes hue and alpha sliders and color preview
preview.mantine-ColorPicker-previewColor preview
sliders.mantine-ColorPicker-slidersHue and alpha sliders wrapper
slider.mantine-ColorPicker-sliderAlpha and hue sliders
sliderOverlay.mantine-ColorPicker-sliderOverlayHue and alpha sliders overlays
thumb.mantine-ColorPicker-thumbHue, alpha and saturation sliders thumbs
saturation.mantine-ColorPicker-saturationSaturation slider
swatch.mantine-ColorPicker-swatchColorSwatch component in swatches list
swatches.mantine-ColorPicker-swatchesWrapper around all swatches
Learn more about Styles API
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter