Materi Ajar Desain — Sesi 2
Teori Warna, Kombinasi
& Color Palette
Panduan lengkap memahami warna dari akarnya — mulai dari roda warna, psikologi emosi, skema kombinasi harmonis, hingga cara membangun palet warna yang profesional. Dilengkapi rumus dan keyword untuk hafalan mudah.
Referensi: Itten (1961) · Albers (1963) · Eiseman (2006) · Samara (2007) · WCAG 2.1
Bagian 1
Teori Dasar Warna
Semua dimulai dari roda warna (color wheel) — sebuah sistem visual yang menggambarkan hubungan antar warna secara melingkar. Pertama kali dikembangkan Isaac Newton (1666), lalu disempurnakan oleh Johannes Itten dalam bukunya The Art of Color (1961).
Color Wheel MERAH ORANYE KUNING HIJAU BIRU-HIJAU BIRU UNGU 3 Kategori Warna Primer Merah · Kuning · Biru Sekunder Oranye · Hijau · Ungu Tersier 6 warna campuran Keyword: "MeKuBi" = M · K · B
Roda Warna (Color Wheel) — 12 warna
Roda warna adalah representasi sistematis 12 warna yang tersusun melingkar. Ini adalah alat utama setiap desainer untuk memilih dan mengkombinasikan warna secara harmonis dan ilmiah.
📐 Rumus Wajib #1 — Pencampuran Warna
P + P = S  ·  P + S = T
Primer + Primer = Sekunder   |   Primer + Sekunder = Tersier
Merah + Kuning = Oranye  ·  Kuning + Biru = Hijau  ·  Biru + Merah = Ungu
Merah Kuning Biru
Warna Primer (3)
Merah · Kuning · Biru. Tidak bisa dibuat dari campuran warna lain. Fondasi semua warna.
Keyword: MeKuBi
Oranye Hijau Ungu
Warna Sekunder (3)
Oranye (M+K) · Hijau (K+B) · Ungu (B+M). Hasil campuran dua warna primer.
Keyword: OHiUn
6 warna tersier
Warna Tersier (6)
6 warna dari campuran primer+sekunder yang berdampingan. Mis: Merah-Oranye, Biru-Hijau.

3 Sifat (Properties) Warna
📐 Rumus Wajib #2 — HSV
H = Warna Apa  ·  S = Sekuat Apa  ·  V = Segelap Apa
Hue (nama warna) · Saturation (intensitas/kejernihan) · Value (kecerahan/gelap-terang)
HUE = nama/identitas warna
HUE — "Warna Apa?"
Nama dan identitas warna — merah, biru, kuning, dst. Posisinya di roda warna.
100% 65% 35% 10%
SATURATION — "Sekuat Apa?"
Kemurnian/intensitas warna. Tinggi = vivid/cerah. Rendah = pudar/abu-abu.
Tint → Murni ← Shade
VALUE — "Segelap Apa?"
+Putih = Tint (terang) · +Hitam = Shade (gelap). Menentukan kontras.

