Welcome to our web color community. Here you'll find the latest web-focused Palettes and Patterns, as well as Blog, Trends and Forums to help guide your next web design project.

Channels»Web»Blog

Daily Posts. Colorful Ideas & Inspirations.

Our team of writers brings you daily trend coverage, new products, inspiration, information and fun ideas. With an archive of more than 2,279 articles, you're sure to find something you love. Or if you have a great idea, let us know!

Free Advanced DHTML Color Picker

Free Advanced DHTML Color Picker


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)

License: Attribution-Noncommercial-Share Alike 3.0 Unported
If you have a need that doesn't fit the license above, contact us.

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>

 

Picker Attached to a Single Text Field:

Show picker and load the color to the left

Single Text Field Example Code

<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>

 

Picker Attached to Multiple Text Fields:

Show picker at x=300, y=1400 and don't update it's color

Show picker at x=12, y=1400 and load the color to the left

Show picker and load the color to the left

Show picker at mouse click and don't update it's color

Show picker at mouse click and don't update it's color [Example with an image]


Multiple Text Field Example Code:


<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!

Read the full post
COPASO : Color Palette Software

COPASO : Color Palette Software


We've been working on an advanced / pro color palette tool for quite some time and finally have it ready enough to share with you. We're still fine tuning and adding more updates... but we feel like this is the best color palette tool you'll find... if you don't think so, let us know what you'd like us to add or improve and we'll keep striving to give you the best experience anywhere.

Try COPASO : Color Palette Software Now

Click Here for a Larger Video Demo (Narrated and presented by Andrew Sorcini)

COPASO is an advanced color palette tool that helps you create the perfect color schemes and themes. With a scratch pad to save colors you're working with, a photo tool to extract colors and an advanced color picker and color theory wheel to give you tons of color inspiration. Using COPASO you can save your palettes to a private folder or download them to keep on your local computer. When you're ready, click publish and share your color palette with thousands of other color enthusiasts. If you're finding COPASO a bit too rich you're your color creating tastes, you can always use our basic color palette tool.
 
 

Custom Color Widths... Base, Secondary and Accent

 

With COPASO you can give each color a specific amount of space in your color palettes. This will help you show what colors you intend to be the base colors, secondary and accent colors. Click and drag the <|> icons above the color squares to change their widths.

 

 

Save Colors to Your Scratch Pad

 

You can save a color you're working with by clicking and dragging it down to the scratch area. To set a main color above with one of the colors in your scratch, simply double-click the color in your scratch.

 

 

Get Color Inspiration from Pictures

 

Advanced Color Picker and Color Wheel

The new advanced color picker in COPASO allows for even more precise color selection. You have hue, saturation and brightness sliders as well as input areas for Hex, RGB, HSV and CMYK color values.

Also built into the advanced color picker are gradient step filters that will allow you to see any color with steps towards white or with steps towards black. To work with any of the colors in this filter, simply click and drag the filter color strip to the right of the color wheel onto your scratch area.

Below the picker is our color wheel and color formula filters. By selecting one of the formula filters (Blend, Complementary, Triadic Tetradic or Split Complementary) the color wheel will allow you to spin the selected color around by clicking anywhere on the wheel. Once you've found some great colors in the preview bar on the right, all you need to do is drag the bar to your scratch area to begin using those colors.

Double-clicking any of the color squares in the preview bar will update the main color picker to that color and give you a new perspective on your selected color filters.

 

As mentioned above, we're very proud of COPASO and hope you'll find it very useful for all your professional and hobby color projects. COPASO couldn't have been built without the expert programming of Chris Williams and the design work of Stephen Hallgren. Last but not least the hundreds of thousands of COLOURlovers who have helped us build and grow our color community and who've provided us with great advice, suggestions and inspiration over the years.

Happy COLOURloving!

Read the full post
Color and Typography in Good Design

Color and Typography in Good Design


Typography is a significant issue for designers. On many projects, finding just the right font, size, spacing, etc. can require considerable time and attention. In addition to typography, color is also a major factor in the success of the design. What is sometimes overlooked is the combination of color and typography and the effect that it has on the overall project.

Font Size, Line Height & Contrast

Before we even get to the color and contrast elements of typography, we first should look at how dramatic a small font increase and line height increase can improve readability and reduce eye fatigue. The first example below uses 11pt font with matching 11pt line height. The second example uses 12pt font with 13pt line height. Example two is significantly easier to read.

Example 1: (11pt Font, 11pt Line Height)
The next moment a hideous, grinding speech, as of some monstrous machine running without oil, burst from the big telescreen at the end of the room. It was a noise that set one's teeth on edge and bristled the hair at the back of one's neck. The Hate had started.

(12pt Font, 13pt Line Height)
The next moment a hideous, grinding speech, as of some monstrous machine running without oil, burst from the big telescreen at the end of the room. It was a noise that set one's teeth on edge and bristled the hair at the back of one's neck. The Hate had started.

