1

I have an colorpicker which i created using react-color (https://casesandberg.github.io/react-color/) . Now I want extra functionality like it should also be able to choose the color from screen (toggle color picker). I found few available library but it looks like it works only through inspect element but not sure if I am right.

What I want:

enter image description here

What I currently have (done using react-color library)

enter image description here

Can anybody guide me like how I can add extra functionality of choosing color from screen to this existing color picker (which is done using react-color library) .

Eric
  • 123
  • 9
  • When you say "on the screen" - do you only need [color of DOM elements on the current web page](https://stackoverflow.com/a/67458422/12418176)? Or do you need [more complex objects but still within your own current web page](https://stackoverflow.com/questions/1936021/javascript-eyedropper-tell-color-of-pixel-under-mouse-cursor)? Or something else like you want to be able to get the color of anything on your current screen as in within other applications running on your computer? – ccchoy Nov 03 '22 at 18:38
  • I want something like eyedropper that the pointer should be able to pick the color from the current webpage and should not be too complex at least for now. My current functionality only picks color from color picker and not from screen. – Eric Nov 03 '22 at 18:53
  • Does the [first link](https://stackoverflow.com/a/67458422/12418176) from my previous comment solve your use-case then? – ccchoy Nov 03 '22 at 19:18
  • Unfortunately no because it only pick color from the box and not the screen. I want something like https://jsfiddle.net/o4nsxhpz/ , if you click the input box here , you can see pen icon and from that u can choose color from screen but I cannot use this input code since I already have picker and I need only the functionality of that pen icon. I am using this color picker in my app (https://casesandberg.github.io/react-color/) and it only missing the functionality provided by that pen icon in the fiddle link. – Eric Nov 03 '22 at 19:28
  • it picks the background color of whatever you click on screen. the boxes are only there as examples for different colors to try to pick. for example, if you click anywhere other than the boxes, it logs `rgba(0, 0, 0, 0)` for the white background. the code does it by attaching onto clicks on the webpage, grabbing the element where your mouse was when you clicked and then logging what the background color of that element is. Sounds exactly what you're looking for - you just hook it up into an icon which enables this mode and then do something other than console.log the color. – ccchoy Nov 03 '22 at 19:37

1 Answers1

0

Have you tried <input type="color" />?

<input type="color" />
K i
  • 539
  • 5
  • 12
  • Is it possible to get the only functionality which the pencil icon is doing in your example like picking from screen since I already have picker using react-color which I cannot replace with unfortunately. – Eric Nov 03 '22 at 19:20
  • I am using this color picker in my app (casesandberg.github.io/react-color) and it only missing the functionality provided by that pen icon () . – Eric Nov 03 '22 at 19:32
  • No the you can't do that with , there is a library called react-eyedrop that allows you to get colors from an image. here's a code sand box [Code sandbox react-eyedrop][https://codesandbox.io/s/strange-cloud-vpcnoy?file=/src/App.js] is this what you want? – K i Nov 03 '22 at 19:47
  • Not sure why I am not able to run and see the code sandbox (codesandbox.io/s/strange-cloud-vpcnoy?file=/src/App.js), not able to see the output – Eric Nov 03 '22 at 19:55
  • Now try to copy-paste a hex colour into the default input modal in Chrome. – dearsina May 17 '23 at 20:25