Let’s discuss!

Too Much Color Can Be a Bore

In the world of visual arts, a full-color palate can be very attractive, very seductive, for the artist. It’s a real temptation to create with every color possible, and it certainly can be fun! But the truth is, using all the colors of the rainbow for every project can actually be boring.

Color, in artwork or media production, is meant to grab attention, to direct a person, to impress something upon the mind in an immediate way. If color is everywhere without rhyme or reason, then it can become nonsensical and even worse, distract people from the very message the artist is trying to convey. This is definitely an instant where less is more.

Black and White Can Also Be Boring

Black and white, especially in photography, websites, or multi-media, if not used correctly, can also be a major bore. Black and white must have contrast. This seems obvious at first. In the mind’s eye, you may see that there is a natural contrast between black and white; black and white exudes contrast. Still, without the correct lighting, black and white can turn into tones of dull gray.

Color in Films

Have you ever seen one of the great black and white films that was so well lit the whole movie became a work of art? Compare this to films that were essentially black-and-white with one color added to enhance an unusual or compelling message. If done correctly, this can be an extremely effective use of color. Then there are films that use a color to wash certain scenes. This color wash lets the audience know exactly where they are in any given scene.

Visual Arts

Visual arts encompasses so much that there are a million ways to use both color and black and white. A well-done charcoal is hard to beat for effect and beauty; this is black and white at its best. Pastels or watercolors are usually delicate in nature with a soft and lovely use of color. And then there is the vibrancy of oils on canvas that can grab attention like nothing else. To see a Van Gogh, up close and personal, is to experience color and passion as one has never experienced it before.

So What’s the Answer?

• First look at the message your poster, website, or film is projecting and decide what color scheme is going to enhance that message.
• Get acquainted with color, not only its visual power but also the symbolism behind each different hue.
• Experiment with black and white. In this great day of computer technology, it’s easy to look at ideas in black and white, as well as a great range of color schemes.

Experiment

Don’t be afraid to experiment with color. Try a solely black-and-white project. Then try one where you mix black and white with an interesting color, here and there. And remember, for your own personal projects you are the ultimate decider; the ultimate artist. Take the risk. Trust yourself. Do it! As you gain more experience, you’ll have an easier time deciding whether to use color, black and white, or a combination.

In this article we will talk about CSS3 colour techniques such as RGB / RGBA and HSL / HSLA color models, opacity, linear and radial gradients, box and text shadows as well as show you some examples of excellent implementation of the CSS3 colour techniques in practice. You will get some hints as to the new markup, understand how to incorporate new CSS3 elements, embrace the new creative freedoms of CSS3 and start using powerful and absolutely awesome CSS3 colour techniques today!

You may also be interested in:

Newest Design Trends with Popular CSS3 Techniques
How To Develop CSS3 Border Radius Tool
7 Useful CSS3 Code Generators
Best Examples of CSS3 Navigations and Menu Tutorials

Colors in CSS3

Resources: SlideShare Presentation: Colors in CSS3 by Lea Verou

W3C CSS3 Color Specification

W3C CSS3 Color Specification (working draft, 21 July 2008) describes color values and properties for foreground color and group opacity in CSS3 color module.

W3C: CSS3 Color Modul

CSS3 Color Names

CSS3 supports 147 different colors by name (the 17 standard colors plus 130 more). This lists them all, along with their RGB and hexadecimal values.

CodeNique: CSS3 Color Names

Color Models, Opacity

RGB & RGBA

The RGB declaration sets color/colour using Red (R), Green (G) and Blue (B) color model. Alpha (A) allows us to specify a level of opacity for a color. An element with opacity/alpha value of 1.0 is fully visible (opaque) while an element with opacity value 0.0 is completely invisible.

