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.
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é
What is the Bookmarks bar? ▶
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.
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.
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.
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.
Select one element, then use the radio buttons as follows:
Or, you can manually select multiple elements at once:
By default, the background color is changed. To change text or border colors, click the corresponding radio button.
Displays a set of CSS rules to implement changes.