Apa itu Pencari Warna Komplementer?

Complementary Color Finder menghitung warna berlawanan pada roda warna untuk nilai input apa pun. Alat ini juga menampilkan harmoni analogus, triadik, dan split-komplementer agar Anda bisa menyusun palet yang padu.

Mesinnya pakai matematika HSL dari chroma-js, memutar roda warna pada sudut tetap untuk menghasilkan enam skema harmoni: komplementer (180°), analog (±30°), triadik (120° dan 240°), split-komplementer (150° dan 210°), tetradik/persegi (90°, 180°, 270°), dan monokromatik (variasi lebih terang dan lebih gelap dari warna dasar). Tiap swatch menampilkan nilai HEX, RGB, dan HSL sekaligus, dan menyalin salah satu format hanya dengan satu klik, siap ditempel ke Figma, config Tailwind, atau langsung ke aturan CSS.

Cara menggunakan

1. Langkah 1 — Masukkan warna dasar dalam format HEX (#FF6600) atau RGB (255 102 0), atau pilih dengan pemilih warna.
2. Langkah 2 — Lihat warna komplementer (berlawanan 180° pada roda warna) beserta kode warnanya secara instan.
3. Langkah 3 — Jelajahi harmoni tambahan (analogus, triadik, split-komplementer) dan salin nilai swatch mana pun.

Kapan menggunakan

• Menyusun palet brand di sekitar warna primer yang sudah ada, tanpa buka Adobe Color.
• Memilih warna tombol CTA yang menonjol di atas latar halaman.
• Memilih warna seri grafik supaya tetap kebaca saat ditaruh berdampingan.

Hasil

Seorang desainer brand memasukkan oranye primer #FF8C00 dan mendapatkan biru komplementer #0073FF, ditambah nada hangat analogus #FF4400 dan #FFB800 untuk palet yang kohesif.

FAQ

Apa beda komplementer dengan split-komplementer?

Komplementer adalah warna yang langsung berseberangan di roda warna (180°). Split-komplementer mengambil dua warna yang mengapit warna seberang itu (150° dan 210°). Versi split terasa kurang tegang dan biasanya lebih gampang dipakai di seluruh UI tanpa tabrakan.

Apakah harmoninya tetap berguna untuk warna dasar yang sangat gelap atau pucat?

Harmoni berbasis hue (komplementer, analog, triadik, split-komplementer, tetradik) hanya memutar hue, jadi saturasi dan kecerahan tetap sama: dasar pucat menghasilkan pasangan pucat dan dasar gelap menghasilkan pasangan gelap. Monokromatik memang sengaja memvariasikan kecerahan di sekitar hue Anda. Kalau pasangan berbasis hue terlihat pudar, naikkan saturasi warna dasar lalu generate lagi.

Memakai roda warna seniman (RYB) atau roda warna layar (RGB)?

Roda warna layar. Lawan dari merah (#FF0000) di sini adalah sian (#00FFFF), bukan hijau seperti teori cat minyak. Untuk pekerjaan digital model ini yang benar; untuk pencampuran cat fisik akan terasa janggal.

Kenapa beberapa warna dasar menghasilkan komplementer yang mirip dengan dasarnya?

Abu-abu murni punya hue yang tidak terdefinisi, jadi rotasi berputar di tempat dan mengembalikan abu yang sama. Tambahkan saturasi 5% saja ke warna dasar dan komplementernya akan melompat seperti seharusnya.

Bisa ekspor seluruh palet sekaligus?

Bisa, dengan empat cara. «Unduh Palet» menyimpan tiap swatch beserta HEX-nya ke file teks polos. «Unduh CSS» mengekspor palet sebagai CSS custom properties siap pakai (contohnya --color-complementary-1: #0099FF;). «Konfig Tailwind» membuat objek warna siap tempel untuk tailwind.config.js. «Gambar PNG» menyimpan seluruh palet sebagai gambar berlabel yang pas untuk tinjauan desain.

Alat terkait