ColorPicker

PaletteManager

PaletteManager lets you add your own colors by typing in the hexadecimal code and clicking the check icon or pressing Enter. To remove custom colors, simply click the Close icon on each item.

tsx

import React from 'react';
import ColorPicker, { PaletteManager } from 'intergalactic/color-picker';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';

const Demo = () => {
  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='main-theme-color'>
        Main theme color
      </Text>
      <ColorPicker>
        <ColorPicker.Trigger mt={2} id='main-theme-color' />
        <ColorPicker.Popper>
          <ColorPicker.Colors />
          <PaletteManager>
            <PaletteManager.Colors />
            <PaletteManager.InputColor />
          </PaletteManager>
        </ColorPicker.Popper>
      </ColorPicker>
    </Flex>
  );
};

export default Demo;

import React from 'react';
import ColorPicker, { PaletteManager } from 'intergalactic/color-picker';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';

const Demo = () => {
  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='main-theme-color'>
        Main theme color
      </Text>
      <ColorPicker>
        <ColorPicker.Trigger mt={2} id='main-theme-color' />
        <ColorPicker.Popper>
          <ColorPicker.Colors />
          <PaletteManager>
            <PaletteManager.Colors />
            <PaletteManager.InputColor />
          </PaletteManager>
        </ColorPicker.Popper>
      </ColorPicker>
    </Flex>
  );
};

export default Demo;

Input validation

To prevent users from entering white as a color option, replace the default validation function in PaletteManager.InputColor with your own custom validation function using the onChange prop. Here is an example:

tsx

import React from 'react';
import ColorPicker, { PaletteManager } from 'intergalactic/color-picker';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';

const Demo = () => {
  const [state, setState] = React.useState<'normal' | 'invalid'>('normal');

  const onChange = (value) => {
    if (value.toLowerCase() === 'ffffff') {
      setState('invalid');
    }

    return false;
  };

  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='t-shirt-color'>
        T-shirt color
      </Text>
      <ColorPicker>
        <ColorPicker.Trigger mt={2} id='t-shirt-color' />
        <ColorPicker.Popper>
          <ColorPicker.Colors />
          <PaletteManager>
            <PaletteManager.Colors />
            <PaletteManager.InputColor state={state} onChange={onChange} />
          </PaletteManager>
        </ColorPicker.Popper>
      </ColorPicker>
    </Flex>
  );
};

export default Demo;

import React from 'react';
import ColorPicker, { PaletteManager } from 'intergalactic/color-picker';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';

const Demo = () => {
  const [state, setState] = React.useState<'normal' | 'invalid'>('normal');

  const onChange = (value) => {
    if (value.toLowerCase() === 'ffffff') {
      setState('invalid');
    }

    return false;
  };

  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='t-shirt-color'>
        T-shirt color
      </Text>
      <ColorPicker>
        <ColorPicker.Trigger mt={2} id='t-shirt-color' />
        <ColorPicker.Popper>
          <ColorPicker.Colors />
          <PaletteManager>
            <PaletteManager.Colors />
            <PaletteManager.InputColor state={state} onChange={onChange} />
          </PaletteManager>
        </ColorPicker.Popper>
      </ColorPicker>
    </Flex>
  );
};

export default Demo;

Custom trigger

You have complete control over the appearance of ColorPicker, including the trigger.

tsx

import React from 'react';
import ColorPicker from 'intergalactic/color-picker';
import Input from 'intergalactic/input';
import { Flex, Box } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';

const Demo = () => {
  const [value, setValue] = React.useState('#C695FF');

  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='new-tag'>
        New tag
      </Text>
      <ColorPicker value={value} onChange={setValue}>
        <Input ml={1} w={200} mt={2}>
          <ColorPicker.Trigger tag={Input.Addon} interactive aria-label='New tag color'>
            <div
              style={{
                width: '12px',
                height: '12px',
                borderRadius: '50%',
                border: '1px solid #C4C7CF',
                backgroundColor: value,
              }}
            />
          </ColorPicker.Trigger>
          <Input.Value placeholder='Tag name' id='new-tag' />
        </Input>
        <ColorPicker.Popper>
          <ColorPicker.Colors />
        </ColorPicker.Popper>
      </ColorPicker>
    </Flex>
  );
};

