Color picker

The color picker allows users to choose colors using robust controls such as sliders and input fields.

Overview

Resources

Install


yarn add @activecampaign/camp-components-color-picker

Variations

Selecting colors is an important styling component for many marketing features in ActiveCampaign.

Because our users adopt tens of thousands of colors across their 150,000+ brands, it’s important that the color picker be robust yet easy to use. When creating a campaign or landing page within a builder, a user may have template colors or recently used colors they’d like to select from. In these cases, a template colors section is added to the color picker palette menu.

Swatch toggle


import { Swatch } from '@activecampaign/camp-components-color-picker';
 
<Swatch />;

Input row


import { ColorPickerInputRow } from '@activecampaign/camp-components-color-picker';
 
<ColorPickerInputRow dangerouslySetStyles={{ width: defaultWidth }} />;

Usage with provider


import styled from '@activecampaign/camp-core-styled';
import {
  ColorPickerProvider,
  useColorPicker,
  ColorPickerInputRow,
} from '@activecampaign/camp-components-color-picker';
import Text from '@activecampaign/camp-components-text';
import Button from '@activecampaign/camp-components-button';
 
const DemoWrapper = styled(
  'div',
  {},
)({
  background: 'ocean100',
  padding: 'sp400',
  marginBottom: 'sp400',
  '> div': {
    marginTop: 'sp400',
    '> * + *': {
      marginLeft: 'sp400',
    },
  },
});
 
const DemoUsage = () => {
  // Get provider values
  const { rgbaString, hexString, setRgba } = useColorPicker();
 
  const handleClick = () => {
    console.log(`Your Code Here // current state: ${rgbaString}`);
  };
 
  const setGreen = () => {
    setRgba({
      r: 0,
      g: 255,
      b: 0,
      a: 1,
    });
  };
  return (
    <DemoWrapper>
      <Text.Body>
        RGBA: {rgbaString} • Hex: {hexString}
      </Text.Body>
      <div>
        <Button onClick={handleClick}>Click Me</Button>
        <Button.Outline onClick={setGreen}>Set Green</Button.Outline>
      </div>
    </DemoWrapper>
  );
};
 
export const Provider = (args) => {
  const sampleColor = {
    r: 207,
    g: 191,
    b: 125,
    a: 1,
  };
 
  return (
    <ColorPickerProvider color={sampleColor}>
      <DemoUsage />
      <ColorPickerInputRow
        {...args}
        withProvider={false}
        dangerouslySetStyles={{ width: defaultWidth }}
      />
    </ColorPickerProvider>
  );
};

Hide alpha inputs

When hideAlpha is set to true, the alpha inputs are removed from the color picker, allowing the user to access only the RGB controls. This prop is available in ColorPicker, ColorPickerInputRow, and Swatch.


import ColorPicker from '@activecampaign/camp-components-color-picker';
 
<ColorPicker hideAlpha="true" />;

Accessibility

Keyboard support

Move focus to each swatch using the tab key, or shift + tab to move backwards
To open the color picker, use enter and arrow keys to move around the color space
Use the tab key to move focus to other inputs inside of the color picker (shift + tab to move backwards), including the opacity slider, and use the arrow keys to move the opacity slider
esc will exit the color picker