0
# Color Picker Components
1

2
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.
3

4
## Capabilities
5

6
### SketchPicker
7

8
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.
9

10
```javascript { .api }
11
/**
12
 * Sketch app-style color picker with preset colors
13
 * @param props - SketchPicker configuration
14
 */
15
const SketchPicker: React.ComponentType<SketchPickerProps>;
16

17
interface SketchPickerProps extends ColorPickerProps {
18
  /** Width of the picker */
19
  width?: string | number;
20
  /** Disable alpha channel control */
21
  disableAlpha?: boolean;
22
  /** Array of preset colors to display */
23
  presetColors?: string[];
24
}
25
```
26

27
**Usage Example:**
28

29
```javascript
30
import { SketchPicker } from 'react-color';
31

32
<SketchPicker
33
  color="#ff0000"
34
  onChange={handleColorChange}
35
  presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A']}
36
  disableAlpha={false}
37
  width={200}
38
/>
39
```
40

41
**Default Props:**
42
- `width`: 200
43
- `disableAlpha`: false
44
- `presetColors`: ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']
45

46
### ChromePicker (Default Export)
47

48
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.
49

50
```javascript { .api }
51
/**
52
 * Chrome DevTools-style color picker
53
 * @param props - ChromePicker configuration
54
 */
55
const ChromePicker: React.ComponentType<ChromePickerProps>;
56

57
interface ChromePickerProps extends ColorPickerProps {
58
  /** Width of the picker */
59
  width?: string | number;
60
  /** Disable alpha channel control */
61
  disableAlpha?: boolean;
62
  /** Default view mode for color input fields */
63
  defaultView?: 'hex' | 'rgb' | 'hsl';
64
}
65
```
66

67
**Usage Example:**
68

69
```javascript
70
import { ChromePicker } from 'react-color';
71
// or
72
import ChromePicker from 'react-color'; // Default export
73

74
<ChromePicker
75
  color="#ff0000"
76
  onChange={handleColorChange}
77
  disableAlpha={false}
78
  defaultView="hex"
79
  width={225}
80
/>
81
```
82

83
**Default Props:**
84
- `width`: 225
85
- `disableAlpha`: false
86

87
### PhotoshopPicker
88

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

91
```javascript { .api }
92
/**
93
 * Adobe Photoshop-style color picker
94
 * @param props - PhotoshopPicker configuration
95
 */
96
const PhotoshopPicker: React.ComponentType<PhotoshopPickerProps>;
97

98
interface PhotoshopPickerProps extends ColorPickerProps {
99
  /** Header text for the picker */
100
  header?: string;
101
  /** Accept button text */
102
  onAccept?: () => void;
103
  /** Cancel button text */
104
  onCancel?: () => void;
105
}
106
```
107

108
### BlockPicker
109

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

112
```javascript { .api }
113
/**
114
 * Block-style color picker with swatches
115
 * @param props - BlockPicker configuration
116
 */
117
const BlockPicker: React.ComponentType<BlockPickerProps>;
118

119
interface BlockPickerProps extends ColorPickerProps {
120
  /** Width of the picker */
121
  width?: string | number;
122
  /** Array of swatch colors */
123
  colors?: string[];
124
  /** Triangle position or hide */
125
  triangle?: 'top' | 'hide';
126
}
127
```
128

129
**Usage Example:**
130

131
```javascript
132
import { BlockPicker } from 'react-color';
133

134
<BlockPicker
135
  color="#ff0000"
136
  onChange={handleColorChange}
137
  colors={['#D9E3F0', '#F47373', '#697689', '#37D67A']}
138
  triangle="top"
139
  width={170}
140
/>
141
```
142

143
**Default Props:**
144
- `width`: 170
145
- `triangle`: 'top'
146
- `colors`: ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8']
147

148
### CompactPicker
149

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

152
```javascript { .api }
153
/**
154
 * Compact grid-style color picker
155
 * @param props - CompactPicker configuration
156
 */
157
const CompactPicker: React.ComponentType<CompactPickerProps>;
158

159
interface CompactPickerProps extends ColorPickerProps {
160
  /** Array of colors to display in grid */
161
  colors?: string[];
162
}
163
```
164

165
**Usage Example:**
166

167
```javascript
168
import { CompactPicker } from 'react-color';
169

170
<CompactPicker
171
  color="#ff0000"
172
  onChange={handleColorChange}
173
  colors={['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B']}
174
/>
175
```
176

177
**Default Props:**
178
- `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']
179

180
### GithubPicker
181

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

184
```javascript { .api }
185
/**
186
 * GitHub-style color picker
187
 * @param props - GithubPicker configuration
188
 */
189
const GithubPicker: React.ComponentType<GithubPickerProps>;
190

191
interface GithubPickerProps extends ColorPickerProps {
192
  /** Width of the picker */
193
  width?: string | number;
194
  /** Array of colors to display */
195
  colors?: string[];
196
  /** Triangle position */
197
  triangle?: 'hide' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
198
}
199
```
200

201
**Default Props:**
202
- `width`: 200
203
- `triangle`: 'top-left'
204
- `colors`: ['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB', '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB']
205

206
### TwitterPicker
207

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

210
```javascript { .api }
211
/**
212
 * Twitter-style color picker
213
 * @param props - TwitterPicker configuration
214
 */
215
const TwitterPicker: React.ComponentType<TwitterPickerProps>;
216