Even with well sized type and line heights, choosing a font color and background color with low contrast can make reading difficult and stresses the eyes of the reader.

(12pt Font, 13pt Line Height - Low Contrast)
The hallway smelt of boiled cabbage and old rag mats. At one end of it a coloured poster, too large for indoor display, had been tacked to the wall. It depicted simply an enormous face, more than a metre wide: the face of a man of about forty-five, with a heavy black moustache and ruggedly handsome features. Winston made for the stairs. It was no use trying the lift. Even at the best of times it was seldom working, and at present the electric current was cut off during daylight hours.

More Bad Contrast Examples:

Example 2: (12pt Font, 13pt Line Height - Low Contrast)
The hallway smelt of boiled cabbage and old rag mats. At one end of it a coloured poster, too large for indoor display, had been tacked to the wall. It depicted simply an enormous face, more than a metre wide: the face of a man of about forty-five, with a heavy black moustache and ruggedly handsome features. Winston made for the stairs. It was no use trying the lift. Even at the best of times it was seldom working, and at present the electric current was cut off during daylight hours.

Read the full post
Find Color Synonyms with the HP Color Thesaurus

Find Color Synonyms with the HP Color Thesaurus


HP has been doing some very cool things around color lately. One thing I recently stumbled onto is their Color Thesaurus. You enter in a color name and it gives you 4 similar named colors and 4 opposite colors. I used the tool to create the basic color wheel info below, but dive in and find out what colors are similar to Rose, Grass, Aqua, Ivory, etc.

Red

This is Red

Synonyms
Rouge
Ruby Red
Cherry
Crimson Red

Orange

This is Orange

Synonyms
Tangerine
Orange Juice
Pumpkin Pie
Burnt Orange

Yellow

This is Yellow

Synonyms
Dirty Yellow
Canary
Greenish Yellow
Mustard Yellow

Green

This is Green

Synonyms
Kelly
Grass
Emerald
Algae

Blue

This is Blue

Synonyms
Dutch Blue
Ocean
Sky Blue
Azure

Violet

This is Blue

Synonyms
Purple
Grape
Plum
Aubergine

The HP On-Line Color Thesaurus

The results that are returned are a large color square with a rendering of the color if it was found. If the name was not found, for example “greeb” was entered, then the next nearest color name in terms of edit distance, in this case “green”, will be returned. So no you won’t have to remember how to spell fuchsia. In addition to the colored square are the corresponding RGB and hexidecimal values. Finally there is a note about how common the color name is. Below this are the color synonyms and antonyms. Each column has smaller color squares rendering the color names and the names with links so that you can easily click-through to these names. The results are based on analysis of 20,000+ color name database in English collected from a 20+ language ongoing online color naming experiment.

Read the full post
Color Palettes in Adobe Swatch Exchange (.ase)

Color Palettes in Adobe Swatch Exchange (.ase)


Almost all of us use Adobe products in our professional and hobby design lives, but the new release of CS3 made it very hard for developers and websites like ours to allow users to get their palettes into the CS3 suite of products. CS3 uses a new format for storing color palettes aka schemes / swatches and Adobe kept their .ase file format a secret so that only Adobe Kuler could export to this format... Well, we're not very good about NOT sharing the color love... so Chris our skilled code engineer poured over all the specifications and documentation on the file format to figure out how to share that .ase love with everybody.

The Adobe Swatch Exchange (.ase) File Format - Source Code

For any other color lovers, developers or creative individuals who would like their applications and websites to be able to spit out .ase color palettes...

Here is the .ASE Source Code we are using.
 

Downloading .ase Color Palettes from COLOURlovers

COLOURlovers has over 200,000 user created palettes with more than 25,000 being added monthly. Not only is the community a creative and fun place to share color ideas... those ideas can be used in several professional design programs.
 

Read the full post
AI CS3 + Flickr + In The Mod Mashup

AI CS3 + Flickr + In The Mod Mashup


What do you get when Dr. Woohoo mashes up Adobe Illustrator CS3, Flickr and In The Mod: Color Analytics? A free swf Panel that runs inside AI CS3 that allows you to search Flickr & In The Mod, view the colors from each image or painting you select and then save them directly to the Swatches Panel in AI.
 

Adobe Illustrator CS3 + Flickr + In The Mod mash-up from dr woohoo.

Inspiration
The inspiration for the Flickr integration comes from a variety of sources – watching what Mario and Marcos did with Kelvin’s Flashr; looking at the photographs of the Ronin, Annie Liebowitz and Rebekka Guðleifsdóttir; and of course the colors we see all around us – in the orchids and the sunsets – whose combinations are simply perfect.

Read the full post
Great for Color, Your Home & The Earth: FLOR

Great for Color, Your Home & The Earth: FLOR


Today we're joining over 14,000 other blogs for Blog Action Day's conversation about the environment. Being conscious of the issues facing our planet and being proactive about lessening your impact doesn't have to be a plain or painful experience. FLOR is a company that is bringing lots of color and style to the home, and doing it with a planet friendly mission. Their customizable floor coverings make adding color to your personal space and helping the earth super easy.