export default Demo;

import React from 'react';
import ColorPicker from 'intergalactic/color-picker';
import Input from 'intergalactic/input';
import { Flex, Box } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';

const Demo = () => {
  const [value, setValue] = React.useState('#C695FF');

  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='new-tag'>
        New tag
      </Text>
      <ColorPicker value={value} onChange={setValue}>
        <Input ml={1} w={200} mt={2}>
          <ColorPicker.Trigger tag={Input.Addon} interactive aria-label='New tag color'>
            <div
              style={{
                width: '12px',
                height: '12px',
                borderRadius: '50%',
                border: '1px solid #C4C7CF',
                backgroundColor: value,
              }}
            />
          </ColorPicker.Trigger>
          <Input.Value placeholder='Tag name' id='new-tag' />
        </Input>
        <ColorPicker.Popper>
          <ColorPicker.Colors />
        </ColorPicker.Popper>
      </ColorPicker>
    </Flex>
  );
};

export default Demo;

Several ways to use component

There are multiple ways to add colors in ColorPicker;

The first method is to use the colors prop in ColorPicker.Colors for default colors, and in PaletteManager for customizable colors that can be added or removed.
The second method is to use ColorPicker.Item and PaletteManager.Item, which allows for the use of custom components instead of default items. The next two examples are identical.

tsx

import React from 'react';
import ColorPicker, { PaletteManager } from 'intergalactic/color-picker';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('#98848D');
  const [customColors, setCustomColors] = React.useState(['#8649E6', '#8649E7', '#8649E8']);

  return (
    <Flex gap={5} flexWrap>
      <Flex direction='column'>
        <Text tag='label' size={200} htmlFor='player-1-color'>
          Player 1 color
        </Text>
        <ColorPicker value={value} onChange={setValue}>
          <ColorPicker.Trigger mt={2} id='player-1-color' />
          <ColorPicker.Popper>
            <ColorPicker.Colors
              colors={[
                null,
                '#8649E1',
                '#FF5733',
                '#98848D',
                '#8E3B29',
                '#B0E727',
                '#27D3E7',
                '#2D747C',
                '#6ad0de',
                '#6E2D7C',
              ]}
            />
            <PaletteManager colors={customColors} onColorsChange={setCustomColors}>
              <PaletteManager.Colors />
              <PaletteManager.InputColor />
            </PaletteManager>
          </ColorPicker.Popper>
        </ColorPicker>
      </Flex>
      <Flex direction='column'>
        <Text tag='label' size={200} htmlFor='player-2-color'>
          Player 2 color
        </Text>
        <ColorPicker value={value} onChange={setValue}>
          <ColorPicker.Trigger mt={2} id='player-2-color' />
          <ColorPicker.Popper>
            <ColorPicker.Colors>
              <ColorPicker.Item value={null} />
              <ColorPicker.Item value='#8649E1' />
              <ColorPicker.Item value='#FF5733' />
              <ColorPicker.Item value='#98848D' />
              <ColorPicker.Item value='#8E3B29' />
              <ColorPicker.Item value='#B0E727' />
              <ColorPicker.Item value='#27D3E7' />
              <ColorPicker.Item value='#2D747C' />
              <ColorPicker.Item value='#6ad0de' />
              <ColorPicker.Item value='#6E2D7C' />
            </ColorPicker.Colors>
            <PaletteManager onColorsChange={setCustomColors}>
              <PaletteManager.Colors>
                {customColors.map((color) => (
                  <PaletteManager.Item value={color} key={color} />
                ))}
              </PaletteManager.Colors>
              <PaletteManager.InputColor />
            </PaletteManager>
          </ColorPicker.Popper>
        </ColorPicker>
      </Flex>
    </Flex>
  );
};

export default Demo;

