Softonic

Generator Warna Triadik

Langkah 1 / 2
Berikutnya

Palet triadik memakai tiga warna yang berjarak 120° satu sama lain di roda warna; merah, kuning, biru adalah contoh klasik dari bangku sekolah. Hasilnya seimbang dan penuh energi secara alami tanpa terasa kacau. Pilih warna dasar apa pun lewat pemilih warna: generator ini mengubahnya ke HSL, memutar hue tepat +120° dan +240° sambil mempertahankan saturasi dan kecerahan, lalu menampilkan tiga sampel warna beserta kode HEX-nya. Klik sampel mana pun untuk menyalin kodenya.

Cara palet dibangun

  1. 1

    Pilih warna dasar

    Gunakan pemilih warna untuk menentukan hue yang menjadi pusat palet.

  2. 2

    Dua pasangan dihitung

    Alat ini memutar hue sebesar +120° dan +240° di ruang HSL; saturasi dan kecerahan tetap sama supaya triadnya kohesif.

  3. 3

    Baca kode HEX

    Base, Triadic +120°, dan Triadic +240° tampil berdampingan, masing-masing berlabel nilai HEX enam digit.

  4. 4

    Klik untuk menyalin

    Sekali klik pada sampel mana pun menyalin kode HEX ke clipboard, siap ditempel ke CSS, config Tailwind, atau aplikasi desain Anda.

Mengapa palet triadik terasa seimbang

Tiga warna pada jarak yang sama di roda warna tidak berbagi lingkungan hue: kontrasnya kuat, sementara jarak 120° menghindarkan benturan frontal seperti pada komplementer langsung (berjarak 180°). Mata membacanya sebagai warna yang berbeda tetapi tetap harmonis.

Matematika di balik sampel warna

Generator mengubah warna HEX Anda ke HSL, menambahkan 120° dan 240° ke hue, lalu mengonversinya kembali. Karena hanya hue yang bergerak, ketiga warna selalu berbagi saturasi dan kecerahan yang sama. Efek menariknya: rotasi tepat 120° sama dengan memutar nilai kanal merah, hijau, dan biru, sehingga pasangan #6366F1 (warna default) adalah #F16366 dan #66F163, tiga pasang byte yang sama dalam urutan berbeda.

Contoh triad yang dihasilkan alat ini:

Dasar Triadic +120° Triadic +240°
#FF0000 (merah) #00FF00 #0000FF
#6366F1 (indigo) #F16366 #66F163
#E67E22 (oranye) #22E67E #7E22E6
#0EA5E9 (biru langit) #E90EA5 #A5E90E
#2ECC71 (hijau zamrud) #712ECC #CC712E

Memakai triad tanpa berlebihan

Tiga hue cerah pada saturasi penuh itu terlalu ramai. Praktik terbaiknya:

  • Satu dominan (60%) untuk UI utama.
  • Satu sekunder (30%) untuk aksen dan bagian halaman.
  • Satu aksen kuat (10%) untuk elemen interaktif kunci.

Tuas lainnya adalah memulai dari dasar yang redup: kedua pasangan mewarisi saturasinya, jadi dasar yang lembut menghasilkan triad yang lembut.

Triadik vs harmoni lain

Harmoni Struktur Kesan
Komplementer 2 warna, berjarak 180° Kontras tinggi, tegas
Analog 3 warna, berdekatan Tenang, kohesif
Triadik 3 warna, berjarak 120° Seimbang, energetik
Tetradik 4 warna, persegi panjang Kaya, lebih sulit seimbang
Split-komp. Dasar + 2 nyaris-komp. Kuat tanpa benturan

Tips untuk desain UI

  • Periksa kontras tiap pasangan. Palet triadik tidak menjamin kontras WCAG AA pada teks; verifikasi tiap kombinasi.
  • Pilih satu warna untuk call-to-action dan konsisten. Tombol yang berganti-ganti antar warna triad membingungkan pengguna.
  • Gunakan tint dan shade untuk memperluas palet tanpa menambah hue keempat.
  • Uji dalam mode gelap. Triad yang bagus di latar putih bisa kehilangan pembeda di latar gelap; sesuaikan kecerahannya.

Pertanyaan yang Sering Diajukan

Tiga pembagian setara dari roda warna 360° menempatkan jarak maksimum antar hue tanpa ada yang mendominasi. Jarak lebih kecil menghasilkan harmoni analog; jarak lebih besar merusak kesetaraan jarak dan biasanya berubah menjadi skema split-komplementer.

Ya, tetapi sering dengan pelembutan. Banyak merek memulai dari dasar triadik lalu menurunkan saturasi atau meredam dua dari tiga warnanya agar terasa lebih dewasa. Triad bersaturasi penuh terkesan ceria atau energetik, jadi sesuaikan dengan kepribadian merek.

Bisa. Generator mempertahankan saturasi dan kecerahan warna dasar Anda pada kedua pasangan, jadi dasar yang redup menghasilkan triad yang sama lembutnya. Ini strategi umum untuk desain profesional atau editorial.

Abu-abu murni memiliki saturasi nol, jadi tidak ada hue yang bisa diputar dan ketiga sampel keluar sama persis. Geser dasar ke hue mana pun dan ketiga sampel langsung terpisah.

Tidak perlu mendaftar dan tidak ada yang disimpan. Warna hanya dipakai untuk menghitung dan menampilkan palet, dan pada tampilan langkah demi langkah warna itu juga muncul di URL halaman, sehingga palet mudah di-bookmark atau dibagikan.

Alat Terkait

Pemilih Warna Material Design

Jelajahi palet warna Material Design. Salin nuansa mana pun (dari 50 hingga A700) dalam format HEX, RGB, atau HSL dengan sekali sentuh.

Generator Kertas Bergaris

Buat kertas bergaris siap cetak secara gratis. Pilih garis college, lebar, atau sempit, atur jarak antargaris dalam mm, ukuran kertas, dan garis margin, lalu cetak atau unduh SVG.

Pembuat Undangan

Buat undangan pernikahan, ulang tahun, akikah, atau acara kantor. Sesuaikan tulisan dan warna, lihat pratinjau langsung, lalu unduh PNG siap cetak ukuran 5R.

Inversi Warna Gambar

Balikkan setiap saluran RGB dalam sebuah gambar untuk menghasilkan gambar negatif, berguna untuk pengeditan kreatif dan melihat hasil pemindaian film.

Pemisah Grid Instagram

Bagi gambar lebar menjadi grid Instagram 3×3, atau berapa pun jumlah barisnya. Setiap potongan diberi nomor sehingga mudah diunggah secara terbalik.

Konverter ARW ke JPG

Konversi foto RAW Sony ARW ke JPG. Dapatkan JPEG yang mudah dibagikan dan kompatibel secara universal dari file RAW kamera Anda tanpa membuka Lightroom.

Alat ini tersedia dalam bahasa lain