Lompat ke konten
Aback Tools Logo

Pencari Warna Komplementer

Masukkan warna apa pun dalam format HEX, RGB, atau HSL dan langsung lihat keenam harmoni warna: komplementer, komplementer terbelah, analog, triadik, tetradik, dan monokromatik. Klik sampel mana pun untuk menyalin nilai HEX-nya, atau ekspor properti kustom CSS. Berjalan sepenuhnya di browser Anda, tanpa pendaftaran.

Find Complementary Colors

Enter any color in HEX, RGB, or HSL format to instantly see its complementary, split-complementary, analogous, triadic, tetradic, and monochromatic color harmonies. Click any swatch to copy its HEX value. All processing runs locally in your browser.

Accepts: #RGB, #RRGGBB, rgb(r,g,b), hsl(h,s%,l%)

#3C83F6
rgb(60, 131, 246)
hsl(217°, 91%, 60%)

Quick samples:

Complementary

The color directly opposite on the color wheel (180°). Creates maximum contrast and visual tension.

Base
#3C83F6
hsl(217, 91%, 60%)
Complement
#F6AF3C
hsl(37, 91%, 60%)
Split-Complementary

The two colors adjacent to the complement (150° and 210°). High contrast with more variety than complementary.

Base
#3C83F6
hsl(217, 91%, 60%)
Split 1
#F6523C
hsl(7, 91%, 60%)
Split 2
#E0F63C
hsl(67, 91%, 60%)
Analogous

Colors adjacent on the color wheel (±30° and ±60°). Creates harmonious, natural-looking palettes.

−60°
#3CF6AF
hsl(157, 91%, 60%)
−30°
#3CE0F6
hsl(187, 91%, 60%)
Base
#3C83F6
hsl(217, 91%, 60%)
+30°
#523CF6
hsl(247, 91%, 60%)
+60°
#AF3CF6
hsl(277, 91%, 60%)
Triadic

Three colors evenly spaced around the wheel (120° apart). Vibrant and balanced.

Base
#3C83F6
hsl(217, 91%, 60%)
Triad 2
#F63C83
hsl(337, 91%, 60%)
Triad 3
#83F63C
hsl(97, 91%, 60%)
Tetradic (Square)

Four colors evenly spaced (90° apart). Rich and complex - works best when one color dominates.

Base
#3C83F6
hsl(217, 91%, 60%)
Tetrad 2
#F63CE0
hsl(307, 91%, 60%)
Tetrad 3
#F6AF3C
hsl(37, 91%, 60%)
Tetrad 4
#3CF652
hsl(127, 91%, 60%)
Monochromatic

Variations of the same hue with different lightness and saturation. Elegant and cohesive.

Lightest
#E9F0FB
hsl(217, 71%, 95%)
Lighter
#BAD2F8
hsl(217, 81%, 85%)
Base
#3C83F6
hsl(217, 91%, 60%)
Darker
#004ECC
hsl(217, 100%, 40%)
Darkest
#003180
hsl(217, 100%, 25%)

Mengapa menggunakan pencari warna komplementer kami?

  • Pembuatan harmoni warna instan: pencari menghasilkan keenam harmoni warna secara waktu nyata saat Anda mengetik. Masukkan warna apa pun dan langsung lihat hasil komplementer, komplementer terbelah, analog, triadik, tetradik, dan monokromatik.
  • Pemrosesan aman dan privat: nilai warna Anda tidak pernah meninggalkan perangkat. Pencari berjalan sepenuhnya di browser Anda memakai matematika warna lokal, sehingga tidak ada data yang diunggah ke mana pun.
  • Enam aturan harmoni warna: dapatkan harmoni komplementer, komplementer terbelah, analog (±30°/±60°), triadik (120°), tetradik/persegi (90°), dan monokromatik - masing-masing dengan nilai HEX, RGB, dan HSL serta ekspor variabel CSS sekali klik.
  • 100% gratis selamanya: gunakan pencari ini tanpa pendaftaran, langganan, batas laju, atau paywall tersembunyi. Temukan harmoni untuk sebanyak apa pun warna, sepenuhnya gratis.

Apa itu pencari warna komplementer?