div.L1 { background:rgb(60, 80, 100); height:20px; }
div.L2 { background:rgb(60, 100, 100); height:20px; }
div.L3 { background:rgb(60, 120, 100); height:20px; }
<br />
div.L4 { background:rgb(25, 50, 100); height:20px; }
div.L5 { background:rgb(25, 50, 150); height:20px; }
div.L6 { background:rgb(25, 50, 200); height:20px; }

div.L1 { background:rgba(153, 134, 117, 0.2); height:20px; }
div.L2 { background:rgba(153, 134, 117, 0.4); height:20px; }
div.L3 { background:rgba(153, 134, 117, 0.6); height:20px; }
div.L4 { background:rgba(153, 134, 117, 0.8); height:20px; }
div.L5 { background:rgba(153, 134, 117, 1.0); height:20px; }

• Zen Elements: CSS3 RGB & RGBA
• CSS3 Info: RGBA Colors
• RGBA – Color with Transparency

HSL & HSLA

The HSL declaration sets color/colour using Hue (H), Saturation (S) and Lightness (L) color model. Alpha (A) allows us to specify a level of opacity for a color. An element with opacity/alpha value of 1.0 is fully visible (opaque) while an element with opacity value 0.0 is completely invisible.

Hue is a degree on the color wheel: 0 & 360 – red, around 120 – green, 240 – blue.
Saturation is a percentage: 0% – grayscale, 100% – full color.
Lightness is a percentage: 0% – dark, 50% – the average, 100% – light.

div.L1 { background:hsl(320, 100%, 25%); height:20px; }
div.L2 { background:hsl(320, 100%, 50%); height:20px; }
div.L3 { background:hsl(320, 100%, 75%); height:20px; }
<br />
div.L4 { background:hsl(202, 100%, 50%); height:20px; }
div.L5 { background:hsl(202, 50%, 50%); height:20px; }
div.L6 { background:hsl(202, 25%, 50%); height:20px; }

div.L1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
div.L2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
div.L3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
div.L4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
div.L5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }

• Zen Elements: CSS3 HSL & HSLA
• CSS3 Info: HSL Colors
• CSS3 Info: HSLA Colors
• HSLA – Color with Transparency

Opacity

CSS3 opacity allows us to control how see-through an element is. The opacity declaration sets the value to how opaque an elements (layer, text, image, etc.) is. An element with opacity value 1.0 is fully opaque (visible) while an element with opacity value 0.0 is completely invisible. Any value in-between determine how opaque the element is.

