Pick 1-2 brand colors, then build a complementary palette around them. Use a bold primary with neutral supporting colors.
60% dominant color (backgrounds), 30% secondary color (cards, sections), 10% accent color (buttons, links).
Ensure text-to-background contrast ratios meet WCAG AA (4.5:1 for normal text). Test with colorblindness simulators.
3-5 colors is optimal for most projects. Too many colors create visual noise. Use shades and tints of the same hue for variety.
Mulailah dengan nilai merek dan target audiens Anda. Gunakan psikologi warna sebagai panduan: biru menyampaikan kepercayaan dan profesionalisme, hijau menyarankan pertumbuhan dan alam, merah menandakan urgensi atau gairah, ungu mengimplikasikan kemewahan atau kreativitas. Batasi palet utama Anda pada 3-5 warna. Pastikan kontras yang cukup (rasio 4,5:1) untuk aksesibilitas.
Aturan 60-30-10 adalah prinsip desain untuk penggunaan warna yang seimbang: 60% warna dominan (latar belakang, area besar), 30% warna sekunder (kartu, sidebar, elemen UI), 10% warna aksen (tombol, sorotan, call-to-action). Ini menciptakan hierarki visual sambil mempertahankan harmoni. Warna netral sering membentuk basis 60% dalam desain UI modern.
WCAG 2.1 memerlukan rasio kontras minimum 4,5:1 untuk teks normal dan 3:1 untuk teks besar. Gunakan alat seperti WebAIM Contrast Checker atau DevTools browser untuk memverifikasi. Jangan hanya mengandalkan warna untuk menyampaikan informasi (gunakan juga ikon/teks), uji dengan simulator buta warna, dan pastikan elemen interaktif memiliki status fokus yang terlihat.
Untuk pengembangan web: kode hex (#RRGGBB) untuk CSS, nilai RGB/HSL untuk manipulasi dinamis, dan CSS custom properties untuk tema. Untuk alat desain: sebagian besar menerima kode hex; Figma dan Sketch mendukung perpustakaan warna. Untuk Tailwind CSS: tentukan warna di tailwind.config.js di bawah theme.extend.colors. Untuk branding: sertakan nilai Pantone (cetak), CMYK (cetak), dan RGB (layar).