Pembuat Palet Warna
Hasilkan palet warna yang harmonis dari satu warna dasar — komplementer, analog, triad, tetrad, semi-komplementer, atau monokromatik — menggunakan rotasi hue HSL. Dapatkan nilai HEX dan HSL untuk setiap warna.
Input
Warna awal dari mana seluruh palet dibangun.
Output
Your color palette will appear here.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/color-scheme-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseColor": "#FF0000",
"schemeType": "complementary"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `color-scheme-generator` tool (Color Scheme Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/color-scheme-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Palet Warna — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Pembuat palet warna membangun palet warna yang bekerja dengan baik bersama-sama, dimulai dari satu warna dasar dan memutar huenya mengelilingi lingkaran warna sesuai aturan teori warna klasik. Pilih warna dasar dan jenis palet, lalu dapatkan kembali nilai HEX dan HSL untuk setiap warna dalam palet — siap untuk digunakan dalam alat desain, file CSS, atau konfigurasi Tailwind.
Jenis palet
- Komplementer — warna dasar ditambah lawannya di lingkaran (hue + 180°). Kontras tinggi, sangat baik untuk aksen dan ajakan tindakan.
- Analog — warna dasar ditambah tetangganya 30° di setiap sisi. Warna yang berdekatan di lingkaran, menghasilkan palet yang tenang dan kontras rendah.
- Triad — tiga warna berjarak merata 120° terpisah. Vibran dan seimbang, pilihan umum untuk palet merek yang ceria.
- Semi-Komplementer — warna dasar ditambah dua warna yang berdekatan dengan komplemennya (+150° dan +210°). Hampir sebanyak kontras seperti komplementer, tetapi lebih lembut.
- Tetrad / Persegi — empat warna berjarak merata 90° terpisah. Menawarkan variasi paling banyak, jadi biasanya membutuhkan satu warna dominan dan tiga warna pendukung.
- Monokromatik — hue yang sama pada empat tingkat lightness yang berbeda (20%, 40%, 60%, 80%). Palet yang aman dan kohesif untuk nuansa dan tint UI.
Cara penggunaan
- Pilih warna dasar dengan pemilih warna (atau ketik nilai heksadesimal).
- Pilih jenis palet dari menu tarik-turun.
- Tabel palet diperbarui secara instan dengan peran setiap warna, kode heksadesimal, dan nilai HSL.
- Salin tabel atau unduh sebagai CSV untuk digunakan dalam perangkat lunak desain, properti kustom CSS, atau tema Tailwind.
Semuanya berjalan di ruang HSL: warna dasar dikonversi ke hue/saturation/lightness, hue diputar dengan offset tetap yang diperlukan setiap palet, dan hasilnya dikonversi kembali ke RGB dan heksadesimal. Rotasi hue mengelilingi pada 360°, jadi hue dasar 300° plus offset triadic 120° dengan benar mendarat di 60°, bukan 420°.
Pertanyaan Umum
Mengapa HSL bukan RGB? Memutar hue di ruang HSL menjaga saturation dan lightness tetap konstan, jadi setiap warna yang dihasilkan memiliki intensitas dan kecerahan yang sama dengan dasar — hanya hue yang berubah. Melakukan rotasi setara di RGB jauh lebih berantakan dan tidak memetakan dengan bersih ke cara lingkaran warna diajarkan.
Apakah saturation atau lightness berubah antar warna? Untuk setiap palet kecuali monokromatik, tidak — hanya hue yang berubah, jadi semua warna dalam palet berbagi saturation dan lightness warna dasar. Monokromatik menjaga hue dan saturation tetap dan sebagai gantinya memvariasikan lightness di empat langkah tetap.
Bisakah saya menggunakan warna yang dihasilkan langsung di CSS?
Ya. Setiap baris memberikan kode heksadesimal (#RRGGBB) dan string HSL (hsl(h, s%, l%)), jadi Anda dapat menyalin format apa pun langsung ke dalam stylesheet atau file token desain.
Palet mana yang harus saya pilih? Komplementer dan semi-komplementer bekerja dengan baik untuk satu aksen terhadap latar belakang netral. Analog dan monokromatik cocok untuk antarmuka yang tenang dan kohesif. Triad dan tetrad memberikan lebih banyak variasi untuk ilustrasi, bagan, atau palet merek yang membutuhkan beberapa warna berbeda.
Privasi
Semua matematika warna terjadi secara lokal di browser Anda — warna dasar dan palet pilihan Anda tidak pernah dikirim ke server.