Generator Harmoni Warna

Dari satu warna dasar menjadi 7 skema warna: putar di roda warna, lalu terapkan pada tampilan

Pembuat harmoni warna menyusun skema warna dari satu warna dasar yang sudah Anda tentukan, dengan memilih warna-warna yang berjarak sudut tertentu pada roda warna. Tujuh skema ditampilkan berdampingan dalam satu layar: komplementer, analog, triadik, komplementer terbagi, persegi, persegi panjang, dan monokromatik. Anda dapat membandingkan skema mana yang paling mendekati kesan yang diinginkan tanpa membukanya satu per satu.

Setelah warna dipilih, masih ada pertanyaan tentang cara membagi pemakaiannya. Karena itu, alat ini juga menampilkan contoh tampilan dengan latar luas 60%, kartu 30%, dan tombol 10%, serta menunjukkan lewat rasio kontras apakah teks putih atau teks hitam yang terbaca di atas setiap warna.

Kapan alat ini dipakai

• Saat satu warna sudah ditentukan: Jika ada warna yang tidak boleh diubah, seperti warna logo perusahaan atau warna sekolah, memilih warna lainnya justru menjadi sulit. Aturan skema warna mempersempit kandidat melalui sudut pada roda warna, sehingga Anda memperoleh titik awal tanpa tersesat di antara begitu banyak warna.
• Saat hanya satu tempat yang ingin ditonjolkan: Untuk satu baris kesimpulan pada slide presentasi atau tombol pendaftaran pada poster, warna komplementer yang berseberangan dengan warna dasar, atau komplementer terbagi di kiri-kanannya, cocok dipakai sebagai warna aksen.
• Saat dibutuhkan beberapa warna yang saling terbedakan: Untuk seri pada grafik atau kategori pada jadwal, skema triadik dan persegi yang sudut rona warnanya berjarak 120° atau 90° mengurangi risiko warna tertukar. Namun, jika kategori dibedakan hanya dengan warna, orang dengan penglihatan warna berbeda sulit membedakannya, sehingga tambahkan juga teks atau pola.
• Saat Anda perlu menjelaskan mengapa dua warna serasi: Kepada klien atau tim, Anda dapat menyampaikan alasan seperti "kedua warna ini berseberangan pada roda warna sehingga kontrasnya kuat". Cukup masukkan warna yang Anda miliki sebagai warna dasar, lalu lihat di sudut berapa warna lainnya berada.

Cara memakai

