Text Size
Sabtu, May 19, 2012

/hello world...

Selamat datang wilujeng sumping sugeng rawuh di blog saya yang baru. Blog yang berusaha didedikasikan untuk dunia pendidikan, design grafis dan TIK Indonesia.

What's Inside

Lagi-lagi artikel tentang warna. Kenapa? Karena susah-susah gampang membuat design menggunakan warna yang istilahnyaaaa... pleasing to the eye.

Warna adalah hal pertama yang diperhatikan orang lain ketika melihat karya design kita dan akan sangat mempengaruhi pandangan awal orang lain tentang siapa kita sebenarnya. Warna juga mempengaruhi mood dan memberikan suatu respon emosi terhadap audience. Jika salah menerapkan warna pada suatu design akan berakibat perbedaan persepsi orang terhadap kita. Karena itulah warna dianggap penting dalam dunia design.

Warna juga memainkan peranan penting dalam kehidupan manusia. Warna dapat merubah persepsi, cara berpikir, merubah tindakan dan menyebabkan sebuah reaksi seseorang. Warna dapat menyebabkan mata kita terganggu, merasa nyaman, menaikkan tekanan darah bahkan dapat menambah nafsu makan. Warna juga dapat menyampaikan sesuatu pesan. Makanya tidak mudah menerapkan suatu skema warna ke dalam design kita. Bukan berarti kia suka lantas kita gunakan warna tersebut tanpa memperhatikan aspek psikologis sebuah warna seperti yang telah disebut sebelumnya. Kita harus paham pesan yang disampaikan oleh masing-masing warna dan harus cocok dengan media dan suasana yang akan kita presentasikan ke audience.

Model Warna

Ada beberapa model warna atau disebut juga Color Mode. Model Warna yang umum dipakai ada 2 yaitu RGB dan CMYK. RGB adalah singkatan dari Red Green Blue, sebuah sistem pewarnaan pada media elektronik seperti layar televisi, monitor dimana alat-alat tersebut bekerja dengan menembakkan 3 buah warna yaitu merah, hijau dan biru dan mencampurnya sehingga dapat menghasilkan ratusan ribu warna. Produk yang menggunakan sistem warna RGB adalah film, animasi dan gambar bergerak yang muncul pada layar/display.

Sedangkan CMYK adalah singkatan dari Cyan Magenta Yellow & Black. Sistem yang berlaku bagi industri cetak dan sudah menjadi standard dunia ketika membuat artwork yang akan dicetak di atas kertas. Produk yang menggunakan sistem warna CMYK adalah semua barang cetakan yang kita temui sehari-hari.

rgb-and-cmy-wheels

Warna Asosiasi
Warm Colors api, kehangatan, gairah, energi, hasrat, kebahagiaan, santai,kenyamanan , mencari perhatian, mengundang perhatian, harmoni
Cool Colors air, ketenangan, kepercayaan, piawai, profesional, pakar, mahir, melankolis, harmoni, kesendirian
Red api, darah, marah, fire, blood, penekanan, kekuatan, energi, perang, bahaya, aksi, cepat, penting/vital, keyakinan, penekanan, vitalitas, hasrat, keinginan, cinta, metabolisme meningkat, tekanan darah, mudah terlihat, ingin diperhatikan
Yellow matahari, ceria, kebahagiaan, kegembiraan, bijaksana, energi intelektual, merangsang aktifitas mental, merangsang otot, kehangatan, kegembiraan, menyenangkan.
Blue sky, sea, slows metabolism, breathing, and heart rate, masculine, trust, loyalty, wisdom, intelligence, expertise, confidence, stability, depth, calming, suppresses appetite
Orange energy, happiness, healthy food (citrus), joy, sunshine, the tropics, enthusiasm, happiness, fascination, creativity, determination, attraction, success, encouragement, stimulation, strength, increases appetite, fall, harvest
Green growth, hope, freshness, fertility, financial wealth, healing, stability, endurance, harmony, safety, life, well being, lack of experience
Purple stability, energy, wealth, extravagance, royalty, power, nobility, luxury, ambition, wisdom, dignity, independence, creativity, mystery, magic, feminine, artificial
White light, goodness, innocence, purity, virginity, positive connotations, clean, safe
Black power, elegance, formality, death, evil, mystery, strength, authority, elegant, fear, unknown
Gray sorrow, detachment, isolation, responsibility, conservative, non-invasive, security, maturity, dependability, willingness to comply
Brown bumi, material alam, keteraturan alam, stabilitas, padat, alam sekitar

Skema Warna atau Color Schemes

Hal-hal yang saya jelaskan di atas menyangkut warna individu atau warna-warna tunggal.  Ketika ada lebih dari satu warna yang digunakan atau Anda menggunakan  lebih dari satu warna dan tingkat kepekatan sebuah warna (tone, shade & tints) berarti Anda akan menciptakan Skema Warna (Color Schemes). Banyak skema warna timbul dari lingkaran warna (color wheel) dan posisi warnanya berhubungan antara satu warna dengan warna lain di lingkaran warna yang sama.

  • Monochromatic skema warna yang dibentuk dengan cara memvariasikan tone dari warna tunggal yang bergerak menuju ke arah pusat atau pinggir dari lingkaran warna.
  • Analogous skema warna yang dibentuk dari warna turunan pada lingkaran warna
  • Complementary skema warna yang dibentuk dari warna-warna yang berlawanan pada ujung lingkaran warna.
  • Triadic color schemes are formed by choosing colors spaced equally around the color wheel
  • Tetradic color schemes are formed by choosing colors at the 4 corners of a rectangle inscribed on the color wheel
  • Split Complementary color schemes are a combination of analogous and complementary schemes. One of the two complements is chosen and it’s analogous colors are included in your scheme
  • Neutral skema warna yang menyertakan warna yang tidak terdapat di lingkaran warna, kadang disebut juga  color schemes include colors not found on the color wheel, namely various tones of gray and brown
  • Accented Neutral skema warna dengan warna dari lingkaran warna yang digunakan sebagai aksen.

RGB and Hexadecimal to the Rescue

Colors on the Web are represented by hexadecimal code. You probably recognize the format: #00AAFF. These six digits represent red, green and blue, respectively. So, in this example, 00 represents red, AA represents green, and FF represents blue. Every digit can have a value of 0-9 or A-F. A value of F means full saturation (in the example of #00AAFF we have as much blue as possible). A value of 0 means zero saturation (in the example of #00AAFF we have no red whatsoever). Everything in between represents varying degrees of color saturation and lightness. If you give red, green and blue the same value, you will get either black, white or any of the shades in between. So, #FFFFFF is white, #000000 is black and #CCCCCC is my favorite shade of grey. It takes some time and experimentation to learn all the nuances, but it’s beyond the scope of this article to go into all of the details. You can easily find hex values on the Web. An excellent resource is the W3Schools’ CSS color page.

Hexadecimal Meets the Color Wheel

The reason color-blind people can design for the Web is that we can know colors through their hexadecimal representation. Here are some basic colors and their hexadecimal representations:
Primary colors:
Red: #FF0000
Yellow: #FFFF00
Blue: #0000FF
Secondary colors:
Orange: #FFAA00
Green: #00FF00
Purple: #AA00AA
Tertiary colors:
Red-Orange: #FF4000
Red-Purple: #FF0080
Yellow-Orange: #FFC000
Yellow-Green: #80FF00
Blue-Green: #00FFFF
Blue-Purple: #8000FF

So What Looks Good?

In color theory there are several methods of developing a good color palette. Unfortunately, results can’t be guaranteed. A designer’s eye is required to determine if the colors are pleasing or not. Even for someone who sees colors well, these methods can be dangerous. Color-blind designers want to be sure that their colors work great. Let’s to stick with the tried, tested and true methods.

Monochromatic Colors

Monochromatic color schemes utilize multiple shades of a single color to create simple but effective color palettes. The two most important things to remember when using a monochromatic palette are that:
  1. This one color sure as hell better convey the right emotion, as you have no other colors to rely on!
  2. You still need to create contrast, particularly in content areas. If you use green, for example, and your background is a light green, don’t use another light green color for text. You have all the shades of green, plus black, white and all of the grays, at your disposal. There’s no reason to make the site hard on the eyes.
For example:
This text is a very dark green (#002200), on a light-green (#00FF00) background with a medium-green (#00AA00) border.

Complementary Colors

Complementary colors are the easiest to understand. Pick any color on the color wheel—its complementary color will be exactly opposite. For example:
  • Yellow (#FFFF00) complements Purple (#AA00AA);
  • Blue (#0000FF) complements Orange (#FFAA00); and
  • Red (#FF0000) complements Green (#00FF00).
These colors have high contrast (but note that complementary colors don’t work well for text against a background). It’s important to make sure you actually choose colors exactly opposite. Colors close by will clash to people who see colors normally.

Triadic Colors

When three colors are located on the color wheel with equal spacing between each other, they form a color triad. These colors are quite harmonious, and look nice together. However, you start to look like the color wheel, which Queer Eye has taught me is not a good thing. It’s hard to find a color triad that really conveys any particular emotion. Personally, I wouldn’t use a triad unless I was designing for a children’s Web site.

Berikut ini skema warna beserta asosiasinya:

Color Scheme Associations
Monochromatic bersih, elegan, menghanyutkan, menyatukan, harmonis, kesendirian, dapat dicampur dengan warna putih atau hitam murni (100%).
Complementary dramatic, intense, eye-catching, vibrant, can be jarring, colors can vibrate, typically bad for text
Analogous found in nature, harmonious, pleasing to the eye, versatile
Triadic strong visual, harmony, richness of color, can be vibrant, stability, balances, dynamic, can become garish
Split Complementary high contrast, less tension than complementary color schemes, hard to harmonize, good choice for beginners, difficult to mess up, variety, less vibrant and attention grabbing
Tetradic can be hard to harmonize, may look unbalanced, make for a rich color scheme, lots of variation, more varied than split complementary color schemes, less vibrant than split complementary color schemes

Berbagai Istilah Dalam Pewarnaan

Mari kita lihat penjabaran arti dari beberapa istilah yang berkaitan dengan warna. Istilah-istilah ini sering ditemukan dalam aplikasi pengolah grafis komputer dan kadang membingungkan dan tumpang tindih satu sama lain serta hampir tidak ada bedanya (walau tetap ada) bagi pemakai awam. Semua istilah saya terjemahkan bebas dari The Merriam-Webster Dictionary.

Hue

The attribute of colors that permits them to be classed as red, yellow, green, blue, or any intermediate between any contiguous pair of these colors.

Saturation

A chromatic purity; freedom from dilution with white.

Brightness

The attribute of light-source colors by which emitted light is ordered continuously from light to dark in correlation with its intensity.

Tint

A variation of color produced by adding white to it and characterized by low saturation with relatively high lightness.

Tone

The color quality or value; a tint or shade of color; the color that appreciably modifies a hue or white or black.

Shade

A color produced by a pigment or dye mixture having some black in it.

Chroma

A quality of color combining hue and saturation.

Agar lebih jelasnya, penerapan dari beberapa istilah di atas dapat dilihat pada contoh gambar berikut ini:

ps-color-picker

Sumber artikel: InstantShift, Tutorial9


Newer news items:
Older news items:

Comments  

 
0 #1 acunk 2012-03-27 11:57
bisa gak kalau jangan banyak pake b.inggris .. cz kadang gak ngrti..hhe
Quote
 

Add comment


Security code
Refresh

Artikel Design Grafis

Artikel Terkini

Animasi Gerak
14 April 2012
Berikut ini saya posting animasi bergerak (pasti bergerak dong, namanya juga animasi) yang sudah disimpan dalam format GIF. Ayo lariiii.. Sumber : Google+

Komentar Artikel

Arsip Artikel

Powered by mod LCA

/sok bijak...

Good design is all about making other designers feel like idiots because that idea wasn’t theirs.

Other Side

/flickr

/my facebook

As seen on Facebook
Create Your Badge

/tweet feed

/google+