m. c. de marco: To invent new life and new civilizations...
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
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.
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.
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" 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" 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" 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).
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" 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).
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.
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.
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" 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.
"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" 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" 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.
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.
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.
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" 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:
- Palettize, the basic Coolors import bookmarklet
- Copasetic, the advanced Coolors import bookmarklet that also lets you edit widths
- Gradient creates gradient palettes
- added June 11, 2015 Exponent creates exponential gradient palettes
- 5x5, the block blender
- Blend two palettes
- Wash, to colorwash a palette with a color
- updated June 1st, 2015 with rounding bug fix Hue, the hue rotation bookmarklet
- variant added June 9th, 2015 HueTo and HueTo2, the hue rotation bookmarklets that hit a target color
- last updated June 12th, 2015 with a rounding fix WashTo colorwashes to a target color
- updated June 19th, 2015 for bug fix Coolorize, the export to Coolors bookmarklet
- added June 1st, 2015 Copasedit, the palette editing bookmarklet
- added June 10, 2015 Fixth, the width fixer
- Average gets the average color of a palette
- Weiverage gets the weighted average of a palette with widths
- updated June 16th, 2015 to do comments Bovage gets both averages of a palette
- added June 12th, 2015 Medient averages two colors
- P&P combines a pattern and a palette
- updated June 7th, 2015 to do comments Storage, the description/comment storage bookmarklet
- updated June 17th, 2015 for easier resets Badger, the badge collector
- updated June 12th, 2015 for extra-long lists Random picks a random page from a page list
- updated June 19, 2015 with hex code in title Penny Jar turns an unloved color into a penny-shaped tip
- added August 30, 2015 Penny Generator opens random colors
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.
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.
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.)
- Blend: uncompressed source, compressed source
- Bovage: uncompressed source, compressed source
- Copasedit: uncompressed source, compressed source
- Exponent: uncompressed source, compressed source
- Gradient: uncompressed source, compressed source
- Hue: uncompressed source, compressed source
- HueTo: uncompressed source, compressed source
- HueTo2: uncompressed source, compressed source
- Penny Generator: uncompressed source
- Wash: uncompressed source, compressed source
- WashTo: uncompressed source, compressed source
Links and Credits
Here's some of my other handy stuff:
- Betide, a pattern viewer that does use the COLOURlovers API.
- Colour Tide, a palette and pattern viewer that has more, but choppier, animation than Betide, based on Ryan Ludwig's Color Tide.
- I am mcdemarco at COLOURlovers.
- I am also mcdemarco on GitHub, where you can find the source for Betide and Colour Tide.
Here are some other people's handy stuff:
- YCC2106's palette and pattern browsing bookmarklets are very handy with P&P.
- Other color widgets at codename cuttlefish.
- Desvil's Get some CL code! page for making badge code.
- The ColourLovers Google Chrome extension, which does notifications, ad blocking, and some page reformatting.
- Kyledavide's theme generator for Chrome.
- The original Color Tide by Ryan Ludwig.
- The ColourLovers API documentation.
- And Coolors, of course!