ColorPicker

Inline color picker
Import

Usage

rgba(47, 119, 150, 0.7)
import { useState } from 'react';
import { ColorPicker, Group, Text } from '@mantine/core';
function Demo() {
const [value, onChange] = useState('rgba(47, 119, 150, 0.7)');
return (
<Group position="center" direction="column">
<ColorPicker format="rgba" value={value} onChange={onChange} />
<Text>{value}</Text>
</Group>
);
}

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
<ColorPicker />

With swatches

You can add any amount of predefined color swatches:

<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:

<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
<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" />
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback