X
Tap here to go to the mobile version of the site.

Support Forum

Is it possible to find a colour in page?

Posted

Good day for work I am trying to find a way to search colours in the find bar for efficiency I just want to know if this is possible because it will really help

Good day for work I am trying to find a way to search colours in the find bar for efficiency I just want to know if this is possible because it will really help

Chosen solution

Okay, I created something for you to try. This is a script that scans the document for different background colors and builds a bar with little swatches. When you click a swatch, a seeker scrolls to the first match, and you can use the buttons to go back and forward through the matches for that color. (Or if you click ANY, any color.)

Right now, you need to inject the script into the page manually using the Web Console. Do call that up in the lower part of the tab, either:

  • "3-bar" menu button > Web Developer > Web Console
  • (menu bar) Tools > Web Developer > Web Console
  • (Windows) Ctrl+Shift+k

Then select and copy these 3 lines of script:

var s=document.createElement("script"); s.src="https://www.jeffersonscher.com/res/backcolorseek.js"; document.body.appendChild(s);

and paste them into the blank space at the bottom of the console and press Enter or Return to run it. Your first time, Firefox may ask you to prove that you understand its dangerous to run scripts from strangers. It's true!

Assuming there's no error or security block on the script, a bar should appear at the top of the page with colors. I'm attaching an example.

Numerous improvements could be made, but it's after midnight here, so... not tonight.

Update: In the original script, any areas of the page that were hidden were skipped over (who wants to know about matches in closed drop-down menus or hidden panels?). I realized this morning that it also skips content in scrolling regions of the page that are not currently visible, so I had to remove that. Hopefully I can think of a way to match the good stuff without matching the bad stuff.

Read this answer in context 1

Additional System Details

