Softonic

Pencari Warna Komplementer

Langkah 1 / 3

Masukkan warna dasar

Mendukung #RGB, #RRGGBB, rgb() bilangan bulat, dan hsl() berbentuk persentase. Perhitungan tetap di browser; warna masuk ke URL yang dikirim pada setiap permintaan halaman.

Warna komplementer berada pada posisi berseberangan di roda warna digital. Masukkan nilai HEX, RGB, atau HSL yang ditulis secara ketat untuk menghitung komplemen HSL, warna komplementer terpisah, warna tetradik, serta rasio kontras WCAG yang tepat. Semua perhitungan berlangsung secara lokal di browser.

Cara menghitung komplement

  1. 1

    Pilih warna apa pun

    Gunakan #RGB, #RRGGBB, rgb() berisi bilangan bulat, atau hsl() berisi persentase. Seluruh nilai divalidasi sebelum dihitung.

  2. 2

    Putar warna sebesar 180°

    Komplement HSL: tambahkan 180° pada nilai warna, sambil mempertahankan saturasi dan kecerahan tetap sama.

  3. 3

    Split-complement diturunkan

    Dua warna pada sudut 150° dan 210° dari posisi dasar, alternatif yang lebih lembut dibandingkan komplementer langsung ketika kontras terlalu tinggi.

  4. 4

    Tanda-tanda aksesibilitas muncul

    Rasio kontras pasangan tersebut terhadap warna putih dan hitam, serta peringatan jika pasangan tersebut berpotensi tidak memenuhi standar WCAG AA saat digunakan sebagai latar depan (fg)/latar belakang (bg).

Contoh-contoh

Warna dasar Hex Komplement (HSL) Hex
Merah murni #FF0000 Sian #00FFFF
Koral #FF7F50 Biru kehijauan aqua #50D0FF
Hijau Hutan #228B22 Ungu #8B228B
Biru Kerajaan #4169E1 Oranye Emas #E1B941
Lavender #E6E6FA Kuning pucat #FAFAE6

Nilai HEX, RGB, dan HSL yang ditampilkan menggambarkan warna sRGB yang sama. Salin hasil untuk dipakai dalam CSS atau alat desain lain.

Komplemen HSL versus komplemen RYB

  • HSL (layar): merah ↔ sian, hijau ↔ magenta, biru ↔ kuning. Ini adalah geometri sudut HSL turunan sRGB yang dipakai CSS, bukan simulasi pencampuran cahaya.
  • RYB (seniman): merah ↔ hijau, biru ↔ oranye, kuning ↔ ungu. Ini adalah kaidah pengajaran tradisional, bukan prediksi pencampuran pigmen tertentu.

Alat ini hanya menggunakan model HSL digital. Konversi ke roda cat RYB tidak disediakan karena komplemen pigmen bergantung pada bahan dan cara pencampurannya.

Di mana komplementer bekerja dengan baik

  • Tombol CTA yang ditampilkan di latar belakang merek. Pasangkan elemen utama dengan komplementernya agar tombol tersebut tampak menonjol.
  • Grafik seri ganda untuk visualisasi data (keuntungan vs kerugian, sebelum vs setelah).
  • Bayangan ilustrasi: bayangan labu oranye terlihat lebih meyakinkan saat berwarna biru dibandingkan saat berwarna oranye tua.
  • Merek olahraga: banyak tim menggunakan palet warna komplementer atau split-complement (biru/oranye, merah/hijau, kuning/ungu).

Di mana mereka gagal

  • Teks utama pada latar belakang: kombinasi warna yang kontras tinggi (merah di atas hijau, biru di atas oranye) sulit dibaca dan dapat menyebabkan kelelahan visual akibat aberasi kromatik yang besar.
  • Penggunaan menyeluruh: Layar dengan komposisi warna 50% merah dan 50% hijau akan memberikan kesan yang terlalu dominan; gunakan kombinasi warna lain sebagai aksen (sekitar 5–10% dari luas permukaan), bukan sebagai latar utama.
  • Kohesi merek: komplemen terasa ramai. Sebagian besar merek modern menggunakan warna monokromatik atau kombinasi warna serupa ditambah satu warna aksen, bukan dua warna yang saling melengkapi.

