CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-color

A Collection of Color Pickers from Sketch, Photoshop, Chrome & more

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

color-pickers.mddocs/

Color Picker Components

Pre-built color picker components styled after popular design tools. Each picker provides a complete color selection interface and is wrapped with the ColorWrap HOC for consistent state management.

Capabilities

SketchPicker

A color picker styled after the Sketch design application, featuring a large saturation/lightness area, separate hue and alpha sliders, input fields, and preset color swatches.

/**
 * Sketch app-style color picker with preset colors
 * @param props - SketchPicker configuration
 */
const SketchPicker: React.ComponentType<SketchPickerProps>;

interface SketchPickerProps extends ColorPickerProps {
  /** Width of the picker */
  width?: string | number;
  /** Disable alpha channel control */
  disableAlpha?: boolean;
  /** Array of preset colors to display */
  presetColors?: string[];
}

Usage Example:

import { SketchPicker } from 'react-color';

<SketchPicker
  color="#ff0000"
  onChange={handleColorChange}
  presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A']}
  disableAlpha={false}
  width={200}
/>

Default Props:

  • width: 200
  • disableAlpha: false
  • presetColors: ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']

ChromePicker (Default Export)

A color picker styled after Google Chrome's DevTools color picker, featuring a compact design with saturation area, hue/alpha sliders, and color input fields.

/**
 * Chrome DevTools-style color picker
 * @param props - ChromePicker configuration
 */
const ChromePicker: React.ComponentType<ChromePickerProps>;

interface ChromePickerProps extends ColorPickerProps {
  /** Width of the picker */
  width?: string | number;
  /** Disable alpha channel control */
  disableAlpha?: boolean;
  /** Default view mode for color input fields */
  defaultView?: 'hex' | 'rgb' | 'hsl';
}

Usage Example:

import { ChromePicker } from 'react-color';
// or
import ChromePicker from 'react-color'; // Default export

<ChromePicker
  color="#ff0000"
  onChange={handleColorChange}
  disableAlpha={false}
  defaultView="hex"
  width={225}
/>

Default Props:

  • width: 225
  • disableAlpha: false

PhotoshopPicker

A color picker styled after Adobe Photoshop's color picker interface, featuring a large hue strip, saturation/lightness area, and detailed input fields.

/**
 * Adobe Photoshop-style color picker
 * @param props - PhotoshopPicker configuration
 */
const PhotoshopPicker: React.ComponentType<PhotoshopPickerProps>;

interface PhotoshopPickerProps extends ColorPickerProps {
  /** Header text for the picker */
  header?: string;
  /** Accept button text */
  onAccept?: () => void;
  /** Cancel button text */
  onCancel?: () => void;
}

BlockPicker

A color picker featuring a large color preview block with hex input and customizable color swatches below.

/**
 * Block-style color picker with swatches
 * @param props - BlockPicker configuration
 */
const BlockPicker: React.ComponentType<BlockPickerProps>;

interface BlockPickerProps extends ColorPickerProps {
  /** Width of the picker */
  width?: string | number;
  /** Array of swatch colors */
  colors?: string[];
  /** Triangle position or hide */
  triangle?: 'top' | 'hide';
}

Usage Example:

import { BlockPicker } from 'react-color';

<BlockPicker
  color="#ff0000"
  onChange={handleColorChange}
  colors={['#D9E3F0', '#F47373', '#697689', '#37D67A']}
  triangle="top"
  width={170}
/>

Default Props:

  • width: 170
  • triangle: 'top'
  • colors: ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8']

CompactPicker

A compact color picker displaying colors in a grid layout with hex/RGB input fields below.

/**
 * Compact grid-style color picker
 * @param props - CompactPicker configuration
 */
const CompactPicker: React.ComponentType<CompactPickerProps>;

interface CompactPickerProps extends ColorPickerProps {
  /** Array of colors to display in grid */
  colors?: string[];
}

Usage Example:

import { CompactPicker } from 'react-color';

<CompactPicker
  color="#ff0000"
  onChange={handleColorChange}
  colors={['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B']}
/>

Default Props:

  • colors: ['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF', '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400', '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF', '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00', '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E']

GithubPicker

A color picker styled after GitHub's color selection interface.

/**
 * GitHub-style color picker
 * @param props - GithubPicker configuration
 */
const GithubPicker: React.ComponentType<GithubPickerProps>;

interface GithubPickerProps extends ColorPickerProps {
  /** Width of the picker */
  width?: string | number;
  /** Array of colors to display */
  colors?: string[];
  /** Triangle position */
  triangle?: 'hide' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
}

Default Props:

  • width: 200
  • triangle: 'top-left'
  • colors: ['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB', '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB']

TwitterPicker

A color picker styled after Twitter's color selection interface.

/**
 * Twitter-style color picker
 * @param props - TwitterPicker configuration
 */
const TwitterPicker: React.ComponentType<TwitterPickerProps>;

