Apa itu Pembuat Skema Warna?

Color Scheme Creator menghasilkan palet warna lengkap dari satu warna dasar menggunakan aturan teori warna. Pilih skema monokromatik, komplementer, komplementer terbagi, terbagi ganda, triadik, tetradik, atau analog, lalu sesuaikan setiap swatch. Salin tautan berbagi, ekspor sebagai variabel CSS atau konfigurasi Tailwind, atau salin kode hex.

Pilih hex dasar apa pun, lalu generator menjalankan rotasi standar pada roda warna: 180 derajat untuk komplementer, 150 dan 210 derajat untuk kedua sisi komplementer terbagi, 120 untuk triadik, 90 untuk tetradik, dan langkah kecil di kedua sisi untuk analog. Shade dan tint tetap pada hue yang sama dan hanya menggeser kecerahan di ruang HSL dengan langkah tetap, sehingga setiap warna mendapat tangga lima tingkat yang rapi. Setiap swatch bisa disalin sebagai HEX, rgb(), hsl(), atau oklch(); panel kontras menilai tiap warna terhadap putih dan hitam untuk WCAG AA dan AAA, dan pratinjau penglihatan menggambar ulang seluruh palet melalui filter protanopia, deuteranopia, atau tritanopia hanya dengan satu klik. Salin tautan berbagi untuk menandai palet atau mengirimkannya ke rekan tim tanpa akun.

Cara menggunakan

1. Pilih warna dasar menggunakan pemilih warna atau masukkan kode hex.
2. Pilih jenis skema (monokromatik, komplementer, komplementer terbagi, terbagi ganda, triadik, analog, tetradik) untuk menghasilkan palet warna.
3. Salin kode hex satu per satu, ekspor palet lengkap sebagai variabel CSS, atau unduh sebagai gambar swatch.

Kapan menggunakan

• Mengubah satu hex brand menjadi palet lengkap untuk situs atau tema aplikasi baru.
• Mengecek apakah warna logo punya komplementer yang bersih sebelum mencetak merchandise.
• Membuat variabel CSS tanpa harus membuka Figma atau alat desain lain.

Hasil

Seorang pengembang web memilih biru utama merek mereka (#3B82F6), menghasilkan skema triadik dengan nada oranye dan hijau komplementer, lalu mengekspor palet sebagai properti kustom CSS untuk sistem desain mereka.

FAQ

Apa beda skema triadik dan tetradik?

Triadik memakai tiga warna berjarak 120 derajat di roda warna sehingga komposisinya seimbang. Tetradik memakai empat warna membentuk persegi panjang (dua pasang komplementer), variasinya lebih banyak tapi lebih sulit diseimbangkan secara visual.

Kapan pakai shade, kapan pakai tint?

Shade (versi lebih gelap) cocok untuk teks, border, dan state hover di UI terang. Tint (versi lebih terang) berguna untuk latar, state nonaktif, dan highlight yang halus. Kebanyakan design system butuh dua-duanya.

Apakah generator mempertimbangkan kontras aksesibilitas?

Ya — panel kontras di bawah palet menampilkan rasio WCAG setiap warna terhadap putih dan hitam, lengkap dengan badge lulus atau gagal untuk AA dan AAA. Ambang 4.5:1 untuk teks normal sudah cukup untuk sebagian besar kebutuhan UI; ganti pratinjau penglihatan ke protanopia, deuteranopia, atau tritanopia untuk melihat juga bagaimana palet terbaca oleh orang dengan defisiensi penglihatan warna.

Kenapa skema analog terasa lebih tenang dari komplementer?

Warna analog bertetangga di roda warna dan berbagi satu keluarga warna, jadi tegangan visualnya rendah. Warna komplementer ada di sisi berseberangan, kontrasnya maksimal dan terasa lebih bertenaga, tapi pada area besar membuat mata cepat lelah.

Bisa ekspor ke konfigurasi Tailwind atau hanya variabel CSS?

Keduanya didukung. Variabel CSS langsung ditempel di bawah :root pada stylesheet. Format Tailwind membungkus nilai hex di dalam objek theme.extend.colors yang siap ditempelkan ke tailwind.config.js.

Alat terkait