import React from 'react';
import ColorPicker, { PaletteManager } from 'intergalactic/color-picker';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('#98848D');
  const [customColors, setCustomColors] = React.useState(['#8649E6', '#8649E7', '#8649E8']);

  return (
    <Flex gap={5} flexWrap>
      <Flex direction='column'>
        <Text tag='label' size={200} htmlFor='player-1-color'>
          Player 1 color
        </Text>
        <ColorPicker value={value} onChange={setValue}>
          <ColorPicker.Trigger mt={2} id='player-1-color' />
          <ColorPicker.Popper>
            <ColorPicker.Colors
              colors={[
                null,
                '#8649E1',
                '#FF5733',
                '#98848D',
                '#8E3B29',
                '#B0E727',
                '#27D3E7',
                '#2D747C',
                '#6ad0de',
                '#6E2D7C',
              ]}
            />
            <PaletteManager colors={customColors} onColorsChange={setCustomColors}>
              <PaletteManager.Colors />
              <PaletteManager.InputColor />
            </PaletteManager>
          </ColorPicker.Popper>
        </ColorPicker>
      </Flex>
      <Flex direction='column'>
        <Text tag='label' size={200} htmlFor='player-2-color'>
          Player 2 color
        </Text>
        <ColorPicker value={value} onChange={setValue}>
          <ColorPicker.Trigger mt={2} id='player-2-color' />
          <ColorPicker.Popper>
            <ColorPicker.Colors>
              <ColorPicker.Item value={null} />
              <ColorPicker.Item value='#8649E1' />
              <ColorPicker.Item value='#FF5733' />
              <ColorPicker.Item value='#98848D' />
              <ColorPicker.Item value='#8E3B29' />
              <ColorPicker.Item value='#B0E727' />
              <ColorPicker.Item value='#27D3E7' />
              <ColorPicker.Item value='#2D747C' />
              <ColorPicker.Item value='#6ad0de' />
              <ColorPicker.Item value='#6E2D7C' />
            </ColorPicker.Colors>
            <PaletteManager onColorsChange={setCustomColors}>
              <PaletteManager.Colors>
                {customColors.map((color) => (
                  <PaletteManager.Item value={color} key={color} />
                ))}
              </PaletteManager.Colors>
              <PaletteManager.InputColor />
            </PaletteManager>
          </ColorPicker.Popper>
        </ColorPicker>
      </Flex>
    </Flex>
  );
};

export default Demo;

Items with tooltips

You can use default items with other components. For example, with Tooltip.

tsx

import React from 'react';
import ColorPicker from 'intergalactic/color-picker';
import { Hint } from 'intergalactic/tooltip';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';

const colors = [
  '#A7AB38',
  '#229229',
  '#36E341',
  '#369AE3',
  '#66A9DA',
  '#9DEBE9',
  '#8F331C',
  '#7441B0',
  '#B9A0D6',
  '#C43DD2',
];

const Demo = () => {
  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='cake-color'>
        Cake color
      </Text>
      <ColorPicker>
        <ColorPicker.Trigger mt={2} id='main-theme-color' />
        <ColorPicker.Popper>
          <ColorPicker.Colors>
            {colors.map((color) => (
              <Hint title={color} key={color} tag={ColorPicker.Item} value={color} />
            ))}
          </ColorPicker.Colors>
        </ColorPicker.Popper>
      </ColorPicker>
    </Flex>
  );
};

export default Demo;

import React from 'react';
import ColorPicker from 'intergalactic/color-picker';
import { Hint } from 'intergalactic/tooltip';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';

const colors = [
  '#A7AB38',
  '#229229',
  '#36E341',
  '#369AE3',
  '#66A9DA',
  '#9DEBE9',
  '#8F331C',
  '#7441B0',
  '#B9A0D6',
  '#C43DD2',
];

const Demo = () => {
  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='cake-color'>
        Cake color
      </Text>
      <ColorPicker>
        <ColorPicker.Trigger mt={2} id='main-theme-color' />
        <ColorPicker.Popper>
          <ColorPicker.Colors>
            {colors.map((color) => (
              <Hint title={color} key={color} tag={ColorPicker.Item} value={color} />
            ))}
          </ColorPicker.Colors>
        </ColorPicker.Popper>
      </ColorPicker>
    </Flex>
  );
};

export default Demo;

Accessibility

Writing code

CSS Injection

PaletteManager

Input validation

Custom trigger

Several ways to use component

Items with tooltips

Accessibility

CSS Injection

ColorPicker

PaletteManager ​

Input validation ​

Custom trigger ​

Several ways to use component ​

Items with tooltips ​

PaletteManager

Input validation

Custom trigger

Several ways to use component

Items with tooltips