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

Font-Integration Roundup

Font-Integration Roundup


Seeing more and more interesting typography on the web lately is like a huge breath of fresh air, and thankfully it's an area going through rapid evolvement. I'm so used to the same old typefaces everywhere that even a little bit of departure can make such a stand-out difference. There's several ways to make use of dynamic text replacement (read more about the various ways to do it here) and while I haven't attempted it myself yet, I'm definitely curious if anyone has and what their experience has been. In the meantime, check out some of my favorite sites that use font-integration. A lot of these came from The Design Cubicle and siteInspire so head over there for even more web design inspiration.

Frank Chimero

Read the full post
Minimal Art Inspires Subdued Hues

Minimal Art Inspires Subdued Hues


I don't know about you, but I find an empty, sparse palette to be hugely inspiring. Imagine my delight when I discovered this sexy new hyper-minimal tumblr, Erasing.


Bonneville I, archival pigment print by Charles A. Hartman


Tokuro Sakamoto

Read the full post
Surprising Web Design, Sans Flash...Sort of*

Surprising Web Design, Sans Flash...Sort of*


Isn't it funny to reminisce about the infancy of the internet? Sure you could say we're still in toddler-hood, but way back when in aught-2, Flash dominated the web and your junk mail consisted of AOL coasters startup CDs...Man, those were the days.

2002-2003 was right about the time when I started job hunting which meant clicking through one graphic design firm's website after another, twiddling my thumbs watching delicately crafted pre-loaders process while the bulky Flash site loaded behind them. And finally once "inside" the site, having to process and absorb yet another almost completely obtuse navigation. I even taught myself the program and churned out a couple entirely-Flash sites early in my career which, needless to say, were practically outdated before they launched.

Even as Flash is going the way of the Dodo, there are the occasional websites that demonstrate a modern take on all those bells and whistles that were more prevalent in the heydays of the big F. I like to call them "storybook sites" because there's a certain flow or narrative that takes you through the content without feeling intrusive or letting you get lost. And even more impressively, these storybook sites use no Flash whatsoever but instead rely on a Javascript genius who has the ability to write that functionality from scratch. * Which is pretty bad*ss if you ask me.

Here's a handful of examples.

Read the full post
Jessi's Rainbow Birthday: A Celebration of Color

Jessi's Rainbow Birthday: A Celebration of Color


To celebrate Jessi's Birthday it was suggested that everyone should dress in their favorite color from head-to-toe. Not being able to decide what her favorite color was–something many of us here at COLOURlovers can easily relate to–Jessi decided to change outfits every hour covering the entire spectrum with a monochromatic outfit for each hue. As a present, and to commemorate this colorful occasion, Josh Stewart created the website Jessi's Rainbow Birthday.

"I’m Jessi, and I LOVE color. This website represents April 16, 2010, my 31st birthday. When the lovely Jessica Hische brilliantly suggested the theme of everyone dressing head-to-toe in a single color a mere day before my birthday, I was surprised to find that I already had the complete makings for several different colors in my closet. (Most of my friends and family will tell you they are not at all surprised.) I couldn’t decide which color was my favorite, so I decided to opt for 11 outfit changes. I’m so grateful to my friend and colleague Josh Stewart for turning the day into a website. It’s SO me."

PMS 215 or Shopgirl’s Raspberry Beret

"I started my birthday with a bang of color! On our walk to work, Creighton and I noted how our regular clothes, which normally wouldn’t get a second look, were all of the sudden arresting viewers simply because of the unconventional combination. (Creighton was wearing all red.) Want to stop traffic? Dress head-to-toe one color. This feather hat and vintage Neiman-Marcus silk shirt came from the Brooklyn Flea. The scarf is from a New Year’s trip to New Orleans with the Amy, Scott and Lucy. The purchase of an accessory is a spectacular way to remember a journey. The magenta cords are from Brooklyn Industries, and if you ever find magenta Ropers (boots) in your size while thrift shopping, BUY THEM."

Read the full post
The Daily Dish: 365 Petri Dish Paintings by Klari Reis

The Daily Dish: 365 Petri Dish Paintings by Klari Reis


"The Daily Dish by Klari Reis is a series of hand painted plexiglass petri dishes. She uses epoxy polymer to depict microscopic images. The effect is hopeful, almost playful, belying the serious nature of the subject matter... Working with biotech companies in San Francisco, Klari uses organic cellular imagery and natural reactions to explore our complex relationship with today's biotechnological industry."


Read the full post
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