Generator Palet Warna

Skema harmoni

– Komplementer: kombinasi warna dasar dan warna yang berlawanan pada roda warna (180°). Kontras tinggi, tampak hidup dan menarik. sangat cocok digunakan untuk tombol seruan tindakan yang dipasang di latar warna merek. – Analogous: 3–5 nuansa warna yang berjarak maksimal 30° satu sama lain; cenderung tenang dan harmonis, umumnya memiliki nuansa hangat atau dingin; sangat cocok digunakan sebagai latar belakang atau ilustrasi dengan tema keluarga yang seragam.

• Triadik: Tiga warna yang terletak pada jarak sama (120°). Terlihat hidup dan seimbang. Umum digunakan dalam produk anak-anak serta merek-merek bergaya kuat.
• Split-complement: kombinasi warna dasar dengan dua nuansa yang berada di kedua sisi warna komplementer (150° dan 210°). Lebih kaya warnanya dibandingkan warna komplementer, namun terasa lebih lembut atau tidak terlalu kontras.
• Tetradik/square: 4 nuansa pada sudut 90°. Sulit untuk menyeimbangkan; pilih salah satunya sebagai nuansa dominan.
• Monokromatik: satu warna saja dengan variasi saturasi dan kecerahan yang berbeda-beda. Tampilan yang elegan dan serasi; tidak memiliki sentuhan menonjol kecuali dipadukan dengan warna netral.

Struktur palet untuk penggunaan nyata

Sistem desain umumnya memerlukan:

• Primer (merek dasar)
• Sekunder (mendukung merek)
• Aksen (CTA, penyorotan)
• Skala netral (latar belakang, teks, dan batas — 5–10 tingkat abu-abu)
• Semantik (sukses, peringatan, kesalahan, informasi)
• Surface (latar belakang panel, tumpukan visual)

Palet harmoni menyediakan warna primer, sekunder, dan warna aksen. Warna netral serta warna semantik umumnya mengikuti konvensi yang berbeda—seperti warna abu-abu terdesaturasi atau nuansa semantik yang telah distandarisasi.

Format Ekspor

Properti kustom CSS:

:root {
  --brand-primary: #2E86AB;
  --brand-secondary: #A23B72;
  --brand-accent: #F18F01;
  --brand-neutral: #C73E1D;
}

Konfigurasi Tailwind:

theme: {
  extend: {
    colors: {
      brand: {
        primary: '#2E86AB',
        secondary: '#A23B72',
        accent: '#F18F01',
      }
    }
  }
}

SCSS:

$brand-primary: #2E86AB;
$brand-secondary: #A23B72;

Kontras dan aksesibilitas

Skema harmoni tidak menjamin aksesibilitas. Periksa kombinasi palet sesuai dengan persyaratan kontras WCAG:

• Rasio teks tubuh terhadap latar belakang minimal 4,5:1 (AA). – Teks besar: 3:1. – Non-teks (tombol, ikon, cincin fokus): rasio 3:1

Pasangkan generator dengan alat pemeriksa kontras untuk menemukan kombinasi yang sesuai.

Tips

– Mulailah dengan warna dasar yang telah ditentukan, bukan sembarangan; kombinasi warna akan terasa lebih bermakna ketika warna dasarnya memiliki arti tertentu (merek Anda, foto favorit Anda, atau referensi budaya).

• Uji palet warna dalam penggunaan nyata: pada tombol, di atas teks, atau dalam grafik. Tampilan yang baik pada sampel warna tidak menjamin kinerja yang optimal dalam antarmuka pengguna (UI).
• Turunkan tingkat saturasi sedikit untuk palet yang digunakan pada permukaan besar; latar belakang dengan saturasi penuh dapat menyebabkan rasa lelah mata.
• Hindari penggunaan warna aksen secara berlebihan: jika 80% komponen antarmuka pengguna terdiri dari elemen utama dan sekunder, gunakan warna aksen hanya pada 10% titik interaksi (CTA) untuk memaksimalkan daya tarik visualnya.