1. Masukkan warna dasar. Pilih kotak "Pilih warna", atau ketik salah satu dari HEX (#E07A5F), rgb(224 122 95), atau hsl(13 68% 63%) di kolom teks. Menggeser titik pada roda warna juga mengubah sudut rona warna dasar.
2. Bandingkan garis-garis warna pada 7 skema warna sekilas, lalu pilih skema yang Anda sukai. Contoh warna di atas dan titik pada roda warna akan beralih ke skema tersebut.
3. Tentukan suasana keseluruhan dengan batang saturasi dan kecerahan. Kedua nilai ini berlaku untuk semua warna dalam skema, sehingga hubungan sudut antarwarna tetap terjaga, sementara hasilnya dapat dibuat pucat seperti pastel atau gelap dan tenang.
4. Pada Terapkan dengan 60·30·10, tekan "Ganti warna utama" untuk menentukan warna mana yang menempati latar luas. Periksa warna teks yang dipasang di atas setiap warna beserta kontrasnya pada daftar di sebelah kanan.
5. Bawa hasilnya. Menekan contoh warna menyalin HEX warna itu, dan tombol di bawahnya menyediakan daftar HEX, variabel CSS, gambar PNG, serta tautan. Dua belas warna dasar terbaru hanya disimpan di peramban ini.

7 skema warna dan sudutnya

Alat ini hanya memutar sudut rona (H) dari nilai HSL warna dasar sesuai aturan, sedangkan saturasi (S) dan kecerahan (L) dibiarkan. Hanya skema monokromatik yang sebaliknya: sudut rona tetap dan kecerahan diubah per 20. Tabel berikut adalah hasil nyata dengan warna dasar #E07A5F (hsl 13° 68% 63%).

Pada skema monokromatik, jika kecerahan dasar melebihi 75%, tidak ada ruang untuk membuat warna yang lebih terang, sehingga dibuat dua tingkat hanya ke sisi gelap (−40 dan −20). Jika kecerahan di bawah 25%, dibuat dua tingkat hanya ke sisi terang (+20 dan +40). Ini ketentuan agar warna yang sama tidak muncul dua kali di dekat putih atau hitam, seperti pada versi lama.

Mengapa warna komplementer berbeda antarsitus: roda warna tidak hanya satu

Dengan merah yang sama, sebagian alat menyebut warna kebiruan sebagai komplementernya, sedangkan buku tertentu menyebut hijau. Tidak ada yang salah; yang berbeda adalah roda warna yang dijadikan acuan. Materi pendidikan seni National Gallery of Art (NGA) Amerika Serikat memperkenalkan secara terpisah tiga warna primer cat (merah, kuning, biru) dan tiga warna primer cahaya yang dipakai layar televisi dan komputer (merah, hijau, biru). Pada roda warna cat, contoh komplementernya adalah merah dengan hijau, kuning dengan ungu, serta biru dengan oranye.

Alat ini memakai roda warna layar karena hasilnya dibawa sebagai HEX dan CSS untuk dipakai di layar. W3C CSS Color 4 mendefinisikan sudut rona hsl() sebagai 0° merah, 120° hijau, dan 240° biru, dan sudut pada alat ini mengikuti definisi tersebut. Sistem warna Munsell menempatkan lima rona utama, yaitu merah (R), kuning (Y), hijau (G), biru (B), dan ungu (P), beserta lima rona antara YR, GY, BG, PB, dan RP secara merata dalam satu lingkaran. Jika lingkaran digambar menurut urutan itu, BG berada di seberang R. Jika warna yang Anda pilih akan dipindahkan ke cat atau cetakan, ingat bahwa hasilnya bisa berbeda dari komplementer pada roda warna pelukis.

Angka kecerahan yang sama tidak berarti terang yang sama di mata

Kecerahan (L) HSL yang sama tidak terlihat sama terang oleh mata manusia. Jika teks putih diletakkan di atas kuning #FFFF00 dan biru #0000FF yang kecerahannya sama-sama 50%, lalu kontras WCAG-nya diukur, hasilnya sangat berbeda.

Karena itu, pada skema yang hanya memutar sudut rona, tingkat terang terasa berbeda pada tiap warna, dan kontras antarwarna dalam skema sering rendah. Pada contoh bawaan, komplementer terbagi (#E07A5F, #5FE0BB, #5F85E0), kontras antarwarnanya adalah 1,8:1, 1,2:1, dan 2,1:1, semuanya di bawah 3:1. Sebaliknya, jika teks hitam diletakkan di atas ketiga warna itu, kontrasnya masing-masing 7,1:1, 12,8:1, dan 5,9:1, yang cukup untuk dibaca. Daripada menumpuk warna dalam skema sebagai teks dan latar, lebih aman mewarnai latar dengan warna skema dan membiarkan teks berwarna putih atau hitam.

Terapkan dengan 60·30·10

Meskipun semua warna sudah dipilih, mewarnai dengan luas yang sama cenderung membuat tampilan terasa ramai. Aturan 60·30·10 yang banyak dipakai dalam desain interior menyarankan 60% warna utama pada bidang terluas, 30% warna pendukung berikutnya, dan 10% warna aksen pada titik-titik kecil. Contoh tampilan pada alat ini digambar dengan luas latar (utama), kartu (pendukung), dan tombol pada pita bawah (aksen) tepat 60·30·10.

• Skema 2 warna dibagi menjadi latar 70% dan kartu 30%, tanpa pita aksen.
• Skema 4 warna mewarnai pita kecil di bagian bawah kartu dengan warna keempat, sehingga pembagiannya menjadi 60·25·10·5.
• Proporsi untuk 2 dan 4 warna adalah ketentuan alat ini, dan aturan 60·30·10 sendiri hanya titik awal, bukan angka yang wajib dipatuhi.

Menekan "Ganti warna utama" hanya memutar peran yang dipegang tiap warna satu langkah. Meski ketiga warnanya sama, kesan tampilan sangat berubah tergantung warna mana yang menempati latar, jadi sebaiknya tekan beberapa kali dan bandingkan sebelum memutuskan.

Saat meletakkan teks di atas skema warna

Daftar di sebelah kanan memilih teks putih atau teks hitam yang kontrasnya lebih besar di atas setiap warna, lalu menilainya menurut standar WCAG 2.2. Rasio kontras ditampilkan setelah dipotong menjadi satu desimal, sehingga 4,48:1 tidak dibulatkan menjadi 4,5:1 agar dinyatakan lulus.

• Layak untuk teks isi: 4,5:1 atau lebih (1.4.3 Kontras minimum).
• Hanya teks besar: 3:1 atau lebih, tetapi kurang dari 4,5:1. Dapat dipakai untuk judul besar, tetapi tidak cukup untuk teks isi.
• Tidak cukup: kurang dari 3:1.
• Tombol dan latar: Elemen yang dioperasikan seperti tombol harus berkontras 3:1 atau lebih terhadap warna di sebelahnya agar bentuknya terbedakan (1.4.11 Kontras non-teks). Jika kurang, tambahkan garis tepi atau garis bawah.

Meskipun kontrasnya cukup, makna tidak boleh dibedakan hanya dengan warna. WCAG 1.4.1 meminta agar warna tidak menjadi satu-satunya sarana penyampaian informasi, sehingga saat membedakan, misalnya, merah untuk galat dan hijau untuk normal, sertakan juga teks atau ikon.

Kesalahan yang sering terjadi

• Memasukkan putih, hitam, atau abu-abu sebagai warna dasar: Warna akromatik tidak memiliki sudut rona, sehingga aturan apa pun yang dipilih menghasilkan warna yang sama. Untuk abu-abu, naikkan batang saturasi; untuk putih atau hitam, geser juga batang kecerahan menjauhi 100% atau 0%. Skema monokromatik, yang hanya mengubah kecerahan, juga bisa dipakai.
• Membagi 4 warna dengan luas yang sama: Skema persegi dan persegi panjang memiliki banyak warna. Jika tidak ditetapkan satu warna utama dan sisanya dipakai kecil, pandangan tidak memiliki tempat untuk berhenti.
• Memakai warna komplementer sebagai teks dan latar: Meski kontras rona kuat, jika kecerahannya mirip, teks tampak kabur dan rasio kontrasnya rendah. Biarkan teks berwarna putih atau hitam.
• Menganggap galat karena berbeda dari komplementer di situs lain: Roda warna layar dan roda warna pelukis memiliki warna seberang yang berbeda. Periksa dahulu roda warna mana yang dipakai.
• Menyerahkan HEX layar apa adanya ke percetakan: Cetak menghasilkan warna dengan tinta CMYK, sehingga warna layar yang cerah belum tentu muncul sama. Lihat dahulu perkiraan warna cetaknya dengan konverter RGB ke CMYK.

Batasan dan perhatian

• Aturan skema warna hanya menentukan hubungan sudut rona. Keserasian tidak dijamin, jadi ambil keputusan akhir pada tampilan yang benar-benar akan dipakai.
• Karena saturasi dan kecerahan dibiarkan sama dengan warna dasar, tingkat terang yang tampak berbeda pada tiap warna, dan kontras antarwarna bisa rendah.
• Skema monokromatik hanya mengubah kecerahan HSL dan membiarkan saturasi. Pada tingkat yang sangat terang atau sangat gelap, warna bisa tampak lebih kusam atau lebih pekat dari aslinya.
• HEX yang sama tampak berbeda menurut pengaturan monitor, kecerahan layar, mode gelap, dan pencahayaan sekitar.
• Penilaian kontras hanya melihat rasio WCAG 2.2. Ukuran dan ketebalan teks yang sebenarnya serta perbedaan penglihatan warna tidak diperhitungkan. Untuk melihat bagaimana skema tampak bagi penglihatan warna tertentu, lihat juga simulasi pada Tes Buta Warna.

Tanggal acuan Spesifikasi CSS, WCAG, dan materi pendidikan seni diperiksa pada 20 Oktober 2026. HEX dan rasio kontras pada tabel adalah nilai yang dihitung langsung dengan aturan perhitungan alat ini.

Sumber

• 01W3C: CSS Color Module Level 4 — HSLSudut rona hsl(): 0deg merah, 120deg hijau, 240deg biru
• 02W3C: WCAG 2.21.4.1 Penggunaan warna, 1.4.3 kontras 4,5:1 (teks besar 3:1), 1.4.11 kontras non-teks 3:1
• 03National Gallery of Art: The Elements of Art – ColorWarna primer cat: merah, kuning, biru; warna primer cahaya layar: merah, hijau, biru; contoh komplementer: merah–hijau, kuning–ungu, biru–oranye
• 04Adobe Express: The color wheel explainedRoda warna RYB untuk pelukis dan cat, roda warna RGB untuk layar (28 Mei 2026)
• 05ScanHue: Complementary vs Analogous vs Triadic: Color Harmony BasicsSkema warna sebagai sudut roda HSL: komplementer 180°, analog ±30°, triadik 120°, komplementer terbagi 150° dan 210°, serta perbedaannya dengan roda RYB pelukis (15 Juli 2026)
• 06NIST: Hue (H) — Munsell color systemRona utama R·Y·G·B·P dan rona antara YR·GY·BG·PB·RP (ASTM E1732)
• 07BEHR: The 60-30-10 RulePedoman skema warna yang banyak dipakai dalam desain interior: 60% warna utama, 30% pendukung, 10% aksen (20 Mei 2025)
• 08ScanHue: The 60-30-10 Rule: Balance Any Color PaletteMenerapkan 60-30-10 pada layar (latar, kartu, tombol); aksen 10% tetap harus memenuhi kontras WCAG (29 Juli 2026)

Pertanyaan yang sering diajukan

Alat yang dipakai bersama