We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How do i connect a color pallete to a color picker

Here is my code

const CustomColorPicker = ({ id, mode }) => <ColorPickerComponent id={id} mode={mode} modeSwitcher={false} inline showButtons={false} change={change} />;

const ColorPicker = () => (
  <div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
    <Header category="App" title="Color Picker" />
    <div className="text-center">
      <div id="preview" />
      <div className="flex justify-center items-center gap-20 flex-wrap">
          <p className="text-2xl font-semibold mt-2 mb-4">Inline Pallete</p>
          <CustomColorPicker id="inline-palette" mode="Palette" />
          <p className="text-2xl font-semibold mt-2 mb-4">Inline Picker</p>
          <CustomColorPicker id="inline-picker" mode="Picker" />

I want to be able to choose a color from the color pallete and that color be automatically selected from the color picker so i can pick the exact shade

1 Reply

YA YuvanShankar Arunagiri Syncfusion Team April 10, 2023 05:35 AM UTC

Hi Andrei,

We have checked your reported query and using the change event of color pallete component, we can get the selected color from pallete and set to color picker component shown as below.

function onChange(args) {

    var pickerElem = document.getElementById('inline-picker').ej2_instances[0];

    pickerElem.value = args.value;


Sample link: https://stackblitz.com/edit/react-9hixfj?file=index.js

Get back to us if you need any further assistance on this. 


YuvanShankar A

Live Chat Icon For mobile
Up arrow icon