Download
13 different pickers, for Sketch, Photoshop, Chrome and many more. Make your own, use the building block components to make your own. Color controls what color is active on the color picker. You can use this to initialize the color picker with a particular color, or to keep it in sync with the state of a parent component. Pass a function to call every time the color is changed. Use this to store the color in the state of a parent component or to make other transformations. Pass a function to call once a color change is complete. To make a custom color picker, create a top-level component that will act as the bridge with the CustomPicker high order component. Wrap the export with the CustomPicker function. Every color picker provided is made up of a collection of helper components. Those components are accessible for you to use to make a custom color picker. Use EditableInput to display an input / label that acts as the single source of truth until the input is blurred.
Features
- Use Hue to display a slider to toggle the hue value
- Use Saturation to display a saturation block that users can drag to change the value
- The Checkboard component renders a background of black / white checkerboard for use when displaying gradients or alpha
- Use EditableInput to display an input / label that acts as the single source of truth until the input is blurred
- Use Alpha to display a slider to toggle the alpha value
- Every color picker provided is made up of a collection of helper components
Project Samples