Split-complement

Komplemen terpisah (basis + 150° + 210°) sering kali menjadi pilihan yang lebih praktis:

  • Menjaga kontras yang tinggi dibandingkan dengan wilayah komplementer.
  • Menghindari getaran komplement langsung.
  • Menyediakan dua aksen untuk desain bertingkat.

Contoh: basis = biru → komplement = oranye (tajam) → komplement terpisah = merah-oranye + kuning-oranye (lebih kaya warna).

Komplemen yang didesaturasi

Komplemen murni jarang terlihat baik saat memiliki saturasi penuh. Kurangi saturasi sebesar 20–40% pada salah satu atau kedua komponen tersebut untuk mendapatkan palet yang lebih tenang.

  • Merah (S=100%) + Sian (S=100%) = bergetar.
  • Merah (S=60%) + Sian (S=60%) = palet poster klasik.
  • Warna batu bata (S=45%) + Warna biru kehijauan berdebu (S=30%) = tampilan modern dan fungsional.

Periksa kewajaran sebelum digunakan

  • Rasio kontras pasangan: informasi ini dilaporkan oleh alat pencari. Nilai di bawah 4,5:1 tidak memenuhi standar AA untuk teks.
  • Uji pada latar belakang netral: tampilan komplementer tampak berbeda ketika dibandingkan dengan warna putih, abu-abu, atau hitam.
  • Uji cetak jika tujuannya adalah hal tersebut; CMYK dapat mengubah hubungan saturasi dan komplementer dibandingkan dengan RGB.

Pertanyaan yang Sering Diajukan

Keduanya menyusun rona dengan kaidah berbeda. HSL memakai sudut numerik turunan sRGB, sedangkan roda RYB tradisional menempatkan warna primer seniman pada lingkaran konseptual. Keduanya tidak meramalkan hasil pencampuran cahaya atau cat fisik.

Ya, keduanya bersifat sinonim dalam teori warna. Istilah “berlawanan pada roda warna” dan “komplementer” merujuk pada hubungan yang sama.

Hampir tidak pernah terjadi. Komplement langsung umumnya tidak memenuhi persyaratan kontras menurut WCAG ketika digunakan sebagai latar depan/latar belakang karena tingkat kecerahannya yang serupa. Perbesar perbedaan kecerahan (teks gelap di atas latar belakang terang) agar memenuhi standar tersebut.

Ya, panel hasil mencakup komplement langsung, komplement terbagi (dengan dua warna di kedua sisinya), dan kombinasi tetradik empat warna. Pilihlah yang sesuai dengan tujuan desain Anda.

Alat Terkait

Penghitung FPS

Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.

Konverter Base64 ke Hex

Konversi string Base64 menjadi byte dasarnya yang dinyatakan dalam heksadesimal (hex). Berguna untuk memeriksa token, kunci, sertifikat, dan JWT.

Konverter Biner ke Oktal

Konversi biner ke oktal dengan mengelompokkan bit tiga per tiga. Berguna untuk izin Unix, sistem lama, dan tampilan angka ringkas.

Konverter Biner ke ASCII

Tempel data biner (bita dipisah spasi atau aliran bit panjang) dan dapatkan teks ASCII yang diwakilinya. Mendukung pengodean 7-bit dan 8-bit.

Generator Warna Acak

Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.

Penyederhana Aljabar Boolean

Sederhanakan ekspresi Boolean memakai Karnaugh map dan algoritma Quine-McCluskey. Menampilkan setiap langkah minimisation dan bentuk SOP/POS akhir.