interface TwitterPickerProps extends ColorPickerProps {
  /** Width of the picker */
  width?: string | number;
  /** Array of colors to display */
  colors?: string[];
  /** Triangle position */
  triangle?: 'hide' | 'top-left' | 'top-right';
}

Default Props:

  • width: 276
  • triangle: 'top-left'
  • colors: ['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']

CirclePicker

A color picker displaying colors as circular swatches.

/**
 * Circular swatch color picker
 * @param props - CirclePicker configuration
 */
const CirclePicker: React.ComponentType<CirclePickerProps>;

interface CirclePickerProps extends ColorPickerProps {
  /** Width of the picker */
  width?: string | number;
  /** Array of colors to display */
  colors?: string[];
  /** Size of the circular swatches */
  circleSize?: number;
  /** Spacing between circles */
  circleSpacing?: number;
}

Default Props:

  • width: 252
  • circleSize: 28
  • circleSpacing: 14
  • colors: Material design colors (red[500], pink[500], purple[500], etc.)

SwatchesPicker

A color picker displaying an extensive palette of color swatches organized in groups.

/**
 * Extensive swatch-based color picker
 * @param props - SwatchesPicker configuration
 */
const SwatchesPicker: React.ComponentType<SwatchesPickerProps>;

interface SwatchesPickerProps extends ColorPickerProps {
  /** Width of the picker */
  width?: number;
  /** Height of the picker */
  height?: number;
  /** Array of color groups */
  colors?: string[][];
}

MaterialPicker

A color picker styled after Google's Material Design color selection.

/**
 * Material Design-style color picker
 * @param props - MaterialPicker configuration
 */
const MaterialPicker: React.ComponentType<MaterialPickerProps>;

interface MaterialPickerProps extends ColorPickerProps {
  /** Array of colors to display */
  colors?: string[];
}

GooglePicker

A color picker styled after Google's material color interface.

/**
 * Google material-style color picker
 * @param props - GooglePicker configuration
 */
const GooglePicker: React.ComponentType<GooglePickerProps>;

interface GooglePickerProps extends ColorPickerProps {
  /** Width of the picker */
  width?: string;
  /** Array of colors to display */
  colors?: string[];
  /** Header text */
  header?: string;
}

AlphaPicker

A minimal color picker consisting only of an alpha channel slider.

/**
 * Alpha channel slider picker
 * @param props - AlphaPicker configuration
 */
const AlphaPicker: React.ComponentType<AlphaPickerProps>;

interface AlphaPickerProps extends ColorPickerProps {
  /** Width of the picker */
  width?: string;
  /** Height of the picker */
  height?: string;
  /** Slider direction */
  direction?: 'horizontal' | 'vertical';
  /** Custom pointer component */
  pointer?: React.ComponentType;
}

Default Props:

  • width: '316px'
  • height: '16px'
  • direction: 'horizontal'

HuePicker

A minimal color picker consisting only of a hue slider.

/**
 * Hue slider picker
 * @param props - HuePicker configuration
 */
const HuePicker: React.ComponentType<HuePickerProps>;

interface HuePickerProps extends ColorPickerProps {
  /** Width of the picker */
  width?: string;
  /** Height of the picker */
  height?: string;
  /** Slider direction */
  direction?: 'horizontal' | 'vertical';
  /** Custom pointer component */
  pointer?: React.ComponentType;
}

SliderPicker

A color picker with separate sliders for hue, saturation, and lightness controls.

/**
 * Multi-slider color picker
 * @param props - SliderPicker configuration
 */
const SliderPicker: React.ComponentType<SliderPickerProps>;

interface SliderPickerProps extends ColorPickerProps {
  /** Custom pointer component */
  pointer?: React.ComponentType;
}

Common Picker Props

All color picker components share these common props through the ColorWrap HOC:

interface ColorPickerProps {
  /** Initial color value */
  color?: string | ColorData;
  /** Callback fired on every color change */
  onChange?: (color: ColorState, event: Event) => void;
  /** Debounced callback fired when color change is complete */
  onChangeComplete?: (color: ColorState, event: Event) => void;
  /** Callback fired when hovering over color swatches */
  onSwatchHover?: (color: ColorState, event: Event) => void;
  /** Custom CSS styles */
  styles?: object;
  /** CSS class name */
  className?: string;
}

Color Change Callbacks

All pickers provide normalized color data in their callbacks:

const handleColorChange = (colorResult, event) => {
  // colorResult contains:
  console.log(colorResult.hex);    // "#ff0000"
  console.log(colorResult.rgb);    // { r: 255, g: 0, b: 0, a: 1 }
  console.log(colorResult.hsl);    // { h: 0, s: 1, l: 0.5, a: 1 }
  console.log(colorResult.hsv);    // { h: 0, s: 1, v: 1, a: 1 }
};

Install with Tessl CLI

npx tessl i tessl/npm-react-color

docs

building-blocks.md

color-pickers.md

color-utilities.md

index.md

tile.json