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 1,989 articles, you're sure to find something you love. Or if you have a great idea, let us know!

HINT.FM: Helping Color In the World of Understanding Through Visualizations

HINT.FM: Helping Color In the World of Understanding Through Visualizations


Fernanda Viégas and Martin Wattenberg are research scientists in IBM's Visual Communication Lab. Their work explores the power of visualization as a mass medium and the social forms of data analysis it enables. HINT.FM is a collection of the duo's collaborative efforts.

Their entire body of work is thoughtful and intelligent, and lends to the development of our understanding of self and society. A kaleidoscope of art, technology, science, & sensuality their projects acutely record and analyze our responses to the colorful world around us.

"The two became a team in 2003 when they decided to visualize Wikipedia, leading to the “history flow” project that revealed the self-healing nature of the online encyclopedia. Viégas is known for her pioneering work on depicting chat histories and email. Wattenberg’s visualizations of the stock market and baby names are considered Internet classics. Viégas and Wattenberg are also known for their visualization-based artwork, which has been exhibited in venues such as the Museum of Modern Art in New York, London Institute of Contemporary Arts and the Whitney Museum of American Art. " - hint.fm/about

Here are some of their projects as described by the team.

Lucious

Luscious pays homage to fashion designers and photographers, those who compose rousing images of light and color that fill the pages of glossy magazines. The piece is our attempt to distill their visions into abstract compositions.

To create the images in luscious, we began with a series of magazine advertisements for luxury brands. We then used a custom algorithm designed to extract “peak” colors from any picture (much like our Wired anniversary piece). A random arrangement of concentric circles fills the plane, representing the essential colors of each region. The resulting image hides context and representation and lets the viewer concentrate on pure color.

luscious

Read the full post
All About the Colorful @ (At Symbol)

All About the Colorful @ (At Symbol)


The @ (a.k.a at-sign, at-symbol, commercial at, snail, arrobase, monkey tail, little mouse, asperand, alphastratocusa along with many other names) is very familiar to us in the digital age, but like so many other things that are perfectly adapted and @ home in the digital age its historical uses, and the development of the symbol itself, is often never known, taken for granted, and forgotten.

While There are many different theories of how @ developed, it is fairly obvious its first widely accepted use was for representing commercial pricing rates ("at the rate of" 12 @ $1 = $12). It wasn't until 1971 when Raymond Tomlinson, an American programmer, used it as the natural division within the first e-mail message ever sent, that @ took on its modern meaning, and subsequently, a symbol for "The Internet", computerization, or modernization as a whole.  Now it has gone as far as being admitted into the Museum of Modern Art's Design & Architecture collection.

Scroll down to see what people think the color of @ is.

@ History

"No one knows for sure when it first appeared. One suggestion is that it dates to the sixth or seventh century when it was adopted as an abbreviation of “ad,” the Latin word for “at” or “toward.” (The scribes of the day are said to have saved time by merging two letters and curling the stroke of the “d” around the “a.”) Another theory is that it was introduced in 16th-century Venice as shorthand for the “amphora,” a measuring device used by local tradesmen." - Why @ Is Held in Such High Design Esteem

File_At-sign-evolution
A hypothetical evolution of the at-sign


Medieval monks abbreviated the Latin word ad (at, toward, by, about) next to a numeral.

It was originally an abbreviation of the Greek preposition ανά (transliterated ana), meaning at the rate of or per.

Read the full post
Be Kind to the Color Blind

Be Kind to the Color Blind


This guest post is written by Chris Cambell from WuFoo. It was originally posted on the Particletree blog in October, 2008. Chris is obsessed with buzz marketing and customer evangelism. He’s not afraid to get out there in a gorilla suit and respond to every one of his emails as if it were from his mom. When he’s not resolving disputes between his team members, he’s their favorite PHP developer. Chris’s favorite weapon is the broad sword.

Hi, my name is Chris Campbell and I have a color vision deficiency. Like roughly 7-10% of all males, my deuteranomaly makes it difficult to differentiate between some colors, like red and green. Color deficiency, or color blindness as it’s commonly referred to, doesn’t mean that I or people with similar conditions cannot see certain colors. They’re not invisible and I don’t see in black and white (a condition that is actually very, very rare). I can still use crayons effectively, find meaning in beautiful sunsets and even enjoy clear blue skies. What it does mean is that certain colors in the visual spectrum look a lot like one another and so I have a hard time sometimes telling the difference between certain colors and even shades.

Because of this, designing software and interfaces that will also work effectively for people like me takes a bit of concerted effort. Of all the elements of design (line, shape, size, texture, etc.), color is probably one of the most used elements to pass on informational states. This is probably because it allows a designer to say many things without having to change the form or layout of the design. While there are a number of simulators and plugins that can help you “visualize” what a color deficient person might be seeing, I honestly don’t recommend spending a lot of time with them. Instead, I’d like to propose just a few simple guidelines along with plenty of examples to help you effectively ensure that a good percentage of your audience won’t misinterpret your message.