Warna Hangat vs Warna Dingin
HANGAT Merah · Oranye · Kuning
Warna Hangat (Warm Colors)
Energi, semangat, gairah, kehangatan, kedekatan. Cocok: makanan, promo, olahraga, CTA button.
DINGIN Biru · Ungu · Hijau
Warna Dingin (Cool Colors)
Tenang, kepercayaan, profesional, jarak. Cocok: teknologi, keuangan, kesehatan, korporat.
🔑 Keyword Hafalan Cepat
Ha-Di  →  HANgat = Aksi · DIgin = Tenang
Hangat (Me-O-Ku) → Energi, Semangat, Panas  |  Dingin (Bi-Hi-Un) → Tenang, Percaya, Sejuk
Bagian 2
Psikologi Warna
Warna mempengaruhi emosi, perilaku, dan keputusan manusia secara ilmiah. Desainer profesional menggunakan psikologi warna untuk berkomunikasi tanpa kata-kata. Ini bukan kebetulan — ini strategi.
📐 Rumus Psikologi Warna
Warna = Emosi + Makna + Asosiasi Budaya
Setiap warna membawa 3 lapisan: apa yang kita rasakan, apa yang kita maknai, dan apa yang kita asosiasikan dari pengalaman sehari-hari.
MERAH
Red
Berani · Energi · Gairah
Makanan cepat saji, tombol CTA, promo, darurat
Coca-Cola · Netflix · YouTube
ORANYE
Orange
Ceria · Ramah · Kreatif
Startup, anak-anak, e-commerce, diskon
Amazon · Fanta · Shopee
KUNING
Yellow
Optimis · Perhatian · Cerah
Highlight, peringatan, brand muda & fun
McDonald's · Snapchat · IKEA
HIJAU
Green
Alami · Sehat · Segar
Kesehatan, alam, makanan organik, keuangan
Starbucks · Spotify · WhatsApp
BIRU
Blue
Percaya · Profesional · Tenang
Teknologi, korporat, bank, medis
Facebook · Samsung · PayPal
UNGU
Purple
Mewah · Misterius · Kreatif
Fashion mewah, kecantikan, spiritualitas
Cadbury · Hallmark · BTS
HITAM
Black
Elegan · Kuat · Premium
Fashion high-end, teknologi premium
Chanel · Apple · Nike
PUTIH
White
Bersih · Minimalis · Murni
Medis, minimalis, produk clean
Apple (produk) · Google · Tesla
🔑 Keyword Hafalan — "MAFIL-BU"
M=Aksi · A=Antusias · F=Flash · I=Imbang · L=Loyal · BU=Budaya Tinggi
Merah=Aksi · Oranye=Antusias · Kuning=Flash(Perhatian) · Hijau=Imbang/Sehat · Biru=Loyal(Percaya) · Ungu=Budaya Tinggi(Mewah)
Contoh Penggunaan Warna dalam Brand Nyata Netflix Merah Shopee Oranye PayPal Biru Spotify Hijau Cadbury Ungu Nike Hitam IKEA
Brand menggunakan psikologi warna secara sengaja
Tidak ada brand besar yang memilih warna secara sembarangan. Semuanya berdasarkan riset psikologi warna untuk mempengaruhi persepsi konsumen.
Bagian 3
Kombinasi & Harmoni Warna
Harmoni warna adalah kombinasi warna yang secara visual menyenangkan, seimbang, dan efektif. Ada 6 skema utama yang semua didasarkan pada posisi warna di roda warna.
📐 Rumus Utama Harmoni
Harmoni = Posisi yang Tepat di Color Wheel
6 Skema: Mono → Analog → Komplemen → Split → Triadik → Tetradik
Dari paling AMAN → paling BERANI. Pemula mulai dari Monokromatik atau Analogus.
1. Monokromatik (Monochromatic)
1 warna + variasi terang & gelap — paling aman, selalu harmonis
🔑 Keyword: SATU WARNA BEDA TERANG
1 titik di wheel variasi tint & shade
Hanya 1 posisi di roda warna
Biru monokromatik
Contoh: Biru
Paling elegan dan mudah. Cocok untuk desain minimalis, branding premium, UI yang bersih. Pilih satu warna lalu buat variasi terang-gelapnya. Tidak bisa salah!
2. Analogus (Analogous)
3–4 warna bersebelahan di roda warna — alami & harmonis
🔑 Keyword: TETANGGA DI RODA WARNA
3 titik berdampingan
Sunset Palette
Contoh: Sunset (Merah→Kuning)
Sangat harmonis, terinspirasi dari alam (matahari terbenam, dedaunan musim gugur). Cocok untuk ilustrasi, poster, landing page, dan desain yang terasa alami dan hangat.
3. Komplementer (Complementary)
2 warna berlawanan 180° — kontras paling kuat
🔑 Keyword: LAWAN TEPAT DI SEBERANG
180°
Tepat berlawanan 180°
Merah Hijau
Kontras maksimal
Kontras paling dramatis. Sangat menarik perhatian tapi bisa melelahkan mata jika berlebihan. Gunakan rasio 70:30 — satu warna dominan, satu sebagai aksen. Contoh klasik: Merah-Hijau (Natal), Biru-Oranye (poster film).
4. Split-Komplementer (Split-Complementary)
Versi aman dari komplementer — kontras tetap ada, lebih variatif
🔑 Keyword: LAWAN YANG DIGESER SEDIKIT
1 warna + 2 tetangga lawannya
Lebih variatif dari komplementer
Pilihan terbaik untuk pemula yang ingin mencoba kontras. Lebih fleksibel dan ramah. Gunakan warna utama sebagai dominan, dua warna split sebagai aksen dan pendukung.
5. Triadik (Triadic)
3 warna dengan jarak 120° — berani & hidup
🔑 Keyword: SEGITIGA DI RODA WARNA
Segitiga sama sisi (120°)
M · K · B = Primer
Merah · Kuning · Biru (primer)
Sangat energik dan berani. Warna primer (M-K-B) adalah contoh triadik terkuat. Cocok untuk desain anak-anak, event, poster, dan identitas brand yang playful. Gunakan satu warna dominan, dua sebagai aksen.
6. Tetradik / Square (Tetradic)
4 warna jarak 90° — paling kaya variasi, perlu perhatian ekstra
🔑 Keyword: KOTAK DI RODA WARNA
Kotak (4 × 90°)
4 warna seimbang
Paling kaya variasi. Susah dikendalikan — kuncinya: 1 warna dominan (60%), 1 sekunder (30%), 2 aksen (10%). Cocok untuk ilustrasi kompleks dan desain festive/perayaan.
Bagian 4
Color Palette
Color palette adalah kumpulan warna yang dipilih dan diorganisasikan untuk digunakan bersama dalam sebuah desain atau identitas visual. Palet yang baik menciptakan konsistensi, keterbacaan, dan kepribadian brand.
📐 Rumus Emas Palet — 60-30-10
60% Dominan + 30% Sekunder + 10% Aksen = Palet Sempurna
Diadopsi dari dunia desain interior. Selalu gunakan rasio ini dan palet terasa otomatis seimbang!
60% — Warna Dominan Background, body, area utama 30% Sekunder Card, sidebar 10% Aksen
Contoh penerapan 60-30-10
60% biru muda (bg) · 30% biru sedang (komponen) · 10% biru tua (tombol CTA, highlight). Hasilnya selalu terasa harmonis dan tidak berantakan.