Application

  • User Agent: Mozilla/5.0 (Linux; Android 6.0.1; VFD 900 Build/MMB29M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.111 Mobile Safari/537.36

More Information

WestEnd
  • Top 25 Contributor
60 solutions 5379 answers

FireFox put out a default Browser and if you want to change or customize any part of it requires userChrome.css to make those changes beyond Mozilla defaults. You either have to create your own css or search online for css that does what you want it to do.

FireFox put out a default Browser and if you want to change or customize any part of it requires userChrome.css to make those changes beyond Mozilla defaults. You either have to create your own css or search online for css that does what you want it to do.
cor-el
  • Top 10 Contributor
  • Moderator
17472 solutions 157915 answers
See also this developer tool: *https://developer.mozilla.org/en-US/docs/Tools/Eyedropper
jscher2000
  • Top 10 Contributor
8693 solutions 71056 answers

Hi Dian1997, do you mean you want to discover if there is red text somewhere in a page? The regular find looks for text so it definitely won't be able to do that.

One of the challenges with colors in HTML and CSS is that there are multiple ways of assigning them. For example, there are words (e.g., "red"), hex codes (e.g., #f00) and rgb (e.g., rgb(255,0,0)). Colors also may be assigned with a level of transparency (e.g., #f00f or rgb(255, 0, 0, 1)). So depending on your needs, a simpler or a more specialized add-on may be required.

Hi Dian1997, do you mean you want to discover if there is red text somewhere in a page? The regular find looks for text so it definitely won't be able to do that. One of the challenges with colors in HTML and CSS is that there are multiple ways of assigning them. For example, there are words (e.g., "red"), hex codes (e.g., #f00) and rgb (e.g., rgb(255,0,0)). Colors also may be assigned with a level of transparency (e.g., #f00f or rgb(255, 0, 0, 1)). So depending on your needs, a simpler or a more specialized add-on may be required.

Modified by jscher2000

Question owner

jscher2000 said

Hi Dian1997, do you mean you want to discover if there is red text somewhere in a page? The regular find looks for text so it definitely won't be able to do that. One of the challenges with colors in HTML and CSS is that there are multiple ways of assigning them. For example, there are words (e.g., "red"), hex codes (e.g., #f00) and rgb (e.g., rgb(255,0,0)). Colors also may be assigned with a level of transparency (e.g., #f00f or rgb(255, 0, 0, 1)). So depending on your needs, a simpler or a more specialized add-on may be required.

I just want to find a way to search the colour collected with eyedropper because my work gives you a list with green,blue and red highlights so it would be nice to search for the bad product that is highlighted red instead of scrolling down endlessly

''jscher2000 [[#answer-1087196|said]]'' <blockquote> Hi Dian1997, do you mean you want to discover if there is red text somewhere in a page? The regular find looks for text so it definitely won't be able to do that. One of the challenges with colors in HTML and CSS is that there are multiple ways of assigning them. For example, there are words (e.g., "red"), hex codes (e.g., #f00) and rgb (e.g., rgb(255,0,0)). Colors also may be assigned with a level of transparency (e.g., #f00f or rgb(255, 0, 0, 1)). So depending on your needs, a simpler or a more specialized add-on may be required. </blockquote> I just want to find a way to search the colour collected with eyedropper because my work gives you a list with green,blue and red highlights so it would be nice to search for the bad product that is highlighted red instead of scrolling down endlessly

Question owner

WestEnd said

FireFox put out a default Browser and if you want to change or customize any part of it requires userChrome.css to make those changes beyond Mozilla defaults. You either have to create your own css or search online for css that does what you want it to do.

Can you add something like a colour search bar in your cntrl+f with a widened colour table to search for instance of the colour?

''WestEnd [[#answer-1087164|said]]'' <blockquote> FireFox put out a default Browser and if you want to change or customize any part of it requires userChrome.css to make those changes beyond Mozilla defaults. You either have to create your own css or search online for css that does what you want it to do. </blockquote> Can you add something like a colour search bar in your cntrl+f with a widened colour table to search for instance of the colour?
jscher2000
  • Top 10 Contributor
8693 solutions 71056 answers

When you say it is highlighted in red, do you mean the text is red instead of black, or the background color around the text is red instead of white?

I think it would be possible to designate some combination of color and background color as normal (e.g., black on white) and then search for everything in the page that varies from the normal. However, my sense is that it's a significant project to build that.

When you say it is highlighted in red, do you mean the text is red instead of black, or the background color around the text is red instead of white? I think it would be possible to designate some combination of color and background color as normal (e.g., black on white) and then search for everything in the page that varies from the normal. However, my sense is that it's a significant project to build that.
cor-el
  • Top 10 Contributor
  • Moderator
17472 solutions 157915 answers
See also: *https://dxr.mozilla.org/mozilla-release/source/devtools/server/actors/highlighters/eye-dropper.js

Question owner

jscher2000 said

When you say it is highlighted in red, do you mean the text is red instead of black, or the background color around the text is red instead of white? I think it would be possible to designate some combination of color and background color as normal (e.g., black on white) and then search for everything in the page that varies from the normal. However, my sense is that it's a significant project to build that.

The backround around the text is highlighted in red and green and orange

''jscher2000 [[#answer-1087277|said]]'' <blockquote> When you say it is highlighted in red, do you mean the text is red instead of black, or the background color around the text is red instead of white? I think it would be possible to designate some combination of color and background color as normal (e.g., black on white) and then search for everything in the page that varies from the normal. However, my sense is that it's a significant project to build that. </blockquote> The backround around the text is highlighted in red and green and orange
jscher2000
  • Top 10 Contributor
8693 solutions 71056 answers

Chosen Solution

Okay, I created something for you to try. This is a script that scans the document for different background colors and builds a bar with little swatches. When you click a swatch, a seeker scrolls to the first match, and you can use the buttons to go back and forward through the matches for that color. (Or if you click ANY, any color.)

Right now, you need to inject the script into the page manually using the Web Console. Do call that up in the lower part of the tab, either:

  • "3-bar" menu button > Web Developer > Web Console
  • (menu bar) Tools > Web Developer > Web Console
  • (Windows) Ctrl+Shift+k

Then select and copy these 3 lines of script:

var s=document.createElement("script"); s.src="https://www.jeffersonscher.com/res/backcolorseek.js"; document.body.appendChild(s);

and paste them into the blank space at the bottom of the console and press Enter or Return to run it. Your first time, Firefox may ask you to prove that you understand its dangerous to run scripts from strangers. It's true!

Assuming there's no error or security block on the script, a bar should appear at the top of the page with colors. I'm attaching an example.

Numerous improvements could be made, but it's after midnight here, so... not tonight.

Update: In the original script, any areas of the page that were hidden were skipped over (who wants to know about matches in closed drop-down menus or hidden panels?). I realized this morning that it also skips content in scrolling regions of the page that are not currently visible, so I had to remove that. Hopefully I can think of a way to match the good stuff without matching the bad stuff.

Okay, I created something for you to try. This is a script that scans the document for different background colors and builds a bar with little swatches. When you click a swatch, a seeker scrolls to the first match, and you can use the buttons to go back and forward through the matches for that color. (Or if you click ANY, any color.) Right now, you need to inject the script into the page manually using the Web Console. Do call that up in the lower part of the tab, either: * "3-bar" menu button > Web Developer > Web Console * (menu bar) Tools > Web Developer > Web Console * (Windows) Ctrl+Shift+k Then select and copy these 3 lines of script: <code>var s=document.createElement("script"); s.src="https://www.jeffersonscher.com/res/backcolorseek.js"; document.body.appendChild(s);</code> and paste them into the blank space at the bottom of the console and press Enter or Return to run it. Your first time, Firefox may ask you to prove that you understand its dangerous to run scripts from strangers. It's true! Assuming there's no error or security block on the script, a bar should appear at the top of the page with colors. I'm attaching an example. Numerous improvements could be made, but it's after midnight here, so... not tonight. '''Update:''' In the original script, any areas of the page that were hidden were skipped over (who wants to know about matches in closed drop-down menus or hidden panels?). I realized this morning that it also skips content in scrolling regions of the page that are not ''currently'' visible, so I had to remove that. Hopefully I can think of a way to match the good stuff without matching the bad stuff.

Modified by jscher2000

Question owner

thanks man

thanks man