Avoid Using Colors Alone as Visual Cues

Using color and color alone as a visual cue is appealing because it’s usually an aesthetically pleasing and a minimalist design technique. Calls to action and visual cues are critical to interface designers because users, especially on the web, have limited patience and are looking to process information and make decisions quickly. Since the brain recognizes and forms an emotional bond with colors almost immediately, colors are a natural choice for visual cues. Unfortunately, it’s easy to alienate or confuse some of your users when some of those aesthetically pleasing colors look very similar. To point out a few interfaces that use hard to differentiate colors as visual cues, here are a few examples that have given me some trouble.

Read the full post
Calculating Color Contrast for Legible Text

Calculating Color Contrast for Legible Text


This guest post is written by Kevin Hale from WuFoo. It was originally posted on the Particletree blog in Sept. 2008. Kevin is a champion of good user experience and brilliant interface design. As much as Kevin likes keeping things clean and reliable, he loves innovation. Kevin was also the kid in elementary school who ate a box of crayons for a dollar.

In the past on Particletree, we’ve shared some of our favorite resources and guides for helping the color challenged and uninspired get their chromatic deliciousness on. As a designer, getting to choose the colors is often the part of the job I like the best. However, there are times when it’s nice to be able to write some code to help make some of the decisions for you.

One of my favorite implementations of using programming to supplement the color picking process was done by the clever Canadians over at Dabble DB. All you have to do is upload your logo and their application will automatically pick the colors based on the information contained in the image and create a theme for their web app that will match the logo.

Dabble-DB-logo

It’s an impressive feature that helps the user focus on getting things done rather than worry over the details. While I won’t be going into all of the ideas they used to implement their feature in this article, I do want to take some time to talk about how you can get a legible contrasting foreground color for a piece of text when given a specific background color.

Read the full post
The Great Sex Divide of the Web

The Great Sex Divide of the Web


There have been multiple studies done regarding women and men involved in web design (and their preferences when it comes to "good" design), and they all sum up to one fact that begs the question: where all the women at?

In A List Apart's 2008 web design survey (released at the end of each year) out of the 29,940 designer respondents only 16.2% were women, which is really no change from the 16.1% (32,831 respondents) in 2007.

A study in 2005 found that 74% of websites were produced by a man or a predominantly male team while just 7% were designed by a female or female team.

Historically, industries like architecture and design have been "men's club," and some have even asked if women are deterred from the web because it is seen as being as "masculine" as the construction or auto mechanic industry. In my mind, the web is the most accessible platform for human knowledge, and as such, it is, or should be, just as open in the creation of its infrastructure and design as in its core ideals.

What Sex is Your Design?

2005 student study conducted by the University of Glamorgan in the UK into what aesthetically appeals to males and females when surfing the web, found that there were differences in language, visuals and navigation preference between women and men. Women prefer more color in the background and typeface, rounded forms and informal language, where the opposite was true for men: straight lines, fewer colors and formal or expert language.

Another part of the study found an overwhelming preference for sites designed by the same sex as the respondent.

Read the full post
A Spectrum Of Website Colors

A Spectrum Of Website Colors


We're starting out our dedicated web channel covering the latest in color and design trends from around the web, along with the general "colorfulness" of the ever-evolving internet culture, with a little color love across the entire spectrum. Here is a roundup of great examples of website color compositions in pink, red, orange, yellow, green, blue, purple, colorful, brown & grey.

To create an inspired palette from any of these images, or any image on the web, simply copy the image's URL (right click) and paste it under the "Photo" tab in PHOTOCOPA.

Click on the image for the link.

Pink

pinkweb1

snugglefux.com cssprincess.com

Read the full post
Web Trends: Blue & Green Palettes

Web Trends: Blue & Green Palettes


Blue & Green color palettes from across the web.

To create an inspired palette from any of these images, or any image on the web, simply copy the image's URL (right click) and paste it under the "Photo" tab in PHOTOCOPA.

dynamo

bgweb17
link

bgweb18
link

Read the full post
Eclectic Color Roundup

Eclectic Color Roundup


Art

Anders Oinonen

Portfolio

anders1

anders2

Read the full post
The Colors Of 'We Have Lasers!'

The Colors Of 'We Have Lasers!'


We Have Lasers! : "You begged your mom to pay the extra $4. A tribute to the greatest school photo backdrop there ever was."


we_have_lasers_1 we_have_lasers_2


we_have_lasers_3we_have_lasers_4

Read the full post
Eclectic Color Roundup

Eclectic Color Roundup


Art

The Photos of Greg Girard

Portfolio

Read the full post

Search The Blog

Subscribe & Share

Our Latest Tweets

RT @ryan_schuijer: Dang, check these waterdroplets on @codepen, made by @stefanweck! So well made, it's like a window in your device https:…
about May 25, 2017
Tweet this ArticleFollow @COLOURlovers

Latest Articles

//View More ›

Latest Web Colors

//View More ›

Latest Web Palettes

//View More ›

Latest Web Patterns

//View More ›