Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Skema Warna (Komplementer / Triadik / Analog)

Pengembang

IKLAN · MENGHAPUS?

MEMASUKKAN

Proses Otomatis

KELUARAN

Sisi klien

IKLAN · MENGHAPUS?

Memandu

Generator Skema Warna

Hasilkan palet warna harmonis menggunakan teori warna. Pilih warna dasar dan pilih tipe harmoni — komplementer, triadik, analog, split-komplementer, tetradik, atau monokromatik — untuk membuat palet yang seimbang secara instan. Contoh visual menampilkan nilai hex, RGB, dan HSL. Pemeriksaan kontras WCAG memastikan aksesibilitas. Ekspor sebagai properti kustom CSS, JSON, konfigurasi Tailwind, atau variabel SCSS.

Cara Penggunaan

Masukkan warna dasar menggunakan pemilih warna, input hex, slider RGB, atau nilai HSL — semua input tersinkronisasi secara otomatis. Pilih tipe harmoni untuk menghasilkan palet 3-6 warna berdasarkan matematika teori warna. Setiap warna ditampilkan sebagai contoh visual dengan nilai hex, RGB, dan HSL serta tombol salin. Periksa rasio kontras WCAG terhadap teks putih dan hitam. Ekspor seluruh palet dalam format pilihan Anda.

Fitur

6 Tipe Harmoni — Komplementer (180°), Triadik (120°), Analogous (30°), Split-Complementary (150°/210°), Tetradic/Square (90°), dan Monochromatic (variasi saturasi/kecerahan).
Beberapa Input Warna — Pemilih warna bawaan, hex (#RRGGBB), slider RGB, dan slider HSL semuanya tersinkronisasi secara real-time. Ubah input apa pun dan semua input lainnya akan diperbarui secara instan.
Tampilan Palet Visual — Contoh warna besar dengan nilai hex, RGB, dan HSL untuk setiap warna. Salin dalam satu klik pada nilai apa pun.
Pemeriksaan Kontras WCAG — Setiap warna palet menunjukkan rasio kontras terhadap teks putih dan hitam dengan lencana lulus/gagal AA/AAA. Memastikan pilihan warna Anda memenuhi standar aksesibilitas.
4 Format Ekspor — Properti kustom CSS (variabel :root), objek JSON, warna konfigurasi Tailwind, dan variabel SCSS. Salin seluruh blok ekspor dengan satu klik.
Pembaruan Real-Time — Palet diregenerasi secara instan pada setiap perubahan input. Tidak perlu tombol hasilkan.
Perhitungan Berbasis HSL — Semua tipe harmoni menggunakan rotasi hue HSL yang benar secara matematis, menghasilkan hasil yang akurat secara teori warna.

Tipe Harmoni Warna

Komplementer: Dua warna yang berlawanan pada roda warna (berjarak 180°). Kontras tinggi, bersemangat. Terbaik untuk: elemen panggilan-aksi, desain berani.
Triadik: Tiga warna yang berjarak sama (berjarak 120°). Seimbang, penuh warna. Terbaik untuk: ilustrasi, desain ceria.
Analogous: Warna yang berdekatan pada roda (berjarak 30°). Harmonis, tenang. Terbaik untuk: tema alam, gradien, desain yang kohesif.
Split-Complementary: Warna dasar + dua warna yang berdekatan dengan komplemennya (150°/210°). Kontras kuat dengan ketegangan lebih sedikit. Terbaik untuk: pemula, palet serbaguna.
Tetradic/Square: Empat warna pada interval 90°. Kaya, beragam. Terbaik untuk: desain kompleks dengan banyak elemen.
Monokromatik: Satu hue dengan variasi saturasi dan kecerahan. Elegan, bersatu. Terbaik untuk: desain minimalis, tema satu merek.

IKLAN · MENGHAPUS?

Apa itu harmoni warna dalam desain?

Harmoni warna mengacu pada kombinasi warna yang menyenangkan secara visual dan seimbang. Kombinasi ini berasal dari roda warna — susunan warna melingkar berdasarkan hubungan hue-nya. Warna harmonis menciptakan rasa keteraturan dan daya tarik estetika. Tipe harmoni utama (komplementer, triadik, analog, dll.) didasarkan pada hubungan geometris pada roda warna — warna pada sudut tertentu satu sama lain cenderung terlihat bagus bersama. Desainer menggunakan hubungan ini untuk membuat palet yang terasa disengaja dan kohesif daripada acak.

Apa itu rasio kontras WCAG dan mengapa itu penting?

Rasio kontras WCAG (Web Content Accessibility Guidelines) mengukur perbedaan luminans antara dua warna — biasanya teks dan latar belakangnya. Rasio 1:1 berarti tidak ada kontras (warna yang sama), sedangkan 21:1 adalah kontras maksimum (hitam di atas putih). WCAG AA mensyaratkan setidaknya 4,5:1 untuk teks normal dan 3:1 untuk teks besar. WCAG AAA mensyaratkan 7:1 untuk teks normal dan 4,5:1 untuk teks besar. Memenuhi rasio ini memastikan bahwa orang dengan gangguan penglihatan, buta warna, atau mereka yang melihat dalam kondisi pencahayaan yang buruk dapat membaca konten Anda. Banyak undang-undang aksesibilitas merujuk pada standar WCAG.

Apa perbedaan antara model warna RGB dan HSL?

RGB (Merah, Hijau, Biru) mendefinisikan warna dengan mencampur intensitas cahaya — setiap saluran berkisar dari 0-255. Beginilah cara layar menampilkan warna tetapi tidak intuitif bagi manusia. HSL (Hue, Saturation, Lightness) lebih intuitif: Hue adalah sudut warna pada roda (0-360°), Saturation adalah intensitas warna (0-100%), dan Lightness adalah seberapa terang atau gelapnya (0-100%). HSL lebih baik untuk perhitungan harmoni warna karena memutar sudut hue secara langsung menciptakan warna harmonis, sementara mencapai hal yang sama di RGB memerlukan matematika yang kompleks.

Tipe harmoni mana yang harus saya gunakan untuk desain saya?

Tergantung pada tujuan Anda. Komplementer (2 warna) menciptakan kontras tinggi dan energi — bagus untuk CTA dan pernyataan berani. Analog (3 warna) terasa tenang dan kohesif — ideal untuk tema alam dan desain yang tenang. Triadik (3 warna) seimbang dan bersemangat — bagus untuk ilustrasi dan merek yang ceria. Split-komplementer adalah versi komplementer yang lebih aman dengan ketegangan visual yang lebih sedikit. Monokromatik elegan dan bersatu — sempurna untuk desain minimalis. Tetradik menawarkan variasi paling banyak tetapi memerlukan keseimbangan yang cermat. Jika ragu, mulailah dengan analog atau split-komplementer — keduanya paling mudah dimaafkan.

Ingin bebas iklan? Bebas Iklan Hari Ini

