With the release of the COLOURlovers API, you can now access almost 1 million named colors and more than 325,000 color palettes for your creative projects and applications. Creating a theme editor and want to give your users some color theme options? Creating a visual project that ties keywords to colors? Who knows what amazingly creative stuff people will come up with.
Below are two showcase examples of the COLOURlovers API in action as well as the full API documentation. Happy API COLOURloving!
COLOURlovers API Usage Showcase
Desktop Color Search - AIR App
Desktop Color Search is an Adobe AIR app that runs on your desktop and allows you to search the entire COLOURlovers database for colors, palettes and patterns. You’ll need to download the Adobe AIR runtime in order to run Desktop Color Search, you can use the link below to install AIR. (It works in both Windows and on Mac OS X) Special thanks to Levi McCallum at FutonMedia for coding the AIR app.
A simple interface to COLOURlover’s deep, deep palette library, it creates randomized compositions using rectangular geometry drawn by the Degrafa drawing library. Have some fun of your own color fun with Dekaf Lovers.
When we were developing COPASO, we found that we needed to have a more advanced color picker to work inside the application… and since COPASO is built with DHTML it was easy enough to pull out the picker to use on the other creation pages of our site. Once we’d modularized the color picker code it made sense to offer it to others to use on their own sites and projects. So here is the code to get our Color Picker working on your site for free. (We’ll even host the files)
COLOURlovers Color Picker Demo
Here is the Code You Need & Examples…
Put this Code into Your HTML <head> Section: <link rel="stylesheet" href="http://colourlovers.com.s3.amazonaws.com/COLOURloversColorPicker/COLOURloversColorPicker.css" type="text/css" media="all" /> <script type="text/JavaScript" src="http://colourlovers.com.s3.amazonaws.com/COLOURloversColorPicker/js/COLOURloversColorPicker.js"></script> Put this Code into Your HTML <body> Section: <div id="CLCP" class="CLCP"></div> <script type="text/JavaScript"> _whichField = "hexValue_0"; CLCPHandler = function(_hex) { // This function gets called by the picker when the sliders are being dragged. The variable _hex contains the current hex value from the picker // This code serves as an example only, here we use it to do three things: // Here we simply drop the variable _hex into the input field, so we can see what the hex value coming from the picker is: document.getElementById(_whichField).value = _hex; // Here is where we color the BG of a div to preview the color: document.getElementById("CLCPUpdateDiv").style.background = ("#" + _hex); // Giving you control over this function really puts the reigns in your hands. Rewrite this function as you see fit to really take control of this color picker. } // Settings: _CLCPdisplay = "none"; // Values: "none", "block". Default "none" _CLCPisDraggable = true; // Values: true, false. Default true _CLCPposition = "absolute"; // Values: "absolute", "relative". Default "absolute" _CLCPinitHex = "0039B3"; // Values: Any valid hex value. Default "ffffff" CLCPinitPicker(); </script>
<input name="YourInputName" id="hexValue_0" style="width: 100px;" maxlength="6" value="0000FF" /> <a href="JavaScript:_whichField='hexValue_0';CLCPshowPicker({_hex: document.getElementById('hexValue_0').value});">Show picker and load the color to the left</a>
<input name="YourInputName" id="multipleHexValue_0" style="width: 100px;" maxlength="6" value="FFFFFF" /> <a href="JavaScript:_whichField='multipleHexValue_0';CLCPshowPicker({_x: 300,_y: 200});">Show picker at x=300, y=200 and don't update it's color</a> <input name="YourInputName" id="multipleHexValue_1" style="width: 100px;" maxlength="6" value="18AB49" /> <a href="JavaScript:_whichField='multipleHexValue_1';CLCPshowPicker({_hex: document.getElementById('multipleHexValue_1').value,_x: 12,_y: 400});">Show picker at x=12, y=400 and load the color to the left</a> <input name="YourInputName" id="multipleHexValue_2" style="width: 100px;" maxlength="6" value="FF0000" /> <a href="JavaScript:_whichField='multipleHexValue_2';CLCPshowPicker({_hex: document.getElementById('multipleHexValue_2').value});">Show picker and load the color to the left</a> <input name="YourInputName" id="multipleHexValue_3" style="width: 100px;" maxlength="6" value="FFFFFF" /> <a href="JavaScript:_whichField='multipleHexValue_3';CLCPshowPicker();">Show picker at mouse click and don't update it's color</a> <input name="YourInputName" id="multipleHexValue_4" style="width: 100px;" maxlength="6" value="000000" /> <img src="http://colourlovers.com.s3.amazonaws.com/images/v3/color_wheel.png" style="vertical-align: -20%; cursor: pointer;" onclick="_whichField = 'multipleHexValue_4'; CLCPshowPicker();" alt="Show picker at mouse click and don't update it's color" title="Show picker at mouse click and don't update it's color" /> [Example with an image]
Here is a break down of the object passed to CLCPshowPicker()
{ _hex: "FF4400", // When a valid hex value is passed, it will set the picker to this hex. Otherwise the picker will not change it's current color [if any]. _x: 12, // If a x coordinate is passed, the picker will move to the x value. Otherwise, the x coordinate from the mouse click will be used. _y: 400 // If a y coordinate is passed, the picker will move to the y value. Otherwise, the y coordinate from the mouse click will be used. // All of these variables are optional }
Feb. 24, 2008 - Update
Fixed a bug in IE where users couldn’t click-drag-highlight other objects within the page.
May 1, 2008 - Update
Fixed a conflict this script had with jQuery. Thanks to Ozh at planetOzh.com for the report!
16 January, 2008
50
Did you enjoy our post? Get our blog feed by Email or RSS for daily updates.
Do you have something interesting and colorful you want to share with over 600,000 lovers per month? We'd love to have you as a guest author, so send us an email with your tips or what you'd like to write about.
30
Did you enjoy our post? Get our blog feed by 
[Example with an image]
Do you have something interesting and colorful you want to share with
0
