There's a time and a place for everything, including Photoshop

Try out new colors instantly on any web page element. Change the DOM live.   Get immediate feedback!  

No more color codes to jot down, CSS ready to plug into your stylesheet.  

What's Groovy Color About?

I wanted to write a utility to tweak the colors of the elements in my markup without having to go to an image editor. If I like what I see, I'd copy the color codes to my styling sheet.

My bookmarklet works on both http and https. It allows you to select most of your typical HTML elements on a page and change their background, border or text colors. I don't support iframes but will be adding code for gradients and hover states later. Thanks for trying out my tool!   - Miné

Easy to Install and Use

  • Drag this peace sign GroovyColor to the bookmark bar
  • Go to any site on the web
  • Click on the Groovy Color bookmark in your bookmark bar
  • Select something on the page and change its color

What is the Bookmarks bar?

What is the Bookmarks Bar?

Bookmarks or Favorites bar is located underneath a browser's address bar and gives you quick access to your favorite sites and bookmarks.

In Firefox, it's hidden by default. To display it, follow these instructions from Mozilla.

Hide me

How Does It Work?

Once the bookmarklet is in your browser bookmark bar, just click it to bring up the Groovy Color tool on the current page. Click any element of the page to select it, then change its color.

You can adjust the color transparency and tap on the new color swatch to save it to your palette. The rgba and hex codes for each color are both available to copy.

The most recent color swatch code will be automatically copied to the clipboard. You may paste that anywhere you'd like.

Undo Capability

It happens: You find that perfect color, and then with a slip of the mouse you click another color and it's gone. With Undo, you are covered.

Just click the Undo button and your previous color is restored. And remember, you can save that color to the color palette by clicking on the "New" color swatch.

Please note that undo only remembers color history for the current selection. Once you select other elements to work with, the history begins to track changes to those elements.

The Color Palette

Anytime you want to save a color, click on the new color swatch (second one on the right) which saves it to the local storage of the page that you are on. You can choose to delete color swatches that you no longer need at any time.

All the saved colors become part of a color palette which the program retrieves everytime you come back to the page. A palette of recent colors is automatically created.

How to Save a Color

If you hover over the New swatch, you will see a small yellow information box appear that will display the color code for the swatch in rgba format.

The New swatch allows you to add its color to a color palette simply by clicking on it. After you click on the color swatch, the tool will expand down to make room for the newly saved color swatch.

Target one element at a time or many at once

Select one element, then use the radio buttons as follows:

  • Selected Element Only targets the element you selected
  • All Matching Background Colors target all elements with the same background color
  • All Matching Text Colors target all elements with the same text color
  • Similar Siblings target all elements in the DOM that are similar to the selected element

Or, you can manually select multiple elements at once:

  • Hold down the Control key while clicking additional elements.
  • Hold down the Shift key, and sweep out an area of the page with your mouse.

CSS Ready

By default, the background color is changed. To change text or border colors, click the corresponding radio button.

    Target one element at a time, or many at once:
  • Hold down the control key and click on multiple elements
  • Hold down the shift key and sweep out an area

Displays a set of CSS rules to implement changes.