m. c. de marco: To invent new life and new civilizations...

ColourLoving Bookmarklets

These bookmarklets make it easier to create palettes and patterns on the COLOURlovers website. The bookmarklets are listed together after the instructions, in the Install the Bookmarklets section. For sample output and a bit more explanation of how I use them, see my ColourLovers profile or the copy here.

Descriptions and Instructions

If you're not sure what a bookmarklet is, check out the Wikipedia article. In brief, it's a short piece of JavaScript code that can interact in some ways with the current page. Because bookmarklets only interact with one page at a time, you will find some of the directions below telling you to click a particular bookmarklet a lot of times; this just means you're running it again to give it some more information (like another color) or to get something out of it (like badge code).

You don't need to be logged in to ColourLovers or Coolors to use these bookmarklets, but you will need to be logged into ColourLovers to save palettes, patterns, or colors. Whether or not you're logged in, palettes, patterns, and colors will not save or publish automatically; you will need to do that step, as well as provide titles.

Palette Creation

Two of the palette creation bookmarklets are designed to import Coolors palettes to ColourLovers. The other three make gradient palettes--single gradient palettes or a block blend.

To use the basic bookmarklet, "Palettize", select your palette at Coolors and click on the bookmarklet. This will open up a ColourLovers window or tab (depending on your browser settings) with your colors filled in to the basic palette creator. All you need to do is name and save the palette.

Copasetic

To use the advanced bookmarklet, "Copasetic", select your palette at Coolors and copy the full Coolors URL. Then open Copaso (or, optionally, click the bookmarklet to open Copaso). Once you're on the Copaso page, click the bookmarklet to open a popup, and paste the Coolors URL into the popup. When you hit enter, Copaso will be populated with your colors. Then you can adjust your palette widths, enter a title, and publish.

You can also use the latest version of Copasetic to turn a ColourLovers URL that contains a color list into a palette in Copaso. This is useful for converting basic palettes into palettes with widths; just click on the link for creating a pattern from the palette and grab the URL of the page that opens. It's also handy for use with my 5x5 bookmarklet (which can only make basic palettes); instead of saving the basic palette, copy the URL for use with Copasetic.

Gradient

"Gradient" takes two colors and creates a gradient palette from them. It does this using Copaso so you can optionally adjust the widths before saving. You can also reverse the palette.