div.L1 { background:#036; opacity:0.2; height:20px; }
div.L2 { background:#036; opacity:0.4; height:20px; }
div.L3 { background:#036; opacity:0.6; height:20px; }
div.L4 { background:#036; opacity:0.8; height:20px; }
div.L5 { background:#036; opacity:1.0; height:20px; }

• Zen Elements: CSS Opacity
• CSS3 Info: Opacity Preview
• About.com Web Design / HTML: CSS3 Opacity
• Exforsys Tutorials: CSS3 Opacity
• Not As Clear As It Seems: CSS3 Opacity and RGBA

Gradients

There are a whole variety of gradient options available with CSS3. Linear and radial gradients are becoming irreplaceable! They go a long way towards simplifying layouts and allow us to create visually appealing design with saving a huge amount of time and efforts.

To create CSS3 gradient, use background:-moz-linear-gradient(pos, #AAA B, #XXX Y);
pos = the position of the first color, giving direction to the gradient
#AAA = primary color
B = where the fade begins (%)
#XXX = secondary color
Y = where the fade begins (%)

Linear Gradient

.my_CSS3_class {
  height: 100px;
  background: -moz-linear-gradient(top, #35425d 0%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom,
                     from(#35425d), to(#fff));
}

.my_CSS3_class {
  height: 100px;
  background: -moz-linear-gradient(left, #35425d 25%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom,
                  from(#35425d), to(#fff));
}

Radial Gradient

.my_CSS3_class {
  height: 250px;
  background: -moz-radial-gradient(50% 50%, farthest-side, #487a77, #fff);
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350,
                  from(#487a77), to(#fff));
}

• Zen Elements: CSS3 Gradients
• CSS Tricks: Speed Up with CSS3 Gradients
• Quick Tip: Understanding CSS3 Gradients
• CSS3 Gradient Generator
• Westciv: Linear Gradients
• Westciv: Radial Gradients

Shadows

Box Shadow

Shadows can be applied in CSS3 to borders, images, and text as well.

To create CSS3 box shadow, use box-shadow: Apx Bpx Cpx #XXX;
Apx = x-axis
Bpx = y-axis
Cpx = cast length / feathering
#XXX = colour as usual

#my_CSS3_id {
  border: 5px solid #c4c8cc;
  -moz-box-shadow: 5px 5px 7px #888;
  -moz-border-radius-bottomright: 15px;
  -webkit-box-shadow: 5px 5px 7px #888;
  -webkit-border-bottom-right-radius: 15px;
}

• Zen Elements: CSS3 Box Shadows
• Westciv: Box Shadow

Text Shadow

Similar to the box shadow effect, CSS3 shadow technique can be applied to text.

To create CSS3 text shadow, use text-shadow: Apx Bpx Cpx #XXX;
Apx = x-axis
Bpx = y-axis
Cpx = cast length / feathering
#XXX = colour as usual

.my_CSS3_class {
  text-shadow: 2px 2px 7px #111;
  font-size: 3.2em;
  color: #f5f5f5;
}

• Zen Elements: CSS3 Text Shadow
• Westciv: Text Shadow

Excellent implementations of CSS3 Color Techniques

CSS3 Gradient Buttons

Gradient buttons created with just CSS (no image or Javascript) are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values.

“CSS3 Gradient Buttons” Tutorial + Demo

Super Awesome Buttons with CSS3 and RGBA

A tutorial for creating really cool buttons using the RGBA feature of CSS3.

“Super Awesome Buttons with CSS3 and RGBA” Tutorial + Demo

Browser Support

Detailed information about CSS3 color support in most of the modern web browsers (Chrome, Firefox, Opera, Safari).

Web Designer’s Browser Support Checklist

FinMeByIP: Web Designer’s Browser Support Checklist

Web Browser CSS3 Support

Web Devout: Web Browser CSS3 Support

Here is the list of 20+ color tools for designers.

1. Color Scheme Designer

Color Scheme Designer

2. Color Blender

Color Blender

3. Color Check

Colour Check

4. Color Lab

Color Lab

5. I Like Your Colors

There is a form at the bottom of this page that lets you choose any URL you want to extract colors from. The colors you see here are from the site that referred you to this page!

I Like Your Colors

6. Color Combos

Color Combos

7. Color Schemer

Color Schemer

8. Web-Safe Swatch Collections

Web Safe Swatches

9. Color Palette Generator

Enter the URL of an image to get a color palette that matches the image.

Color Palette Generator

10. Colors From Images

Colors From Images

11. Color Spire

Color Spire

12. Color Blender Tool

Color Blender Tool

13. Color Lovers

COLOURlovers is a resource that monitors and influences color trends.

Color Lovers

14. Peter Piper’s Palette Picker

Palette Picker

15. Color Hunter

Color Hunter is a color palette generator that uses flickr photos to create a palette.

Color Hunter

16. Color Jack

ColorJack is an online generator that lets you hover over a color on the site’s grid to see themes that use that color.

Color Jack

17. Daily Color Scheme

Daily Color Scheme

18. Palette Man

Palette Man

19. Color Explorer

With the colorful toolbox at ColorExplorer you can easily create, manage, and explore color palettes for use in web designs, desktop publishing, or any other graphic design process.

Color Explorer

20. Web 2.0 Colour Palette

Organised into 3 distinct colour groups – neutrals, muted tones and bold colours, you may recognize a few of the shades from some of your favourite Web2.0 sites.

Web Color Palette

21. Color Cell

Color Cell