Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

Is it possible to find a colour in page?

  • 10 uphendule
  • 2 zinale nkinga
  • 60 views
  • Igcine ukuphendulwa ngu Dian1997

more options

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

Isisombululo esikhethiwe

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.

Funda le mpendulo ngokuhambisana nalesi sihloko 👍 1

All Replies (10)

more options

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.

more options
more options

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.

Okulungisiwe ngu jscher2000 - Support Volunteer

more options

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

more options

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?

more options

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.

more options
more options

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

more options

Isisombululo Esikhethiwe

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.

Okulungisiwe ngu jscher2000 - Support Volunteer