To use Gradient, open the COLOURlovers page for the first color you want to use and click the bookmarklet. Do the same on the page for the second color you want to use. Once you have selected two colors in the current browser, the bookmarklet will open up Copaso. You need to click the bookmarklet again to populate Copaso with the gradient palette. Then you can adjust your palette widths if desired, enter a title, and publish. If you want to reverse the palette, click Gradient again before publishing. (If you don't like the reversed version as much, click Gradient again to get the first one back.)

Once you've published the palette, you can click Gradient again while on the Copaso page instead of clicking the link to it on the little publication popup. This will take you to your new palette's page, where you can click Gradient again to (temporarily) put badge code for the source colors and the new palette into the badge code field of the gradient palette. Then you can copy and paste it as usual. See the Blend bookmarklet below for a badge example and what to do if you forget a step; it works very similarly.

Exponent

"Exponent" takes two colors and creates an exponential gradient palette from them. It works exactly like Gradient and also shares stored colors with Gradient. The only difference is that it inserts widths, which can still be adjusted.

5x5

"5x5" takes four colors (at random or your choice), shows you their 5x5 gradient block blend, and optionally lets you publish the five palettes. It can put the 5x5 block picture into the description of each palette.

To use 5x5, open a COLOURlovers page with some colors on it. Most pages work for this purpose: a palette, a color search result, your own color list, etc. The bookmarklet will start out using 4 random colors off the page (click again for different random colors) but also gives you a UI for choosing your own colors, by typing in color codes to replace the random ones.

The UI has a Close button that will return you to the COLOURLovers page, and a Publish button to publish the 5 palettes that make up the current block. It uses the basic palette creator. On each palette creator page, optionally click the 5x5 bookmarklet again to put the 5x5 block into the palette description, give the palette a title, and save.

You don't need to publish all 5 palettes for the 5x5 block blend picture to work; it's just plain HTML (with a bit of weirdness to avoid the new COLOURlovers spam filters).

Palette Blending

The palette blending bookmarklets blend the colors of one palette with another palette ("Blend") or with a single color ("Wash") to create a new palette in Copaso. Both bookmarklets optionally put together all the badge code for you (in A + B = C format) for cutting-and-pasting (in addition to putting the source palette(s)/color into the description of the new palette in A+B format).

Blend

"Blend" takes two palettes and blends each of the five colors into a new palette you can save in Copaso. It also adds the badges of the original palettes to the description of the blended palette, interpolates the palette widths, and puts the three badges together for you. You can also reverse one of the palettes (say, if one palette goes from light to dark shades and the other from dark to light, but you want to blend the lighter colors with lighter and darker with darker).

To use Blend, open the COLOURlovers page for the first palette you want to blend and click the bookmarklet. Do the same on the page for the second palette you want to blend. Once you have selected two palettes in the current browser, the bookmarklet will open up Copaso. You need to click the bookmarklet again to populate Copaso with the blended palette. Then you can adjust your palette widths more if desired, enter a title, and publish. If you want to reverse one of the palettes, click Blend again before publishing. (If you don't like the reversed version as much, reload the Copaso page and click Blend again to get the first one back.)

Once you've published the palette, you can click Blend again while on the Copaso page instead of clicking the link to it on the little publication popup. (If you forget, just go back to the Copaso page and click Blend, but you can't do this later from a saved Copaso project.) This will take you to your new palette's page, where you can click Blend again to (temporarily) put badge code for all three palettes into the badge code field of the blended palette. Then you can copy and paste it as usual. You can see an example at ColourLovers of how the generated badge code looks.

The bookmarklet rotates through palettes, so if you're trying to choose two new ones, just close the Copaso window that opens up when you click Blend on the first palette page and click Blend again on the second palette page. It will not add your blended palette to the queue, but you can add it manually (after picking another palette).

Wash

The colorwashing bookmarklet, "Wash", is very similar to "Blend". Instead of mixing two palettes, it mixes a single palette with a selected color. As with "Blend", you pick the palette and color by clicking on the Wash bookmarklet while you are on the source palette or color's page. Once you've selected both, it will also open a blank Copaso page, where you need to click Wash again.

At this point you can see the washed palette, adjust widths, and publish it if you're happy with it. Before publishing, you can change the wash proportions by clicking Wash again. The bookmarklet will tell you what percentage the current wash is and ask you for a new percentage. You can keep changing the proportions until you're happy with the palette.

Publication works as with "Blend"; if you want the badge code, then you need to click "Wash" instead of the usual link to open your published palette, and then click "Wash" again to get the color wash badge code in the badge code box.

The bookmarklet saves the palette and the color, so if you're trying to choose two new ones, just close the Copaso window that opens up when you click Wash on the first palette or color page, and then click Wash again on the other palette or color page.

Hue

The hue shifting bookmarklet, "Hue", is similar to "Wash". Instead of mixing a color with a palette, it does a hue shift on the palette, rotating it around the color wheel. As with the other bookmarklets, you pick the palette by clicking on the Hue bookmarklet while you are on the source palette's page. The bookmarklet then opens a blank Copaso page, where you need to click Hue again.

At this point you can see the shifted palette, adjust widths, and publish it if you're happy with it. Before publishing, you can change the hue shift angle by clicking Hue again. The bookmarklet will tell you what angle the current hue shift is and ask you for a new angle. You can keep changing the angle until you're happy with the palette. The bookmarklet saves your choice of angle and will default to it next time you use Hue.

Publication works as with "Wash"; if you want the badge code, then you need to click "Hue" instead of the usual link to open your published palette, and then click "Hue" again to get the hue shift badge code in the badge code box.

Palettes with a Target Color

"HueTo", "HueTo2", and "WashTo" are like Hue and Wash, but instead of rotating the source palette's hue by a set amount or washing it with a set color, they instead find the appropriate rotation or wash color to include a target color in the new palette. Unlike the other bookmarklets, these three share information about the source palette and the target color, so you can use them all out on the same palette and color easily.

HueTo

The targeted hue shifting bookmarklets, "HueTo" and "HueTo2", are very similar to "Wash". Instead of mixing the wash color with a palette, though, they do a hue shift on the palette to make it include the color. The only difference between them is that "HueTo" has a more rudimentary hue shift than the one in Hue, while "HueTo2" is more like Hue, yielding somewhat different results for the other four colors from the same source palette and target color. (There are some examples of this in the examples.)

As with the other bookmarklets, you pick the palette and the target color by clicking on the HueTo/HueTo2 bookmarklet while you are on the page for the palette or the color. Once you've selected both, the bookmarklet opens a blank Copaso page, where you need to click HueTo again.

The shifted palette will have your target color in the first slot. If you like the palette, you can adjust widths, give the palette a title, and publish it. Before publishing, you can check how your target color looks in the other four slots by clicking HueTo/HueTo2 again. You can keep cycling around the palette until you've decided on a slot. The bookmarklet saves your choice of slot and will start there next time you use HueTo.

HueTo2 shares the same stored color and palette, so you don't have to repeat the selection process if you want to try the other bookmarklet; you can click either HueTo or HueTo2 (or WashTo) at any time while you're in Copaso.

Publication works as with "Hue" or "Wash"; if you want the badge code, then you need to click HueTo instead of the usual link to open your published palette, and then click HueTo again to get the hue shift badge code in the badge code box.

WashTo

"WashTo" works more like HueTo than like Wash, but (if you're lucky) the outcome is a color wash like you'd get from Wash. Starting from a source palette and a target color, you get a new palette and a wash color (which may or may not be new). It's a bit different from the other bookmarklets in that there is an optional extra step where you can pick up the wash color's badge as part of the bookmarklet's generated badge. Also, you may not get a palette at all, because not all source palette/target color/wash percentage combinations exist.

You can either select the source palette and target color by clicking on the bookmarklet while on their pages, or you can skip that step and open Copaso manually to use whatever palette and color were previously stored by HueTo or HueTo2. Once you're in Copaso, clicking the bookmarklet will cycle through the five potential positions for your target color. Most of these will not have washes available, and in that case you will see only the target color with the other swatches empty. But if a colorwash exists, the whole palette will be populated along with the usual description.

If you get no palettes at all, you have two choices: choose another source palette, or choose a different wash percentage. To alter the wash percentage you will need to bookmark the Wash bookmarklet and follow the Wash bookmarklet directions for changing your wash percentage. A higher percentage is more likely to yield palettes. (You can even do this in the same Copaso session if you've washed before, then click WashTo again.)

Once you choose and publish a palette, clicking on WashTo again will open the wash color's page instead of the palette page. If the wash color is unloved, you should name it at this point. On the named color's page, click WashTo again, which will open the new palette's page. Here you can click WashTo one more time to get the bookmarklet's assembled badge code in place of the standard badge code.

Due to rounding errors, you will not get exactly the same colors with Wash as with WashTo if you happen to set them up to get the same color wash. The two palettes will still look the same, though.

Palette Editing

Coolorize

"Coolorize" is the opposite of Palettize; it takes a palette (or a set of pattern colors, or a single color) from ColourLovers and opens it at Coolors.co. I made it for use in a ColourLovers palette game but there are other things that can be done with it (most of which involve reimporting the edited palettes with Copasetic).

To use the bookmarklet, go to a palette, pattern, or color page at ColourLovers and click on the bookmarklet. It will open a Coolors URL where you can edit the palette. When you are done, you can optionally use "Palettize" or "Copasetic" to re-import your Coolors palette to ColourLovers, following the instructions for those bookmarklets.

Copasedit

"Copasedit" is similar; it takes a palette (or a set of pattern colors, or a single color) from ColourLovers and opens it directly in Copaso. I made it for use in palette games that require editing someone else's palette in Copaso (where normally you can only edit your own). It preserves widths from the source palette, even in cases where Copaso scrambles them.

To use the bookmarklet, go to a palette or pattern page at ColourLovers and click on the bookmarklet. It will open the Copaso URL. Click the bookmarklet again to populate Copaso with your chosen palette. It will also add a badge for the original palette or pattern to the new palette's description, and generate the usual badge code if you click the bookmarklet twice after publishing.

Fixth

"Fixth" is a simple bookmarklet intended to fix your palette's widths when Copaso has scrambled them during editing of an existing palette. It can also be used to copy widths from one palette to another, which might be handy on a touch screen, where width editing is otherwise impossible, or for accessibility issues with those tiny swatch-resizing icons.

To use the bookmarklet, go to a palette page at ColourLovers and click on the bookmarklet. This stores the widths for that palette, but does nothing else. You can then click on the bookmarklet at any time in Copaso in order to set Copaso to your new widths. You do not need to reopen Copaso to do this; if you're editing an existing palette in Copaso and you see it's munged, just open the palette page in another window or tab, click Fixth there, then go back to your Copaso session and click Fixth again.

Palette and Color Averaging

The palette averaging bookmarklets calculate the average color of the colors in a palette, and opens the ColourLovers color page for that color in a new window or tab. There are bookmarklets for the simple average, "Average", and weighted average, "Weiverage". (The weighted average takes palette widths into account.)

There's also a bookmarklet, "Bovage", that does both palette averages at once. It will skip the weighted average when there are no palette widths. When opening both average colors, the bookmarklet adds a query string that says "weighted" or "unweighted" to the URL to indicate which color is which, since different browsers may display the new tabs or windows in different orders.

If the color is unloved (that is, unnamed and unclaimed), you can click on the bookmarklet or the usual button to name it. In that case you can click Bovage again on the color creation page to fill in the new color description with the source palette badge and a blurb that says which average it is. If the color is loved, clicking Bovage again will instead populate the comment field with the source palette badge and blurb.

Medient

The color averaging bookmarklet, "Medient", finds the average of two ColourLovers colors and opens it in a new window or tab. If the average color is unloved, you can name it and automatically populate its description with badges of the source colors..

To use Medient, click on the bookmarklet while on a color page. Medient will average the color with your last stored color and open the average color's page. (Medient shares stored colors with Gradient and Exponent.) If the color is unloved, you can click the bookmarklet or the name color button to open the new color editor. Then click Medient again to populate the description. Name the color and save.

Whether or not the color is new, you can click the bookmarklet again on the average color's page to generate badge code with all three colors.

Pattern Creation (from a pattern and a palette)

The pattern creation bookmarklet, "P&P", creates a pattern with a particular palette (a task usually accomplished by editing the ColourLovers URLs manually).

To use P&P, open the COLOURlovers page for the palette you want to use to color a pattern and click on the bookmarklet. Do the same on the page for the pattern or pattern template you want to color. (You can do these in either order.) If you have selected both a palette and a pattern in the current browser, the bookmarklet will open up a link to create that pattern from that palette.

The bookmarklet stores both your pattern and your palette, so the next time you click the bookmarklet on, say, a pattern, it will combine it with the last palette you used. If the bookmarklet fails mysteriously, check the license on the palette or pattern you clicked on; it may not permit reuse.

Miscellany

Storage

The text auto-population bookmarklet, "Storage", adds stored text (including HTML) of your choice to the description of a color, palette, or pattern that you're creating or editing, or to the comment box on a page you're not currently editing. If there's already text there, it adds the stored text and a linebreak at the beginning of the existing description, or at the end of the existing comment.

To use Storage, click on the bookmarklet. If you have no text stored, it will ask you for some text to store. If you are on a page with no description to edit and no comments box, it will show you your current text and ask if you want to change it. If you are on a creation or editing page, it will add the text to the description. If there's a comment box, it will put it there.

Regardless of the type of ColourLovers page you're on, if you click Storage a second time, it will show you your current text and ask if you want to change it. In that case be careful not to accidentally post a comment populated with the previous text, or with both versions of the text.

Badger

The other text auto-population bookmarklet, "Badger", collects badges from pages that have them, for later output into a comment or description field. Like Storage, if there's already text there, it will add the stored text and a linebreak at the beginning of the existing description, or at the end of the existing comment.

To use Badger, click on the bookmarklet while on a page with a badge sharing field. If you are on a page with no badge sharing field but a description to edit or a comments box, clicking Badger will populate the comment or description field. It will also ask you whether you're done with that set of badges; click OK to clear them out, or Cancel to keep them.

To clear out Badger manually, click the bookmarklet while on a ColourLovers page with neither badge sharing fields nor comment fields, such as the main page or your Notifications. If you click Cancel at this point, Badger will give you the opportunity to edit the collected badges instead. You can also copy the collected badges from the edit popup if you want to put the assembled badge on a page that has a badge field (rather than adding that field to the ever-growing badge collection).

Random

"Random" takes you to a random page on the current pager: a random page of a user's patterns, a random page from your search results, a random page in a comment thread, etc. To use, just click it.

Penny Jar and Penny Generator

"Penny Jar" takes an unloved color and turns it into a penny-shaped tip. To use, click it while on the color page for the unloved color (with the title Invalid Color and the button to name the color), then click it again on a page with a comment box. You can copy the penny elsewhere once you've gotten it into a comment box, or post the comment.

If you don't want to leave the color as a tip (or don't want to claim a tip you received), you can also post it to the group Take A Penny, Leave A Penny for someone else to claim.

Though I usually discover unnamed colors using Bovage, I made another bookmarklet, "Penny Generator", to look for unclaimed colors directly. Unlike my other bookmarklets, it uses an external script to generate colors, then opens them in separate pages at ColourLovers. Please note that there are better tools for finding lots of unclaimed colors; mine is just a proof of concept.

Install the Bookmarklets

To install the bookmarklets, drag one or more of these links to your Favorites or Bookmarks bar:

Bookmarklets on iOS

Note that the Copasetic, Copasedit, and P&P bookmarklets wil not be much use on an iPhone, iPad, or other touch screens because the ColourLovers tools are not very responsive. In particular, you will not be able to adjust your palette widths or reorder your pattern colors on a touchscreen.

Personally, I've given up on adding bookmarklets directly in iOS; I add them to desktop Safari instead, then let iCloud sync them. Syncing can be set up under Settings | iCloud | Safari on iOS, and System Preferences | iCloud | Safari on MacOS. The syncing process is somewhat flaky, but still much more reliable than trying to add a bookmarklet in iOS itself.

If you're feeling brave or can't use iCloud syncing, there are instructions out there for installing any bookmarklet directly on an iPhone or iPad. Try these instructions or these other instructions on adding a bookmarklet to Mobile Safari, or search for directions for your mobile browser of choice. Note that this process is in no way user-friendly, nor particularly likely to succeed. Nevertheless, if you need the raw text of the compressed bookmarklet for iOS voodoo, you can get it in the source section below.

Troubleshooting

You may need to turn off your popup blockers to use some of the bookmarklets---especially Bovage, which opens two new windows at once, and 5x5, which opens five when you click Publish.

If a bookmarklet fails silently, check the palette or pattern license; licensing restrictions may intefere with the other bookmarklets, although it happens most frequently with P&P. Also make sure that the page has fully loaded, especially if you're on a slow connection, aren't running an ad blocker, and/or are on the COPASO page. If the page was still loading, you can just click the bookmarklet again once it's done.

If you have trouble with widths (i.e., you don't get the interpolated widths with Blend, or you don't get a weighted average of a palette from the appropriate averaging bookmarklets), be sure you are looking at the version of the palette with the widths when you use the bookmarklet.

If you don't see anything when you click on 5x5, scroll to the top of the page. It should be in the upper left corner.

The Palettize, gradient, averaging, and blending bookmarklets should work normally on a touchscreen, but the new palette or color page may open silently in a background tab (making it look like the bookmarklet isn't working).

Bovage will use the edited badge code if you have edited the badge code (for example, if you just created the palette with a bookmarklet that generates special badge code), which may not be what you want.

Hue*, WashTo, and Copasedit use an HTML right arrow entity in their badge code, which displays properly in the forums but not on profiles. In profiles you can edit it manually to be a dash and angle bracket (or whatever you prefer). You may run into similar problems with the Storage bookmarklet: if your own HTML contains bits that do not display in descriptions, they will disappear on save.

On a small screen, you may also have some trouble finding the popup to name your new colors (if your palette happens to include new colors). Try pinching.

The Gradient, Blend, Wash*, Hue*, 5x5, and Copasedit bookmarklets may be longer than some older browsers support. (The only fix for that is to get a newer browser.) Also, you may experience silent failures to sync over iCloud due to iCloud bookmarklet size limits and other iCloud shenanigans. I'm still having unexplained syncing issues with Wash, 5x5, HueTo2, and WashTo, so don't be surprised if they don't sync for you, either.

Most of the bookmarklets use local storage, so if you clear your cookies you may also clear local storage (depending on your browser) and lose any saved settings, etc. On the up side, clearing local storage may solve any mysterious issues not covered above. Note that if you have local storage turned off entirely, the bookmarlets won't work--but it is difficult to turn local storage off so this is unlikely to be your problem.

If a Copaso bookmarklet keeps opening up your previous palette or color instead of Copaso, you may be running afoul of the badge assembly code. You probably can't apply the bookmarklet to something you just created with the bookmarklet; e.g., you can't Blend the most recent palette you made with Blend. Try choosing another palette or color in between, or clear your local storage.

* refers to any of the bookmarklets in that family, e.g., Hue* would be Hue, HueTo, and HueTo2.

Source

For the source of the shorter bookmarklets, you can view the source of this page or paste the bookmarklet code into a code beautifier. (Most beautifiers are unusable with a touchscreen; if you're on mobile, try this one instead.)

Some of the longer bookmarklets have been compressed, so I've provided the original javascript source here (along with a copy of the compressed code for use with some bookmarking methods on touch screens):

These bookmarklets are by M. C. DeMarco. They do not use the COLOURlovers API, only javascript. I also blogged about making them and my color widgets, with more details of how and why. I used this compressor to make the compressed versions, and this code for the Penny Generator.

Here's some of my other handy stuff:

Here are some other people's handy stuff:

m.c.d.
View full site