Colors… Web 2.0 part 2

So as we all know computers are pretty much 0s and 1s put together in different orders and voila! you have virtual reality. One of the very important factors when constructing virtual reality, or games, or web site of anything on the computer is color. So how do computers represent color in numbers?

In fact, the concept is exactly the same as when you actually mix colors on a color palette. Say if you mix black and white, you have grey and so on. Well there are mainly 2 color models that computer uses: RGB (Red – Green – Blue) and CMYK (Cyan – Magenta – Yellow – blacK). In this post I’ll mainly talk about RGB since I’m more familiar with it.

RGB

RGB

CMYK

CMYK

Anyway, computer mixes and creates new colors based on those 3 basic colors Red Green and Blue. The intensity of each color is represented in numeric values: 0 – 255 with 0 being no color of that kind and 255 being totally of that color. Now 0 – 0 – 0 actually represents black and 255 – 255 – 255 represents white. Well, technically…

***nerd alert***

… those colors are in Hex, which goes from 00 to FF. So white is FFFFFF and black is 000000. Red is FF0000 so on and so forth.

***nerd alert***

Anything in between with same combination of each represent different shades of grey. Other than that, computer also uses HSV (Hue – Saturation – Value) to adjust colors and their different shades. You can read more about that right here: http://en.wikipedia.org/wiki/HSL_and_HSV

Now we all know there’re Warm Color (Red – Orange – Yellow) and Cool Color (Green – Blue – Purple). Combinations of these can create very attractive interfaces. I believe those rules are actually based on the color wheel.

Color Wheel

Color Wheel

As far as I’ve known, there’re several rules or color schemes when it comes to color combinations:

1. Monochromatic: Just like it sounds, this color scheme representing the use of 1 specific color with different shades and saturation, for example blue, light blue, dark blue… Facebook can be regarded as using Monochromatic color scheme, mainly blue. My homepage is also monochromatic: it’s mainly black, white and different shades of grey. On the color wheel, it would actually be just 1 color on the wheel.

Monochromatic Color Scheme

Monochromatic Color Scheme

2. Analogous Color Scheme: This scheme represents using colors next to each other, for example red, yellow, purple, of course you can throw in different saturations and lightness also. Similar colors next to each other is a rather safe choice of color mixing since it rarely creates color conflict.

Analogous Color Scheme

Analogous Color Scheme

3. Complementary Color Scheme: This indicates the usage of colors from 2 different sides of the color wheel. This can create contrast and focus on specific areas of the content. It can also create unbalance if not used carefully.

Complementary Color Scheme

Complementary Color Scheme

4. Split Complimentary Color Scheme: I think this one is sort of a nice blend of the previous 3. It also offers a wider variety of color choices if you want to spice up your website. You can still keep the focus on certain high contrast area and still make it blend in with the rest of the site, pretty cool huh!!

Split Complementary Color Scheme

Split Complementary Color Scheme

5. Triadic Color Scheme: This one also offers a large collection of color choices. The colors are split evenly on the color wheel, which can be 2 warm – 1 cold color or vice versa. This can also create high contrast if placing the 1 cold/warm color on focus.

Triadic Color Scheme

Triadic Color Scheme

6. Tetradic Color Scheme: A combination of analogous and complementary. Now you have 2 analogous on each side of the color wheel so 2 warm – 2 cold colors. Same advantages and disadvantages as the above mentioned but can also be very risky.

Tetradic Color Scheme

Tetradic Color Scheme

So that’s it for colors… I hope this is useful. I’ll talk about gradients and reflections next time. My college campus just got blackout so my website is currently down. I gotta migrate it to my own domains from JustHost.com, hopefully it’s not too shabby. Have fun designing!!!

P.S: There’s a pretty awesome color scheme generator website right here so feel free to check that out: http://colorschemedesigner.com/

Advertisements
Tagged , , , , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: