warna dalam web desain

8/20/2019 Warna Dalam Web Desain

1/17

Warna Dalam Web Desain

A. Pengertian Warna

Warna adalah estetika yang penting karena melalui warna dapat membedakan secara

jelas keindahan suatu objek. Warna dapat didefinisikan secara subjektif/psikologis yang

merupakan pemahaman langsung oleh pengalaman indera penglihatan kita dan secara

objektif/fisik sebagai sifat cahaya yang dipancarkan.

Secara objektif/fisik warna diproyeksikan dari panjang gelombang (wave length), dan

panjang gelombang warna yang masih bisa ditangkap mata manusia berkisar 3!"#!

nanometer. $ahaya yang tampak oleh mata merupakan salah satu bentuk pancaran energi

sempit dari gelombang elektromagnetik.

%ntuk pemahaman teori warna secara psikis, pada konsep ini warna lebih berperandalam suatu arti atau makna. Warna tidak hanya untuk keindahan estetika, warna bisa

mewakili mood atau suasana. &isalnya merah menggambarkan keadaan psikis yang

berhubungan dengan semangat dan memiliki pengaruh pada produkti'itas, kompetisi dan

keberanian. emampuan warna menciptakan impresi, mampu menimbulkan efek"efek

tertentu. Secara psikologis diuraikan oleh J. Linschoten dan rs. &ansyur tentang warna

sbb* warna"warna itu bukanlah suatu gejala yang hanya dapat diamati saja, warna itu

mempengaruhi kelakuan, memegang peranan penting dalam penilaian estetis dan turut

menentukan suka tidaknya kita akan bermacam"macam benda. ari pemahaman diatas

dapat diambil kesimpulan bahwa warna, selain dapat dilihat dengan mata ternyata mampu

mempengaruhi prilaku seseorang, mempengaruhi penilaian estetis dan turut menentukan

suka tidaknya seseorang pada suatu benda atau objek yang dilihatnya.

&akna dari masing"masing warna*

1. &akna Warna &erah

&erah adalah warna dari api dan darah, maka merah sering dihubungkan dengan energi,

perang, bahaya, kekuatan, tekat yang kuat, hasrat, dan cinta. &akna warna merah adalah

warna yang mempunyai unsur emosional yang kuat.2. &akna Warna uning

uning adalah warna dari matahari terbit. Sering dihubungkan dengan keceriaan,

kebahagiaan, orang pandai, dan energi. uning menghasilkan efek hangat,

Warna Dalam Web Desain 1


2/17

membangkitkan kegembiraan, merangsang aktifitas mental, dan membangkitkan energi.

+unakan warna kuning untuk menimbulkan rasa senang, dan bahagia.

3. &akna Warna ranye / -ingga

Warna jingga adalah kombinasi energi dari warna merah dan kegembiraan dari warna

kuning. Warna ini sering dihubungkan dengan kegembiraan, matahari terbit, dan musim

tropis. Warna jingga melambangkan rasa antusias, daya tarik, kegembiraan, kreatifitas,

kebulatan tekad, perhatian, sukses, dorongan, dan perangsang. alam ilmu

kelambangan, warna jingga merupakan simbol kekuatan dan daya tahan.

4. &akna Warna iru

iru adalah warna langit dan lautan. Warna ini sering dihubungkan dengan kedalaman

dan stabilitas. iru melambangkan kepercayaan, kesetiaan, kebijaksanaan, kepercayaan

diri, kecerdasan, kepercayaan, kebenaran, dan surga. alam ilmu kelambangan, warna

biru digunakan untuk melambangkan kesalehan dan ketulusan hati. Warna biru adalah

warna maskulin. erdasarkan penelitian, warna biru adalah warna yang paling diterima

oleh para lelaki. indari penggunaan warna biru ketika mempromosikan makanan dan

masakan, karena warna biru akan mengurangi rasa napsu makan.

5. &akna Warna ijau

ijau adalah warna alam. Warna ini melambangkan pertumbuhan, harmoni, kesegaran,

dan kesuburan. ijau secara emosional dapat berarti keamanan. Warna hijau tua sering

dihubungkan dengan uang.

6. &akna Warna %ngu

Warna ungu menggabungkan stabilitas dari warna biru dan energi dari warna merah.

7. &akna Warna itam

Warna hitam melambangkan kekuatan, elegan, formalitas/acara resmi, kejahatan, dan

misteri. itam adalah warna misterius yang dihubungkan dengan ketakutan dan

ketidaktahuan.

8. &akna Warna 0utih

Warna putih sering dihubungkan dengan terang, kebaikan, kemurnian, kesucian, dan

keperawanan. Warna ini disarankan sebagai warna 1kesempurnaan2. alam dunia



3/17

periklanan, puith sering dihubungkan dengan kesejukan dan kebersihan sebab putih

merupakan warna salju.

B. Warna Dalam Web Desain

Warna web adalah warna"warna yang digunakan dalam perancangan halaman"

halaman web, dan juga cara mendeskripsikan dan melakukan spesifikasi dari warna"warna

tersebut. Seorang penulis halaman web memiliki banyak kebebasan dalam memilih warna

yang akan digunakan bagi elemen"elemen dokumen webnya. Warna"warna yang dimaksud

dapat dispesifikasikan menggunakan triplet + dalam format heksadesimal (disebut juga

sebagai triplet heksadesimal). Triplet + terdiri dari enam buah karakter heksadesimal

yang tiap dua"dua karakter masing"masing menyatakan entitas dari Red (merah), Green

(hijau) dan Blue (biru). 4ilai"nilai yang dapat diisikan untuk tiap"tiap entitas + ini adalah

dari !! sampai 55. 6tau dalam angka desimal ! sampai 788.

WarnaTriplet

Heksadesimal

Heksadesimal Desimal

R G B R G B

9!!!!!! !! !! !! ! ! !9555555 55 55 55 788 788 788

9!!!!55 !! !! 55 ! ! 788

9!!55!! !! 55 !! ! 788 !955!!!! 55 !! !! 788 ! !

95!555 5! 5 55 7:! 7: 788

958;3 58 ; 3 7:8 777


4/17

dapat dibentuk dari pencampuran warna"warna lain. etiga warna primer akan

menghasilkan warna hitam jika digabungkan.

2. Warna Sekunder adalah warna yang dihasilkan dari penggabungan 7 warna primer.

Warna sekunder terdiri dari orange, hijau, dan ungu ('iolet).

3. Warna >ersier yaitu warna yang dihasilkan dari penggabungan warna primer yang

berdekatan dengan warna sekunder dalam colour wheel. Warna tersier terdiri dari ?

warna, diantaranya merah jingga, kuning jingga, kuning kehijauan, hijau kebiruan, biru

keunguan, dan ungu kemerahan.

+ambar


5/17

merupakan warna yang baik untuk situs bertema seni dan hiburan. range

bukanlah pilihan berani tetapi sesuatu yang nyaman, yang menyampaikan energitanpa resiko seperti merah.

Dni mudah ditangkap oleh mata dan dapat digunakan di situs ritel untuk menarik

perhatian dalam menawarkan penjualan.

uning uning menyampaikan keceriaan, optimisme dan kehangatan, ini baik untuk situs anak"anak. uning adalah warna muda dan kecerahannya menunjukan

semangat dan orang tua memiliki lebih banyak kesulitan dengan warna ini.

rang"orang muda yang belum tumbuh menjadi sinis atau masih idealis,

berhubungan lebih banyak dengan warna ini.

$oklat Warna coklat menyampaikan rasa yang kokoh dan kedamaian. Dni berkaitandengan jujur, membumi, dan hal"hal yang masuk akal. al menarik bagi orang

tua ketimbang yang lebih muda dan cenderung digunakan secara halus di web,

sebagai nada latar belakang dan bukan untuk menyoroti atau untuk tombol. alini sering dipasangkan dengan hijau dan dapat memberikan rasa alami atau

produk buatan tangan sendiri (handmade).

ijau Warna ini menyampaikan kesadaran lingkungan, membumi dan menunjukan

keramahan. Dni dikenal untuk situs bertema lingkungan.

%ngu Secara historis, ungu telah menyampaikan rasa royalti. ini adalah karena

pewarna yang digunakan untuk pakaian ungu yang kreatif dan bahan lainnyacukup mahal dan hanya dapat di jangkau oleh orang yang sangat kaya.

Setelah memahami bagaimana warna dapat memancing emosi pengunjung maka akan lebih

mudah untuk memilih warna yang akan menarik bagi pengunjung untuk membuat

pengunjung betah untuk berada di website kita dan membuat klien kita untuk membeli,

melakukan transaksi atau menciptakan con'ersion.pada website yang kita bangun.

E. Metode Pemilihan Warna

alam dunia desain web, tidak akan pernah bisa lepas dari warna. Warna adalah

faktor penentu utama, apakah desain web yang telah kita lakukan memilki nilai keindahanatau karakteristik tersendiri. 0emilihan warna yang kurang tepat (sering kali terjadi pada

desainer pemula) dapat membunuh desain web yang sudah jadi walaupun web tersebut

dipenuhi berbagai macam tools yang sangat hebat. %ntuk mempermudah pemilihan warna,

kita dapat menggunakan roda warna yang ditemukan oleh Sir Isaac Newton . alam roda

warna tersebut, ada yang bernama warna primer atau warna dasar yang terdiri atas biru,



6/17

kuning dan merah. Warna"warna yang dihasilkan dari perpaduan warna primer ini disebut

warna sekunder atau tertier untuk perpaduan selanjutnya.

ila kita telah menentukan warna pokok dalam desain web yang akan dibuat, maka

selanjutnya kita harus mencari warna pelengkap yang bisa kita dapatkan dengan teknik

Complements, Triads, Tetrads, nalogous dan !onochromatic. Warna mono"romati"

memilki keunggulan sendiri dibanding yang lain karena kita akan terhindar dari kesalahan

pemilihan komposisi warna dan desain web kita akan terlihat lebih elegan dan rapi.

&etode pemilihan warna diantaranya adalah*

1. Warna akromatik

6dalah warna kombinasi gelap dan terang saja. 6sal kata 6kromatik adalah 1a2 yang

artinya tidak, dan $hromatic artinya warna. iasa disebut sebagai Gra#scale. -ika di

6dobe 0hotoshop dengan menggunakan perintah esaturate. ombinasi warna tersebut

berkesan klasik dan artistik, yang banyak dipakai untuk fotografi atau surat kabar.

2. Warna monokrom

6dalah satu warna ue (corak warna. Suatu istilah untuk menyatakan seluruh rangkaian

warna spektrum. ue adalah komponen yang menentukan warna apa yang digunakan)

yang dikombinasikan dengan gelap terang. isebut juga dengan istilah warna

monokrom. ombinasi warna ini sangat sederhana, tidak banyak resiko dan mudah

diterima mata. elemahannya kombinasi ini akan membosankan dan mudah

ditinggalkan.

3. Warna komplementer

6dalah 7 (dua) warna ue yang berlawanan, dikombinasikan dengan gelap terang.

isebut juga warna komplementer. ombinasi tersebut akan menarik mata (eye

catching), tapi jika anda tidak berhasil menggabungkan dua warna tersebut, maka akan

terlihat lepas atau tidak matching.

4. Warna pastel dan dark color

6dalah warna"warna yang mendekati warna terang atau putih. iasa disebut juga warna

Sepia. ebalikan dari pastel adalah warna"warna gelap disebut juga ark colors.

5. Warna analog

6dalah warna"warna beda hue yang bersebelahan, sehingga kombinasinya akan lebih

mudah diterima mata dan lebih berani dibanding warna monokrom.

6. Warna clash

6dalah 7 warna yang berlawanan (komplementer), tetapi menyimpang atau bergeser <

hue. Sesuai namanya 1clash2 adalah warna yang tidak harmonis atau bertentangan atau

tabrakan sehingga kombinasi warna tersebut tidak enak dipandang. >api dengan teknik

tertentu, akan didapat paduan warna yang ino'atif dan khas.



7/17

Tips Pemilihan Warna:

Sebelum memilih"milih warna anda harus mengetahui pembuatan warna. 6nda harus

dapat membedakan antara hue, lightness, saturation juga warna primer, komplementer,

monokrom dan psikologi warna.

a. &engetahui target atau audience yang akan menggunakan karya anda. 6pakah

audience anda anak balita, remaja, dewasa atau usia lanjut, Caki"laki atau

perempuan. Sehingga anda tinggal mencocokkan dengan warna dengan psikologi

yang diinginkan.

b. -ika anda telah memilih warna tertentu, bukan berarti warna lain tidak bisa dipakai.

Eang harus anda perhatikan jangan sampai warna lain tersebut mengalahkan

kekuatan warna yang anda pilih.

c. Sebelum mendesain, sebaiknya tentukan dahulu warna latar belakang. arena warna

background akan dilihat atau dirasakan pertama kali. Warna background disini bisa

berupa blok warna atau gambar monokrom.

d. euntungan background gelap yaitu dapat diberi efek cahaya atau flare. euntungan

background putih dapat diberi efek bayangan.

e. Sebelum memilih warna yang berbeda jenis atau hue, lebih mudah pilih warna

monokrom yang berbeda gelap terang (lightness) atau cerah pudar (tint) nya. >erlalu

banyak perbedaan warna hue, seperti warna pelangi, akan sulit mengaturnya,

dibanding 7 warna tapi dengan 'ariasi gelap terang (lightness).

f. >erlalu banyak warna hue dan lightness akan mengakibatkan kontras yang

berlebihan. anya sedikit batas antara kontras dan kacau (chaos)

g. >entukan atau batasi warna utama hanya 7 sampai 3 warna hue saja. itam dan putih

jangan dianggap sebagai warna karena fungsinya adalah sebagai cahaya (lightness).

h. esain menggunakan : warna bisa menguras waktu dan tenaga. esain

menggunakan 8 warna adalah terlalu sulit, akan memeras pikiran dan resiko

gagalnyapun tinggi. ayangkan saja anda mempunyai 8 pegawai dan 7 pegawai,

tentu akan lebih mudah mengatur sedikit pegawai, dengan banyak pegawai bisa"bisa

kantor anda tidak efiesien sehingga bisa menimbulkan demo unjuk rasa (chaos).

i. -ika anda belum berani bereksperimen dengan warna atau ingin belajar menahan

diri, gunakan warna akromatik atau grayscale. Dni akan menghindari dari masalah

clash atau chaos. -uga akan menghemat ongkos produksi lebih dari ?!F. 6nda bisa

lebih leluasa dengan kaidah desain yang lain seperti irama, fokus, kontinuitas,

keseimbangan dan lainnya.



8/17

j. 6lam adalah contoh yang baik untuk mendapatkan kombinasi warna yang harmonis.

Cihatlah pohon, daun, tanah dan langit di saat pagi hingga malam. arena terbiasa

dengan alam tersebut maka mata tidak akan mengatakan 1kacau2. Sehingga tidak ada

warna hue yang 1bertabrakan2 di alam.

k. Warna yang tidak biasa atau tidak natural seperti* cyan, magenta, ungu dapat dipakai

untuk 1mengejutkan2 audience. >etapi jika terlalu banyak kejutan, karya anda akan

kehilangan informasi yang ingin disampaikan.

l. 0ada software seperti $oreldraw dan 6dobe 0hotoshop, ada fasilitas untuk

mengambil warna dari gambar yaitu $olor 0icker 6, engan tool ini anda dapat

mengambil sample warna dari foto digital yang anda anggap baik. Sehingga desain

anda dapat mengikuti warna yang sudah dianggap baik tersebut.

m. &encampur warna dengan tool lend >ool di $oreldraw atau +radient >ool di

0hotoshop akan menghasilkan warna baru. engan menu ;dit : $opy 0roperties

5rom.. , anda dapat memilih warna pada salah satu warna di objek blend tersebut.

n. anyak sekali bahkan jutaan warna yang bisa anda pilih di dunia ini. leh karena itu

sering"seringlah menyimpan atau sa'e warna baru yang belum ada di palet warna

software grafis, sehingga koleksi warna anda semakin kaya.

o. ;GperimenH Warna di media elektronik dan cetak mempunyai masalah yang berbeda.

elum lagi teknologi komputer dengan digital printingnya yang mampu

menampilkan warna spotlight atau nyala, yang terdiri dari campuran warna

(bandingkan dengan $&E yang hanya : warna).

F. Penggunaan Color Wheel

Seorang esainer dituntut untuk selalu kreatif dan ino'atif dalam menggunakan

warna dalam penerapan desain. Warna sangat penting dalam menentukan suasana ruangan

khususnya untuk Dnterior esigner. Color $heel merupakan teori dasar warna yang

digambarkan dalam bentuk lingkaran (roda warna). %ntuk memilih kombinasi warna anda

dapat menggunakan alat bantu yang dinamakan color wheel. 0enggunaan color wheel ini

sangat membantu, ketika anda ingin memadukan warna yang dapat memuaskan mata anda

dan juga orang lain.



9/17

Berikut ini merupakan beberapa kombinasi arna !ang umum digunakan pada "olor

heel:

1. ombinasi Warna erdekatan %nalogous&



10/17

ombinasi ini adalah warna"warna yangterletak di kedua sisi dari warna tertentu.

Skema warna ini sering ditemukan di alam.

ombinasi warna ini adalah yang palingharmonis dari semua kombinasi warna.

0ilih satu warna dan ambil satu warna yang berdekatan dengan warna tersebut.

6tau jika memilih 3 warna, pilih satu warna

dan ambil dua warna yang berdekatan denganwarna tersebut.

engan cara ini anda bisa mendapatkan perpaduan 3 hingga ? warna sekaligus.

2. ombinasi Warna 0elengkap %Complementar#&

Warna"warna pelengkap adalah warna yang

secara langsung berhadapan atau bertolak belakang pada color wheel. ombinasi ini

memiliki tingkat kontras yang tinggi. leh

sebab itu, kombinasi ini bukan hanya mudahdibuat, tetapi kombinasi ini juga yang paling

menantang.

0ilih satu warna, kemudian ambil satu warna

yang berhadapan atau bertolak belakangdengan warna tersebut.



11/17

3. ombinasi Warna 0elengkap >erpisah %Split Complementar#&

ombinasi Warna 0elengkap >erpisahmerupakan 'ariasi dari kombinasi warna

pelengkap. ombinasi ini dapat membuat pakaian dengan kontras tingkat tinggi.

4amun tidak seekstrim kombinasi warna

pelengkap. al ini juga menghasilkanharmoni yang lebih besar daripada

penggunaan kombinasi warna pelengkap

secara langsung.

0ilih satu warna pelengkap dan dua warna berdekatan dengan salah satu warna

pelengkap yang dihilangkan. Sehingga

kombinasi warna ini menyerupai huruf E.

4. ombinasi Warna Triadic

ombinasi triadic adalah kombinasi tiga

warna berjarak sama pada color wheel.

etika dipadukan, kombinasi warna triadic

cenderung memiliki kesan semangat. ila6nda ingin pakaian warna"warni, namun

tetap seimbang. &enggunakan kombinasitriadic adalah cara yang tepat.

ombinasi warna >riadic ini memiliki jarak warna yang sama satu sama lain. 0ilih satu

warna, kemudian berikan jarak 3 warna

sebagai pemisah pada masing"masing warnatersebut. Sehingga akan terbentuk seperti

segitiga sama sisi.

#ariasi $ombinasi Warna %olor Wheel



12/17

Selain kombinasi warna di atas, ada juga beberapa cara lain. Eang merupakan 'ariasi dari

cara umum di atas. ombinasi warna ini dapat anda jadikan alternatif. >erutama jika anda

akan memadukan beberapa warna pada pakaian anda.

1. ombinasi Warna erdekatan >erpisah %Split nalogous&

ombinasi ini sama dengan kombinasiwarna berdekatan. anya saja kombinasi ini

menggunakan jarak satu warna untuk

memisahkan beberapa warna yang

dipadukan.

0ilih satu warna, berikan jarak satu warna,kemudian ambil satu warna yang berdekatan

dengan warna tersebut.

Cakukan hal yang sama untuk kombinasi 3warna yaitu dengan memberikan jarak

masing"masing satu warna.

1. ombinasi Warna berdekatan dan beraksen %ccented nalogous&

ombinasi warna ini sama seperti dengan

kombinasi warna berdekatan dengan 3

warna. emudian ditambahkan penekanan/aksen dengan menambahkan

warna pelengkap dari warna tengah.

0ilih satu warna, ambil 7 warna yang

berdekatan dengan warna tersebut,emudian tambah dengan warna pelengkapnya.

2. ombinasi Warna tetrad (ouble $omplementary)



13/17

ombinasi ini merupakan kombinasi warna pelengkap ganda.

0ilih kombinasi warna pelengkap yang

pertama. emudian tambahkan jarak satuwarna. Calu ambil kombinasi pelengkap

yang kedua. Sehingga pasangan kombinasitersebut terlihat seperti persegi panjang.

3. $ombinasi Warna Persegi (Square)

ombinasi warna ini memiliki fungsi yangsama dengan kombinasi warna triadic.

4amun perbedaannya pada jumlah warna

dan jarak pemisah yang dipakai.

0ilih satu warna, kemudian berikan jarak 7warna sebagai pemisah pada masing"masing

warna tersebut. Sehingga akan terbentuk

seperti persegi.

$ombinasi arna lain %olor Wheel

Selain kombinasi warna yang dijelaskan di atas, ada juga beberapa cara lain untuk

memadukan warna.

1. ombinasi satu warna %!onochromatic&



14/17

ombinasi warna yang mudah untuk dibuat,

tetapi juga sering terlihat tidak menarik.ombinasi warna ini hanya terdiri dari satu

warna. &engenakan pakaian yang seluruhnya

biru, merah muda, hijau, dll. al ini

bukanlah pemandangan yang sering 6ndalihat.

>etapi jika anda membuatnya dengan benar.6nda dapat terlihat sangat keren. $ara

terbaik untuk terlihat menarik dengan satu

warna adalah untuk mencampur berbagai

elemen bersama warna tertentu sepertisaturasi, rona, atau warna dan desain elemen

seperti tekstur atau struktur kain.

4amun, menyarankan agar tidak menggunakan skema monokromatik

sepenuhnya, karena ada resiko monoton.ami menyarankan 6nda untuk mengekspresikan gaya anda dengan

menggunakan beberapa warna.

2. ombinasi warna netral

ombinasi warna netral adalah kombinasi mirip dengan monochromatic. anya saja,

warna yang 6nda gunakan netral. &ulai dari hitam menjadi putih. erbagai nuansa abu"

abu disatukan dapat membuat tampilan yang sangat elegan. ombinasi warna ini efisien

pada pakaian. >etapi juga mudah terlihat membosankan.

icara tentang menggunakan hitam dan putih. itam dan putih bukan warna. alam

fashion mereka ditempatkan pada kategori netral. Seperti halnya krem, abu"abu, dll.

$oklat juga merupakan warna netral dalam fashion. alam fashion, perak dan emas juga

netral. Sehingga 6nda dapat memadukan mereka. &eskipun bukan sesuatu yang umum.

Sebenarnya, ami ingin menyarankan anda, agar tidak memakai kombinasi dari warna

netral saja. >etapi kami juga perlu mengatakan bahwa hitam dan putih adalah satu"

satunya kombinasi warna netral terbaik.

G. %olor Tool

&emilih atau membuat kombinasi warna untuk website sangatlah penting, namun

memilih kombinasi warna bukanlah pekerjaan yang gampang, banyak faktor yang harus

dipertimbangkan, misalnya ini website untuk anak"anak atau orang dewasa, website ceria

atau website bernuansa mistis, dan banyak pertimbangan"pertimbangan lain.



15/17

eberapa tools dalam pemilihan warna*

1. eG $olor >ool

Sebuah alat untuk meringankan dan menggelapkan nilai warna heG dengan persentase

yang ditetapkan.

2.

$olourco.de

colourco.de adalah alat desainer online, yang memungkinkan 6nda untuk dengan mudah

dan intuitif menggabungkan warna.

3. $olors

Sebuah palet warna yang lebih baik untuk website, koleksi dari beberapa skin css untuk

digunakan saat membuat prototipe



16/17

4. $olllor

6lat yang berguna untuk menghasilkan nuansa warna, nada dan nilai"nilai tints.

5. $ontrast

6plikasi ini memungkinkan pengguna untuk bereksperimen dengan kombinasi warna,

memeriksa mereka di bawah aspek pedoman aksesibilitas dan menciptakan palet warna

sesuai keinginan.



17/17

6. Sassme

Iisualisasi fungsi warna S6SS secara real"time tanpa kompilasi.

7. uler

6dobe uler adalah tool canggih untuk membuat palet warna dan melihat palet warna

yang dibuat oleh orang lain.

Dtulah beberapa tool yang bisa anda manfaatkan untuk membuat kombinasi warna untuk

menunjang pekerjaan mendesain.


warna dalam web desain

Documents