Contoh Palet Warna Profesional
#0F172A
#1E40AF
#3B82F6
#BFDBFE
#F8FAFC
Tech Blue — Teknologi & SaaS
Skema: Monokromatik Biru · Cocok: App, Dashboard, Startup B2B
Dingin · Profesional
#14532D
#16A34A
#86EFAC
#CA8A04
#F7FEE7
Earth Green — Alam & Kesehatan
Skema: Analogus Hijau + Aksen Kuning · Cocok: Organik, Food, Wellness, Lingkungan
Alami · Segar
#1C1917
#44403C
#D4AF37
#F5F5F0
Luxury Black — Fashion & Premium
Skema: Netral + Aksen Emas · Cocok: Fashion High-end, Jewelry, Luxury Brand
Elegan · Mewah
#EC4899
#F97316
#FBBF24
#A78BFA
#FFF1F2
Playful Candy — Anak & Hiburan
Skema: Triadik + Analogus · Cocok: Edtech, Kids App, Event, Entertainment
Ceria · Energik
#0C4A6E
#0EA5E9
#BAE6FD
#ECFDF5
#F8FAFC
Calm Sky — Medis & Kesehatan Mental
Skema: Monokromatik Biru Langit · Cocok: Healthcare, Klinik, Meditasi, Wellness
Tenang · Aman
#7C3AED
#EC4899
#F97316
#FAFAFA
Vibrant Gradient — Kreatif & Startup
Skema: Split-Komplementer · Cocok: Agency Kreatif, Music App, Portfolio
Berani · Modern

