Color palette adalah kumpulan warna yang dirancang sebagai satu sistem visual. Palet yang efektif menetapkan warna untuk latar, teks, permukaan, aksi, dan status serta memastikan kontrasnya cukup untuk keterbacaan.
Warna yang bagus bukan sekadar hiasan. Satu kombinasi dapat membuat tombol lebih mudah ditemukan, teks lebih nyaman dibaca, dan sebuah merek langsung terasa profesional.
Infografik yang Anda lihat memuat 15 jenis color palette, dari netral hingga light & airy. Artikel ini membahas warna-warna tersebut dari level pemula sampai teknis, termasuk cara menerapkannya ke UI, CSS, identitas merek, dan desain yang aksesibel.
Apa itu color palette?
Color palette adalah sekumpulan warna yang dipilih untuk bekerja sebagai satu sistem visual. Setiap warna sebaiknya memiliki peran, misalnya latar, teks, permukaan, garis, warna utama, atau aksen.
Palet yang baik dapat menarik perhatian, membangun suasana, meningkatkan keterbacaan, memperkuat identitas merek, dan membuat desain terasa konsisten. Sebaliknya, terlalu banyak warna tanpa hierarki akan membuat pengguna kesulitan memahami elemen yang penting.
Dasar teknis: hue, saturation, dan lightness
Hue adalah keluarga warna, seperti merah, hijau, atau biru. Saturation menunjukkan seberapa pekat warna tersebut, sedangkan lightness menunjukkan tingkat terang dan gelapnya.
Perbedaan lightness biasanya paling menentukan keterbacaan. Dua warna dapat memiliki hue berbeda, tetapi tetap sulit dibedakan jika tingkat luminansinya terlalu dekat.
Kode hex seperti #3B82F6 merepresentasikan kanal merah, hijau, dan biru dalam format #RRGGBB. Nilai 3B, 82, dan F6 adalah angka heksadesimal dengan rentang desimal 0–255.
01. Neutral Palette
Palet netral terasa bersih, abadi, dan fleksibel. Warna ini cocok untuk web, UI, desain minimal, serta komunikasi korporat.
#FFFFFF— putih untuk latar utama.#E3E7EB— abu-abu terang untuk permukaan atau pemisah.#9CA3AF— abu-abu sedang untuk teks sekunder.#475569— slate gelap untuk label atau navigasi.#111827— hampir hitam untuk teks utama.
Palet netral bagus sebagai fondasi. Tambahkan satu warna aksen untuk tombol utama, tautan, atau status aktif.
02. Earthy Palette
Earthy palette meniru warna tanah, pasir, kayu, dan tumbuhan. Kesan yang muncul adalah alami, hangat, tenang, dan dapat dipercaya.
#F7F3E3— krem pucat.#D6B273— pasir hangat.#A66F33— cokelat tanah.#6B8E23— hijau zaitun.#2E6A4F— hijau hutan.
Gunakan untuk merek lingkungan, wellness, rumah, makanan alami, atau produk organik. Hindari memakai cokelat sedang sebagai teks kecil di atas krem sebelum rasio kontras diperiksa.
03. Pastel Palette
Palet pastel memakai saturasi lembut dan lightness tinggi. Hasilnya terasa segar, ramah, ringan, dan modern.
#FADADD— merah muda pastel.#CDE8FF— biru muda.#D3F9E3— mint lembut.#FFE7B3— peach-krem.#E6D6FF— lavender.
Palet ini cocok untuk pendidikan, kecantikan, lifestyle, dan media sosial. Karena semua warnanya terang, pasangkan dengan teks gelap seperti #111827, bukan teks putih.
04. Vibrant Palette
Palet vibrant memakai warna yang terang dan tersaturasi. Tujuannya adalah menciptakan energi dan menarik perhatian dengan cepat.
#FF4B4B— merah koral terang.#FFA720— jingga cerah.#00D4AA— turquoise terang.#1E82F6— biru elektrik.#6A1CF6— ungu kuat.
Gunakan untuk pemasaran, teknologi, gaming, atau thumbnail video. Jangan menjadikan kelima warna sebagai aksen dengan bobot yang sama; pilih satu warna dominan dan gunakan sisanya secara terbatas.
05. Moody Palette
Moody palette menonjolkan warna gelap dan desaturasi. Kesan yang dihasilkan adalah premium, sinematik, serius, dan dramatis.
#0B0B0B— hitam pekat.#0F172A— navy hampir hitam.#334155— slate gelap.#64748B— slate sedang.#94A3B8— biru-abu terang.
Cocok untuk fashion, teknologi, editorial, dan produk premium. Sisakan satu warna terang untuk CTA agar hierarki tidak tenggelam.
06. Monochrome Palette
Palet monokrom memakai satu hue dengan tingkat terang berbeda. Pendekatan ini mudah dikendalikan dan menghasilkan desain yang konsisten.
#1D4ED8— biru paling gelap.#3B82F6— biru utama.#60A5FA— biru menengah.#93C5FD— biru muda.#DBEAFE— biru sangat pucat.
Dalam UI, gunakan warna tergelap untuk teks atau state aktif, warna utama untuk tombol, dan warna paling terang untuk latar. Status error dan success tetap sebaiknya memiliki indikator tambahan seperti ikon atau label.
07. Complementary Palette
Warna komplementer berada saling berlawanan pada roda warna. Hubungan ini menciptakan kontras dan daya tarik visual yang kuat.
#FF4B4B— merah koral.#0EA5E9— cyan-biru.#FACC15— kuning.#3348F1— biru-violet.#EC4899— magenta.
Palet ini sesuai untuk poster, iklan, branding kreatif, dan kampanye. Agar tidak melelahkan mata, gunakan satu warna sebagai dominan dan pasang warna lawannya hanya sebagai aksen.
08. Analogous Palette
Analogous palette memakai warna yang berdekatan pada roda warna. Transisinya terasa alami, harmonis, dan lebih tenang daripada skema komplementer.
#10B981— hijau emerald.#34D399— hijau mint.#60A5FA— biru muda.#818CF8— indigo muda.#A78BFA— violet lembut.
Gunakan untuk wellness, lifestyle, alam, dan merek yang ingin terasa tenang. Perbedaan hue tidak otomatis menjamin kontras teks, jadi lightness tetap harus diperiksa.
09. Triadic Palette
Skema triadik menggunakan tiga kelompok hue dengan jarak relatif merata pada roda warna. Hasilnya berani, tetapi dapat tetap seimbang jika saturasi dan proporsinya dikontrol.
#F97316— jingga.#0EA5E9— biru langit.#A855F7— ungu.#FACC15— kuning.#22C55E— hijau.
Palet triadik cocok untuk desain kreatif, muda, dan menyenangkan. Terapkan aturan proporsi seperti 60% warna dasar, 30% warna pendukung, dan 10% aksen.
10. Split-Complementary Palette
Skema split-complementary memakai satu warna utama dan dua warna di sekitar komplemennya. Kontrasnya tetap hidup, tetapi biasanya lebih mudah diseimbangkan daripada pasangan komplementer murni.
#EF4444— merah.#F59E0B— amber.#10B981— emerald.#3B82F6— biru.#6366F1— indigo.
Gunakan untuk ilustrasi, konten media sosial, atau identitas produk. Tentukan lebih dahulu warna utama agar desain tidak terasa seperti kumpulan status yang saling bersaing.
11. Tetradic Palette
Tetradic palette dibangun dari dua pasangan warna komplementer. Pilihannya kaya dan fleksibel, tetapi membutuhkan kontrol hierarki yang lebih ketat.
#7C3AED— ungu.#06B6D4— cyan.#F59E0B— amber.#EF4444— merah.#22C55E— hijau.
Cocok untuk branding, produk, dan desain kreatif dengan banyak kategori. Jangan memakai semua warna pada saturasi penuh di area yang sama.
12. Warm Palette
Palet hangat didominasi jingga, kuning, peach, dan krem. Warna ini terasa energik, mengundang, akrab, dan cocok untuk mendorong tindakan.
#F97316— jingga kuat.#F9732C— jingga-koral.#FBBF24— amber cerah.#FDE68A— kuning lembut.#FEF3C7— krem hangat.
Gunakan pada makanan, fashion, lifestyle, atau CTA. Teks gelap biasanya lebih aman di atas kuning dan krem terang.
13. Cool Palette
Palet dingin menampilkan biru, cyan, teal, hijau segar, dan periwinkle. Kesan yang muncul adalah tenang, bersih, profesional, dan modern.
#0EA5E9— biru langit.#06B6D4— cyan.#14B8A6— teal.#A3E635— hijau lime.#C7D2FE— periwinkle pucat.
Cocok untuk teknologi, kesehatan, pendidikan, dan korporasi. Lime dapat dipakai sebagai aksen status atau CTA, sedangkan biru dan teal membentuk fondasi yang lebih stabil.
14. Dark Palette
Dark palette memakai rentang hampir hitam hingga slate. Karakternya tegas, dramatis, canggih, dan menghasilkan fokus visual kuat.
#0F172A— navy sangat gelap.#111827— hitam kebiruan.#1E293B— navy gelap.#334155— slate gelap.#475569— slate menengah.
Gunakan untuk teknologi, gaming, produk mewah, dan portofolio. Untuk teks utama, pilih putih atau abu-abu sangat terang dan hindari teks abu-abu sedang pada ukuran kecil.
15. Light & Airy Palette
Palet light & airy menggunakan warna yang sangat terang. Ia memberi kesan lapang, segar, minimal, dan lembut.
#F0F8FF— biru-putih.#CCE7FF— biru pastel.#CCFFF4— mint sangat terang.#FFF3C0— krem-kuning.#FFE4EA— blush pucat.
Cocok untuk kesehatan, kecantikan, lifestyle, dan tampilan modern. Gunakan warna gelap untuk teks karena kombinasi sesama warna terang tidak cukup jelas.
Cara memilih palet untuk sebuah produk
Mulailah dari tujuan emosional: apakah produk harus terasa aman, energik, premium, ramah, atau tenang? Setelah itu, pilih satu palet sebagai fondasi dan tetapkan peran setiap warna.
- Pilih dua atau tiga warna utama dan satu aksen.
- Tentukan warna latar, permukaan, teks, garis, primary action, dan status.
- Uji tampilan pada layar terang, gelap, dan perangkat seluler.
- Periksa kontras, buta warna, hover, focus, disabled, error, dan success.
- Simpan warna sebagai design token, bukan menulis nilai hex berulang kali.
Kontras dan aksesibilitas
Menurut WCAG 2.2, teks normal memerlukan rasio kontras minimal 4.5:1. Teks besar memerlukan minimal 3:1, dengan pengecualian tertentu untuk dekorasi dan logo.
Contohnya, #111827#FFFFFF menghasilkan rasio sekitar 17.74:1. #FACC15#111827 sekitar 11.58:1, sedangkan teks putih di atas #00D4AA hanya sekitar 1.91:1 dan tidak layak untuk teks normal.
Rasio dihitung dari luminansi relatif dua warna. Jangan menilai aksesibilitas hanya dari nama warna atau penampilan visual; gunakan pengukur kontras dan jangan membulatkan nilai yang berada di bawah ambang.
Menerapkan color palette sebagai CSS design token
Design token membuat fungsi warna lebih penting daripada nama visualnya. Dengan pendekatan ini, perubahan tema cukup dilakukan di satu tempat.
:root {
--color-background: #FFFFFF;
--color-surface: #E3E7EB;
--color-text: #111827;
--color-text-muted: #475569;
--color-primary: #3B82F6;
--color-primary-soft: #DBEAFE;
--color-accent: #FACC15;
--color-danger: #EF4444;
--color-success: #22C55E;
}Hindari token bernama --blue atau --red untuk kebutuhan produk. Nama semantik seperti --color-primary dan --color-danger lebih mudah dipakai ulang saat warna merek berubah.
Membangun scale warna untuk UI tingkat lanjut
Satu warna utama belum cukup untuk sebuah antarmuka. Anda membutuhkan scale untuk hover, pressed, border, background lembut, teks, dan dark mode.
Scale sebaiknya tidak dibuat hanya dengan menambah putih atau hitam secara linear dalam RGB. Gunakan ruang warna perseptual seperti OKLCH agar perubahan lightness terasa lebih konsisten, lalu lakukan gamut mapping untuk memastikan warnanya dapat ditampilkan di sRGB.
Di level sistem, simpan token dasar, token semantik, dan token komponen secara terpisah. Misalnya, blue-600 menjadi color-action-primary, lalu dipakai oleh button-primary-background.
Kesalahan yang sering terjadi
- Memakai lima warna dengan intensitas sama sehingga tidak ada fokus.
- Mengandalkan hue saja untuk menyampaikan status.
- Menggunakan teks putih di atas warna terang tanpa mengukur kontras.
- Menganggap palet pastel otomatis ramah pengguna.
- Menentukan warna langsung di setiap komponen tanpa design token.
- Tidak menguji dark mode, hover, focus, disabled, dan layar ponsel.
Kesimpulan
Color palette yang efektif bukan sekadar kombinasi warna yang terlihat indah. Ia adalah sistem yang mengatur suasana, hierarki, keterbacaan, identitas, dan respons pengguna.
Gunakan 15 palet dari infografik ini sebagai titik awal, lalu tentukan peran warna, ukur kontras, dan ubah hasilnya menjadi design token. Kunjungi BelajarCerdas.com untuk mempelajari desain dan teknologi secara praktis—bangun fondasi yang benar, uji keputusan Anda, dan hasilkan desain yang lebih kuat.
Sumber dan catatan
- Infografik Color Palette yang dilampirkan pengguna.
- W3C WAI — Understanding WCAG 2.2 Contrast Minimum.
Kode hex pada kartu beresolusi kecil dibaca dari swatch dan label pada gambar. Nilai Dark Palette direkonstruksi dari warna swatch yang terlihat karena label pada bagian tersebut kurang tajam; editor disarankan membandingkannya kembali dengan file sumber beresolusi tinggi bila tersedia.
