TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

React Image Color Picker

NPM code style: prettier

The react-image-color-picker is a powerful and versatile eye-dropper React component that enables users to easily select colors from an image. It provides an intuitive and interactive interface for color picking, zooming, and previewing, making it ideal for various use cases such as image editing, color analysis, and design applications.

Art Illustrated by Kelly Keiko
Art by Kelly Keiko

Table of Contents

Key Features

  • 🖐️ Touch Support: Fully compatible with mobile devices, the react-image-color-picker allows users to enjoy a seamless color selection experience using touch gestures.

  • 🌐 Cross-Browser Compatibility: Rest assured, your users can access and use this package across various platforms, as it ensures compatibility with major web browsers such as Chrome, Safari, Firefox, Edge, Opera, and Samsung Internet.

  • 🚫 No Browser Dependencies: Unlike other solutions, the react-image-color-picker does not rely on browser EyeDropper API, providing consistent performance and reliability.

  • 🌈 Color Picking Made Easy: Enable your users to effortlessly pick colors from any image, thanks to the intuitive and interactive interface.

  • 🎨 Real-time Color Feedback: Instantly display the selected color, giving users immediate visual feedback and enhancing their editing experience.

  • 🔍 Zoom Functionality: Dive into the finer details with the zoom feature, which provides a magnified preview of a specific area of the image based on user interaction.

  • 💼 Seamless Integration: Integrating the react-image-color-picker into your React applications is a breeze, requiring minimal setup. You'll have it up and running in no time!

  • 🎨 Customization Options: Tailor the color picker to your specific needs by adjusting the zoom level, image source, and more. It offers the flexibility you desire.


Try it out!


React Image color Picker requires React 16.0.0 or later.


npm install react-image-color-picker


yarn add react-image-color-picker


Import the necessary components:

import React from 'react';
import { ImageColorPicker } from 'react-image-color-picker';
import image from '/path/to/image.jpg'

// Other imports...

const App = () => {
  const handleColorPick = (color: string) => {
    console.log('Selected color:', color); // Selected color: rgb(101, 42, 65)

  return (
      <h1>Image Color Picker Demo</h1>

export default App;


Art Illustrated by Kelly Keiko


  * Callback triggered when a color is selected.
  * @param color Color selected
onColorPick: (color: string) => void
  * Image that will be rendered inside the component
imgSrc: string
  * Zoom level for the image preview
  * @default 0.5
zoom?: number

Give a Star

You can give a star at:


MIT © gusttaswe

Package Sidebar


npm i react-image-color-picker-node14

Weekly Downloads






Unpacked Size

58.3 kB

Total Files


Last publish


  • kqllly