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

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
For the Record: Adobe Kuler vs COLOURlovers

For the Record: Adobe Kuler vs COLOURlovers


I get emails, instant messages and love notes pretty often asking if I've seen Adobe Kuler and if I'm upset about it... So here is my opinion on the matter.

Back in Nov. of last year Adobe Labs launched Kuler: A 5 color palette creation tool, built around rating, tagging, commenting and sharing the palettes. Craftzine gushed, "Not only can you create your own palettes, you can get inspired by the popular color combinations already uploaded by other users. Genius!"

I take the last word in that sentence with pride. The idea is genius... I should know, I created it 2 years earlier when I built COLOURlovers.

Read the full post
Ultimate HTML Color HEX Code List

Ultimate HTML Color HEX Code List


HTML 3.2 specifications identified sixteen colors that can be used by name to define color in HTML and CSS. But don't worry you can use more than sixteen colors in HTML... you'll just need to know the six character HEX values and we've listed pretty much all of the ones you'll need on one page.

 

Standard 16 Named Color Codes

 Black or 000000 Gray or 808080 Silver or C0C0C0 White or FFFFFF
 Navy or 000080 Blue or 0000FF Teal or 008080 Aqua or 00FFFF
 Purple or 800080 Maroon or 800000 Red or FF0000 Fuschia or FF00FF
 Green or 008000 Lime or 00FF00 Olive or 808000 Yellow or FFFF00
Read the full post

Search The Blog

Subscribe & Share

Our Latest Tweets

Attention #colourlovers: If you need any color inspiration, check out our new palette collection on @Behance called… https://t.co/Gpx8tdkU4C
about 2 days ago
Tweet this ArticleFollow @COLOURlovers

Latest Articles

//View More ›

Latest Web Colors

//View More ›

Latest Web Palettes

//View More ›

Latest Web Patterns

//View More ›