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

Brand Kit Picker

The Brand Kit Picker can be used in Swatch and ColorPickerInputRow. When brand colors are provided to the brands prop of either of these components, the Brand Kit Picker will render in the popover. Provide brandKitTranslations to ensure the Brand Kit Picker is translated correctly to the users language.


import { Swatch, ColorPickerInputRow } from '@activecampaign/camp-components-color-picker';
 
const defaultWidth = '248px'
 
const exampleBrands = [
  {
    brandkitName: 'Roland',
    colors: {
      accents: ['#FFFFF', '#FDFDFD', '#3357FF'],
      primary: '#FF5733',
      lightBackground: '#FFFFFF',
      darkBackground: '#000000',
    },
    isPrimary: true
  },
  {
    brandkitName: 'Aurora',
    colors: {
      accents: ['#FFB400', '#FFE7A3', '#1565C0'],
      primary: '#1E88E5',
      lightBackground: '#FAF3E0',
      darkBackground: '#212121',
    },
    isPrimary: false
  },
  {
    brandkitName: 'Zenith',
    colors: {
      accents: ['#9C27B0', '#E1BEE7', '#26A69A'],
      primary: '#D81B60',
      lightBackground: '#F3E5F5',
      darkBackground: '#263238',
    },
    isPrimary: false
  }
]
 
const translations = {
  dropdownLabel: 'some-translation',
  defaultLabel: 'some-translation',
  savedLabel: 'some-translation',
  customLabel: 'some-translation',
  placeholder: 'some-translation',
}
 
// Use with Swatch
<ColorPickerInputRow
  isPopover
  brands={exampleBrands}
  brandKitTranslations={translations}
/>
 
// Use with ColorPickerInputRow
<ColorPickerInputRow
  isPopover
  brands={exampleBrands}
  brandKitTranslations={translations}
  dangerouslySetStyles={{ width: defaultWidth }}
/>

Data Types


export interface BrandKitTranslations {
  dropdownLabel: string;
  defaultLabel: string;
  savedLabel: string;
  customLabel: string;
  placeholder: string;
};
 
type Colors = {
  primary: string;
  lightBackground: string;
  darkBackground: string;
  accents: string[];
};
 
export interface Brand {
  brandkitName: string;
  colors: Colors;
  isPrimary: boolean;
};

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

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
`brands`	`Brand[]`	`undefined`	Array of brand kit data to enable Brand Kit Picker
`brandKitTranslations`	`BrandKitTranslations`	`undefined`	Translation strings for Brand Kit 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
`brands`	`Brand[]`	`undefined`	Array of brand kit data to enable Brand Kit Picker
`brandKitTranslations`	`BrandKitTranslations`	`undefined`	Translation strings for Brand Kit 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