FLOR makes a modular carpet tile in tons of styles, making it easy to create a custom rug of any site or run it wall to wall in any mix of colors or patterns. No Gluey-Goo, No Professional Carpet Layers... These are DIY and easy. (I look forward to making a palette of color on my office floor when the remodel is done.)

FLOR Color Options

At FLOR, we're really proud of who we are. From our great designs, to the functionality and versatility of our product, we think FLOR is pretty cool. But more than that, we're proud of what we stand for: Mission Zero™. Our environmental position, launched 12 years ago by our parent company, Interface, Inc., seeks to eliminate any negative impact our family of companies has on the environment by 2020.

We believe it's not just about what a product is made of, it's about how it's made. In the last 12 years, we have reduced manufacturing waste sent to landfills by 63% and our absolute greenhouse gas emissions by 56% worldwide. FLOR products bring a piece of Mission Zero into your home.

FLOR has an R&R™ program (Return-Recycle) that allows customers to share the responsibility of living green with FLOR. If you're ready to get rid of existing FLOR to make room for new FLOR in your home, contact us. We'll arrange for your used carpet tiles to be picked up and shipped back to our mill, where the old tiles will be recycled into new product.
FLOR is eco-friendly »

DYI Flooring for Color Lovers

FLOR modular tiles come in a variety of colors, patterns and styles. Included below are some examples of the color variety... you can Browse by Color to see all the options.

FLOR Carpet Colors
 
 
 
Blog Action Day

We're supporting our good friends over at BlogActionDay.org, an annual event where bloggers unite to bring some attention to a single important issue. This year the topic is the Environment and over 14,000 blogs will reach over 12 million readers.

Read the full post
Sony Bravia Multiplies Like Colorful Rabbits

Sony Bravia Multiplies Like Colorful Rabbits


I'm sure most color lovers have seen the memorable Sony Bravia Advert where paint cannons were used to brilliantly color an apartment complex. Well, now they're back with a new commercial using a combination of stop motion, radiant colors, and claymation.

Going to the site begins with tag lines about the effects colors in our lives, one of which is the use of red, orange, and yellow to entices appetite and how the use of pink in bubble gum when it was first invented -- which later became the standard -- was only pink because it was the only color the creator of bubble gum had.

sony bravia play-doh bunnies

Joining up with Hasbro, the company that owns and distributes Play-Doh, this new commercial with the slogan 'Colour Like No Other' for their LCD line hops to life in New York City.

Playing with Play-Doh

play-doh 50th anniversary colour pack   

Play-Doh was invented by Noah and Joseph McVicker in 1956 and awarded U.S. Patent 3,167,440 in 1965. One of many common products invented by accident, it was meant as a wallpaper cleaner. It was marketed by toy manufacturer Rainbow Crafts, and first sold at the Woodward & Lothrop department store in Washington, D.C. Seen here is its 50th Anniversary Collection, showcasing fifty of the colors available today.

Play-Doh is available in several different colors from day-glo to primary and sizes, and has a distinctive smell and texture. Over 900 million pounds have been sold so far. The product is now owned by American toy giant Hasbro.

strip of play-doh colours
Play With Color Flexible Fun

Read the full post
Color Meets Culinary Functionality

Color Meets Culinary Functionality


Since colour came home in the 1950s with the vibrance developed during the industry boom and chemical advances following the second World War, kitchens and colour have seemingly been at war with each other. The psychedelic art of the 1960s met the mustard and moss colours of the 1970s, and they both hated each other. But now, in a time less frightened and simultaneously less eager, colour is safely being brought home, and to wherever possible.

Blown Glass artist Annie Michaud is bringing colour to the kitchen. With her latest collection of blown glass products, it appears that, finally, the kitchen can spring forth from being a strictly utilitarian place. From mortars to decantors and vases to paper weights, Michaud's bold colours make their way from the counter onto the tabletop.

orange mortar by michaud   

Michaud's company, Gogo glass based in Montreal, Quebec, seems to be defined by dare, fun, and the joy of creation. Innovation and experience rule the creations of gogo glass. Michaud herself seems akin to the spontaneity and passion of the fire with which she works. The splash of colour she brings to the usually dull or plain mortal and pestle is a warm welcome in red, orange, green, and blue. Also amongst her creations are lemon squeezers, salt bowls, decantors, and more.

Read the full post
Textile Arts New Fall Colors

Textile Arts New Fall Colors


While stumbling around the web I came across a fabric shop that had some great fabric designs. I thought the simple but colorful patterns in their Fall 2007 collection would lend well to some inspired palettes...

TEXTTILE ARTS has the finest in retro, mid-century modern and contemporary Scandinavian design from MARIMEKKO and for the first time in the US, LJUNGBERGS.

From fabric and wall hanging kits to umbrellas and handbags, if you want colorful modern design you have come to the right place.

Elephants

Textile Colors Fall: Elephants
Yellow Elephants   Pink Elephants

Read the full post