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

The isPopover prop controls whether the swatch should render with a nested picker popover or standalone.


import { Swatch } from '@activecampaign/camp-components-color-picker';
 
// Render as a popover (default behavior)
<Swatch isPopover={true} />
 
// Render standalone
<Swatch isPopover={false} />

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>
  );
};

Custom picker with `renderCustomPicker`

Render a custom picker within the ColorPicker popover using the renderCustomPicker prop. This is useful for implementing brand kit pickers, recent colors, or any custom color selection interface. Use the customPickerStyles prop to add styles to the popover as needed.


import { Swatch, ColorPickerInputRow } from '@activecampaign/camp-components-color-picker';
 
// Define your custom picker component
const BrandKitPicker = () => {
  return (
    <div>
      <p>My custom picker here</p>
    </div>
  );
};
 
// Use with Swatch
<Swatch
  renderCustomPicker={() => <BrandKitPicker />}
  customPickerStyles={{
    padding: 'sp200 sp500 sp500 sp500',
  }}
/>
 
// Use with ColorPickerInputRow
<ColorPickerInputRow
  renderCustomPicker={() => <BrandKitPicker />}
  customPickerStyles={{
    padding: 'sp200 sp500 sp500 sp500'
  }}
/>

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" />;

Debug mode

For development and debugging purposes, you can enable debug mode on the ColorPickerInputRow component. This will render a row of text with the current color values from the useColorPicker hook.


import { ColorPickerInputRow } from '@activecampaign/camp-components-color-picker';
 
<ColorPickerInputRow debug={true} />;

RGBA: rgb(0, 0, 0)Hex: #000000alpha: 100

API Reference

ColorPicker

Prop	Type	Default	Description
`withProvider`	`boolean`	`true`	Whether to render the ColorPickerProvider
`hideAlpha`	`boolean`	`false`	Hide alpha (transparency) controls

Swatch

Prop	Type	Default	Description
`withProvider`	`boolean`	`true`	Whether to render the ColorPickerProvider
`isPopover`	`boolean`	`true`	Render with nested picker popover or standalone
`hideAlpha`	`boolean`	`false`	Hide alpha (transparency) controls
`renderCustomPicker`	`() => React.ReactNode`	`undefined`	Render a custom picker within the popover
`customPickerStyles`	`Core.Styled.CSS`	`undefined`	Custom styles for the custom picker

ColorPickerInputRow

Prop	Type	Default	Description
`debug`	`boolean`	`false`	Show debug information
`withProvider`	`boolean`	`true`	Whether to render the ColorPickerProvider
`hideAlpha`	`boolean`	`false`	Hide alpha (transparency) controls
`renderCustomPicker`	`() => React.ReactNode`	`undefined`	Render a custom picker within the popover
`customPickerStyles`	`Core.Styled.CSS`	`undefined`	Custom styles for the custom picker

useColorPicker Hook

The useColorPicker hook provides access to the color picker’s state and methods when used within a ColorPickerProvider. This hook is essential for building custom color picker interfaces or integrating with the color picker’s state.


import { useColorPicker, ColorPickerProvider } from '@activecampaign/camp-components-color-picker';
 
const CustomColorDisplay = () => {
  const {
    rgba,
    setRgba,
    setRedChannel,
    setGreenChannel,
    setBlueChannel,
    setAlphaChannel,
    rString,
    gString,
    bString,
    aString,
    rgbaString,
    setHex,
    hexString,
    shortHex,
    setShortHex,
  } = useColorPicker();
 
  return (
    <div>
      <p>Current color: {rgbaString}</p>
      <p>Hex: {hexString}</p>
      <p>
        Individual channels: R:{rString}, G:{gString}, B:{bString}, A:{aString}
      </p>
 
      <button onClick={() => setRedChannel(255)}>Set Red to 255</button>
      <button onClick={() => setHex('#FF0000')}>Set to Red</button>
      <button onClick={() => setShortHex(!shortHex)}>
        Toggle Hex Format: {shortHex ? 'Short' : 'Long'}
      </button>
    </div>
  );
};
 
// Usage within provider
<ColorPickerProvider color={{ r: 100, g: 150, b: 200, a: 1 }}>
  <CustomColorDisplay />
</ColorPickerProvider>;

useColorPicker API

Property/Method	Type	Description
`rgba`	`RgbaColor`	Current RGBA color object
`setRgba`	`(color: RgbaColor) => void`	Set the entire RGBA color
`setRedChannel`	`(r: number) => void`	Set only the red channel (0-255)
`setGreenChannel`	`(g: number) => void`	Set only the green channel (0-255)
`setBlueChannel`	`(b: number) => void`	Set only the blue channel (0-255)
`setAlphaChannel`	`(a: string \| number) => void`	Set only the alpha channel (0-1)
`rString`	`string`	Red channel as string
`gString`	`string`	Green channel as string
`bString`	`string`	Blue channel as string
`aString`	`string`	Alpha channel as string
`rgbaString`	`string`	Complete RGBA string (e.g., “rgba(255, 0, 0, 1)“)
`setHex`	`(hex: string \| number) => void`	Set color using hex value
`hexString`	`string`	Current color as hex string
`shortHex`	`boolean`	Whether to use short hex format (#FFF vs #FFFFFF)
`setShortHex`	`(short: boolean) => void`	Toggle between short and long hex format

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