5 Langkah Membangun Palet Warna
1 2 3 4 5 Tentukan Brand Mood Pilih Warna Primer Pilih Skema Harmoni Buat Tint & Shade Test di Desain Nyata
Proses membangun palet dari nol
1. Tentukan mood/kepribadian brand → 2. Pilih warna primer sesuai psikologi → 3. Pilih skema harmoni → 4. Buat variasi tint & shade → 5. Test dalam layout nyata
Bagian 5 — Rangkuman
Semua Rumus & Keyword
Ini dia semua yang perlu diingat — dikompres jadi singkat, padat, dan mudah hafal. Kalau bisa hafal semua ini, kamu sudah kuasai dasar teori warna!
📐 Rumus #1 — Pencampuran
P + P = S  ·  P + S = T
Primer+Primer=Sekunder · Primer+Sekunder=Tersier
Me+Ku=O · Ku+Bi=Hi · Bi+Me=Un
📐 Rumus #2 — Sifat Warna HSV
H = Warna Apa · S = Sekuat Apa · V = Segelap Apa
Hue=Identitas · Saturation=Intensitas · Value=Kecerahan
📐 Rumus #3 — Temperatur
Ha-Di: HANgat=Aksi · DIgin=Tenang
Hangat (Me·O·Ku) → Energi, Emosi, Semangat  |  Dingin (Bi·Hi·Un) → Tenang, Percaya, Profesional
📐 Rumus #4 — 6 Skema Harmoni (dari AMAN ke BERANI)
MAKSTE: Mono → Analog → Komplemen → Split → Triadik → tEtradik
Pemula: Monokromatik atau Analogus · Menengah: Split-Komplemen · Mahir: Triadik & Tetradik
📐 Rumus #5 — Proporsi Palet
60% Dominan + 30% Sekunder + 10% Aksen
Jangan pernah pakai semua warna sama banyak! Selalu ada yang dominan.
📐 Rumus #6 — Kontras Minimum (Aksesibilitas)
Teks di atas background = minimal rasio kontras 4.5 : 1
Standar WCAG 2.1. Hitam di putih = 21:1 (terbaik). Hindari abu muda di background putih.

Keyword Cepat Hafal
Warna Primer → "MeKuBi"
Me = Merah
Ku = Kuning
Bi = Biru
Warna Sekunder → "OHiUn"
O = Oranye
Hi = Hijau
Un = Ungu
Psikologi Warna → "MAFIL-BU"
M = Merah → Aksi
A = Oranye → Antusias
F = Kuning → Flash
I = Hijau → Imbang
L = Biru → Loyal
BU = Ungu → Budaya Tinggi
6 Skema Harmoni → "MAKSTE"
M = Monokromatik
A = Analogus
K = Komplementer
S = Split-Komplemen
T = Triadik
E = (t)Etradik

Tabel Ringkasan — 6 Skema Harmoni
Skema
Prinsip
Karakter
Cocok Untuk
Monokromatik
1 Hue, variasi V&S
Elegan · aman
Branding premium
Analogus
3–4 bersebelahan
Alami · harmonis
Ilustrasi · alam
Komplementer
2 berlawanan 180°
Kontras kuat
CTA · poster
Split-Komplemen
1 + 2 tetangga lawan
Kontras lembut
Pemula · UI app
Triadik
3 × jarak 120°
Berani · hidup
Anak · event
Tetradik
4 × jarak 90°
Kaya · kompleks
Ilustrasi kompleks
📚 Referensi:
• Itten, J. (1961). The Art of Color. Van Nostrand Reinhold.
• Albers, J. (1963). Interaction of Color. Yale University Press.
• Eiseman, L. (2006). Color: Messages and Meanings. Hand Books Press.
• Samara, T. (2007). Design Elements. Rockport Publishers.
• W3C WCAG 2.1 — Web Content Accessibility Guidelines.