Pencari warna komplementer adalah alat yang menghitung hubungan warna berdasarkan posisi warna pada roda warna HSL. Setiap warna memiliki sejumlah pasangan harmonis - warna yang serasi karena hubungan sudutnya pada roda. Yang paling dikenal adalah warna komplementer, yang berada tepat 180° di seberang roda dan menciptakan kontras maksimum. Pencari ini menghitung enam jenis harmoni dari warna masukan apa pun dan menampilkan setiap sampel beserta nilai HEX, RGB, dan HSL - semuanya berjalan lokal di browser Anda tanpa panggilan server.

Cara kerja pencari warna komplementer kami

  1. Masukkan warna dasar Anda: ketik warna apa pun dalam format HEX (#RRGGBB), RGB (rgb(r,g,b)), atau HSL (hsl(h,s%,l%)), atau pakai pemilih warna untuk memilihnya secara visual.
  2. Lihat keenam harmoni seketika: pencari mengubah masukan Anda ke HSL, memutar hue sesuai sudut setiap jenis harmoni, dan langsung menampilkan semua sampel - tanpa menekan tombol.
  3. Salin warna dan variabel CSS: klik sampel mana pun untuk menyalin nilai HEX-nya, atau gunakan tombol CSS di setiap harmoni untuk menyalin blok properti kustom CSS yang siap dipakai.

Enam jenis harmoni warna

  • Komplementer: warna yang tepat berhadapan pada roda (180°). Menciptakan kontras maksimum - ideal untuk tombol ajakan bertindak dan elemen aksen.
  • Komplementer terbelah: dua warna yang bersebelahan dengan komplementernya (150° dan 210°). Kontras tinggi dengan lebih banyak variasi dan lebih sedikit ketegangan daripada komplementer murni.
  • Analog: warna yang bersebelahan pada roda (±30° dan ±60°). Menciptakan palet harmonis dan alami - umum di alam dan fotografi.
  • Triadik: tiga warna yang berjarak merata 120°. Cerah dan seimbang - cocok untuk desain yang playful dan energik.

Batasan penting

Perhitungan harmoni warna didasarkan pada model warna HSL, yang memutar hue sambil mempertahankan saturasi dan kecerahan. Harmoni monokromatik menyesuaikan kecerahan dan saturasi untuk menciptakan variasi nada. Semua perhitungan adalah perkiraan matematis - harmoni yang dipersepsikan juga bergantung pada konteks, warna di sekitarnya, dan kasus penggunaan tertentu. Selalu uji palet Anda di lingkungan desain sebenarnya sebelum menetapkannya.

Pertanyaan yang Sering Diajukan

Pencari warna komplementer menghitung hubungan warna berdasarkan posisi warna pada roda warna HSL. Alat ini menemukan variasi komplementer (180°), komplementer terbelah (150°/210°), analog (±30°/±60°), triadik (120°), tetradik (90°), dan monokromatik dari warna masukan apa pun.

Warna komplementer berada tepat di seberang pada roda warna - 180° dalam hue. Pasangan komplementer menciptakan kontras maksimum. Misalnya, komplementer dari biru adalah oranye.

Komplementer memakai satu warna yang tepat berhadapan (180°). Komplementer terbelah memakai dua warna yang bersebelahan dengan komplementernya (150° dan 210°), memberi kontras serupa dengan lebih banyak variasi.

Ya. Semua pemrosesan terjadi sepenuhnya di browser Anda. Nilai warna Anda tidak pernah meninggalkan perangkat.

Ya. Alat ini 100% gratis tanpa pendaftaran, langganan, dan batas penggunaan.

HEX (#RGB atau #RRGGBB), RGB (rgb(r,g,b)), dan HSL (hsl(h,s%,l%)). Anda juga dapat memakai pemilih warna bawaan.

Klik sampel mana pun untuk menyalin nilai HEX-nya. Gunakan tombol CSS di setiap harmoni untuk menyalin blok properti kustom CSS. Gunakan Salin Semua Nilai HEX untuk menyalin semuanya sekaligus.

Harmoni monokromatik memakai hue yang sama tetapi memvariasikan kecerahan dan saturasi untuk menciptakan rentang nada dari terang ke gelap - elegan dan kohesif untuk desain antarmuka.

Perhitungan harmoni didasarkan pada model HSL. Harmoni yang dipersepsikan juga bergantung pada konteks dan kalibrasi layar. Selalu uji palet Anda di lingkungan desain sebenarnya.