217
interface TwitterPickerProps extends ColorPickerProps {
218
  /** Width of the picker */
219
  width?: string | number;
220
  /** Array of colors to display */
221
  colors?: string[];
222
  /** Triangle position */
223
  triangle?: 'hide' | 'top-left' | 'top-right';
224
}
225
```
226

227
**Default Props:**
228
- `width`: 276
229
- `triangle`: 'top-left'
230
- `colors`: ['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']
231

232
### CirclePicker
233

234
A color picker displaying colors as circular swatches.
235

236
```javascript { .api }
237
/**
238
 * Circular swatch color picker
239
 * @param props - CirclePicker configuration
240
 */
241
const CirclePicker: React.ComponentType<CirclePickerProps>;
242

243
interface CirclePickerProps extends ColorPickerProps {
244
  /** Width of the picker */
245
  width?: string | number;
246
  /** Array of colors to display */
247
  colors?: string[];
248
  /** Size of the circular swatches */
249
  circleSize?: number;
250
  /** Spacing between circles */
251
  circleSpacing?: number;
252
}
253
```
254

255
**Default Props:**
256
- `width`: 252
257
- `circleSize`: 28
258
- `circleSpacing`: 14
259
- `colors`: Material design colors (red[500], pink[500], purple[500], etc.)
260

261
### SwatchesPicker
262

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

265
```javascript { .api }
266
/**
267
 * Extensive swatch-based color picker
268
 * @param props - SwatchesPicker configuration
269
 */
270
const SwatchesPicker: React.ComponentType<SwatchesPickerProps>;
271

272
interface SwatchesPickerProps extends ColorPickerProps {
273
  /** Width of the picker */
274
  width?: number;
275
  /** Height of the picker */
276
  height?: number;
277
  /** Array of color groups */
278
  colors?: string[][];
279
}
280
```
281

282
### MaterialPicker
283

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

286
```javascript { .api }
287
/**
288
 * Material Design-style color picker
289
 * @param props - MaterialPicker configuration
290
 */
291
const MaterialPicker: React.ComponentType<MaterialPickerProps>;
292

293
interface MaterialPickerProps extends ColorPickerProps {
294
  /** Array of colors to display */
295
  colors?: string[];
296
}
297
```
298

299
### GooglePicker
300

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

303
```javascript { .api }
304
/**
305
 * Google material-style color picker
306
 * @param props - GooglePicker configuration
307
 */
308
const GooglePicker: React.ComponentType<GooglePickerProps>;
309

310
interface GooglePickerProps extends ColorPickerProps {
311
  /** Width of the picker */
312
  width?: string;
313
  /** Array of colors to display */
314
  colors?: string[];
315
  /** Header text */
316
  header?: string;
317
}
318
```
319

320
### AlphaPicker
321

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

324
```javascript { .api }
325
/**
326
 * Alpha channel slider picker
327
 * @param props - AlphaPicker configuration
328
 */
329
const AlphaPicker: React.ComponentType<AlphaPickerProps>;
330

331
interface AlphaPickerProps extends ColorPickerProps {
332
  /** Width of the picker */
333
  width?: string;
334
  /** Height of the picker */
335
  height?: string;
336
  /** Slider direction */
337
  direction?: 'horizontal' | 'vertical';
338
  /** Custom pointer component */
339
  pointer?: React.ComponentType;
340
}
341
```
342

343
**Default Props:**
344
- `width`: '316px'
345
- `height`: '16px'  
346
- `direction`: 'horizontal'
347

348
### HuePicker
349

350
A minimal color picker consisting only of a hue slider.
351

352
```javascript { .api }
353
/**
354
 * Hue slider picker
355
 * @param props - HuePicker configuration
356
 */
357
const HuePicker: React.ComponentType<HuePickerProps>;
358

359
interface HuePickerProps extends ColorPickerProps {
360
  /** Width of the picker */
361
  width?: string;
362
  /** Height of the picker */
363
  height?: string;
364
  /** Slider direction */
365
  direction?: 'horizontal' | 'vertical';
366
  /** Custom pointer component */
367
  pointer?: React.ComponentType;
368
}
369
```
370

371
### SliderPicker
372

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

375
```javascript { .api }
376
/**
377
 * Multi-slider color picker
378
 * @param props - SliderPicker configuration
379
 */
380
const SliderPicker: React.ComponentType<SliderPickerProps>;
381

382
interface SliderPickerProps extends ColorPickerProps {
383
  /** Custom pointer component */
384
  pointer?: React.ComponentType;
385
}
386
```
387

388
## Common Picker Props
389

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

392
```javascript { .api }
393
interface ColorPickerProps {
394
  /** Initial color value */
395
  color?: string | ColorData;
396
  /** Callback fired on every color change */
397
  onChange?: (color: ColorState, event: Event) => void;
398
  /** Debounced callback fired when color change is complete */
399
  onChangeComplete?: (color: ColorState, event: Event) => void;
400
  /** Callback fired when hovering over color swatches */
401
  onSwatchHover?: (color: ColorState, event: Event) => void;
402
  /** Custom CSS styles */
403
  styles?: object;
404
  /** CSS class name */
405
  className?: string;
406
}
407
```
408

409
## Color Change Callbacks
410

411
All pickers provide normalized color data in their callbacks:
412

413
```javascript
414
const handleColorChange = (colorResult, event) => {
415
  // colorResult contains:
416
  console.log(colorResult.hex);    // "#ff0000"
417
  console.log(colorResult.rgb);    // { r: 255, g: 0, b: 0, a: 1 }
418
  console.log(colorResult.hsl);    // { h: 0, s: 1, l: 0.5, a: 1 }
419
  console.log(colorResult.hsv);    // { h: 0, s: 1, v: 1, a: 1 }
420
};
421
```