Quick presets:
Complementary
5 colors · Click any swatch to copy HEX
Base
rgb(13, 162, 231)
hsl(199°, 89%, 48%)
Base Light
rgb(101, 200, 246)
hsl(199°, 89%, 68%)
Base Dark
rgb(8, 95, 135)
hsl(199°, 89%, 28%)
Complement
rgb(231, 82, 13)
hsl(19°, 89%, 48%)
Complement Light
rgb(246, 147, 101)
hsl(19°, 89%, 68%)
Export
:root {
--color-base: #0da2e7;
--color-base-light: #65c8f6;
--color-base-dark: #085f87;
--color-complement: #e7520d;
--color-complement-light: #f69365;
}- 7 Aturan Harmoni: Hasilkan palet menggunakan skala warna gaya komplementer, triadik, analog, split-komplementer, tetradik, monokromatik, dan Tailwind dari warna benih apa pun.
- Matematika Warna Akurat: Semua konversi menggunakan algoritma RGB/HSL yang tepat dengan perhitungan rasio kontras WCAG. Lihat pencahayaan relatif, lencana lulus/gagal untuk teks putih dan hitam di setiap contoh.
- Nilai HEX, RGB & HSL: Setiap contoh menampilkan nilai HEX, RGB, dan HSL-nya. Klik contoh mana saja untuk menyalin kode HEX ke clipboard Anda secara instan.
- Ekspor sebagai CSS, SVG atau TXT: Unduh palet Anda sebagai properti khusus CSS, lembar contoh SVG, atau daftar HEX teks biasa. Sempurna untuk sistem desain, konfigurasi Tailwind, dan dokumentasi.
Kasus Penggunaan Umum untuk Generator Palet Warna
- Desain & Pembuatan Prototipe UI: Menghasilkan palet warna yang harmonis untuk mockup UI situs web dan aplikasi. Gunakan aturan yang saling melengkapi dan analog untuk menciptakan antarmuka yang seimbang dengan hierarki warna yang tepat.
- Tailwind CSS & Token Desain: Gunakan aturan Shades 50→900 untuk menghasilkan skala warna penuh untuk warna merek khusus. Ekspor variabel CSS dan sambungkan langsung ke konfigurasi sistem desain Anda.
- Pembuatan Sistem Desain: Bangun sistem warna yang konsisten untuk token desain Anda. Hasilkan palet tetradik dan triadik yang berfungsi bersama, lalu ekspor sebagai properti khusus CSS untuk dokumentasi sistem desain Anda.
- Identitas & Logo Merek: Saat membangun identitas merek, gunakan aturan split-complementary atau analog untuk menemukan warna yang melengkapi warna merek utama Anda sekaligus menjaga keselarasan visual.
- Dek Presentasi & Slide: Buat skema warna yang kohesif untuk presentasi. Gunakan aturan monokromatik untuk mendapatkan serangkaian rona dan corak yang menjaga slide Anda tetap profesional dan konsisten.
- Visualisasi & Bagan Data: Hasilkan palet warna yang dapat diakses untuk bagan dan infografis. Setiap contoh menyertakan lencana kontras WCAG sehingga Anda dapat memverifikasi keterbacaan terhadap latar belakang putih dan hitam.
Pertanyaan yang Sering Diajukan
Generator Palet Warna mendukung tujuh aturan harmoni: Komplementer (warna berlawanan pada roda - kontras tinggi), Triadik (tiga warna dengan jarak yang sama - seimbang), Analog (warna yang berdekatan - harmonis), Split-Complementary (warna dasar ditambah dua warna yang hampir saling melengkapi), Tetradic (empat warna dalam persegi panjang - kompleks), Monokromatik (rona yang sama pada tingkat kecerahan yang berbeda), dan Shades 50→900 (skala bayangan sepuluh langkah gaya Tailwind).
Cukup klik pada kartu contoh mana saja untuk menyalin kode HEX-nya ke clipboard Anda. Ikon tanda centang muncul sebentar untuk mengonfirmasi penyalinan. Setiap contoh juga menampilkan nilai RGB dan HSL sehingga Anda dapat menggunakannya dalam alat desain atau editor kode apa pun. Untuk ekspor massal, gunakan opsi pengunduhan Variabel CSS, SVG, atau TXT di bagian Ekspor.
Setiap contoh menunjukkan dua lencana - satu untuk teks putih (⬜) dan satu lagi untuk teks hitam (⬛). Lencana hijau menunjukkan warna tersebut memenuhi persyaratan kontras WCAG; merah menunjukkan gagal. Level yang ditampilkan adalah AA Besar (3:1), AA (4,5:1), dan AAA (7:1). Ini membantu Anda dengan cepat menilai apakah suatu warna dapat dibaca sebagai latar belakang teks.
Ya! Pilih aturan harmoni "Shades 50→900" untuk menghasilkan skala warna sepuluh langkah (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) - pola yang sama yang digunakan oleh Tailwind CSS. Warna dasar menjadi 500 warna, dengan varian lebih terang dan lebih gelap dihasilkan secara otomatis. Ekspor variabel CSS untuk digunakan langsung di tailwind.config.js Anda.
Anda dapat mengekspor palet Anda dalam tiga format: Variabel CSS (properti khusus sebagai :root { ... }), Lembar Swatch SVG (kisi visual contoh warna dengan label hex), dan Teks Biasa (daftar nama: pasangan hex). Gunakan tombol Salin CSS atau tombol Unduh untuk file CSS, SVG, atau TXT.
Semua konversi warna menggunakan algoritme standar untuk konversi RGB↔HSL dengan representasi rona yang tepat (0-360°), saturasi (0-100%), dan kecerahan (0-100%). Rasio kontras dihitung menggunakan rumus pencahayaan relatif WCAG 2.1, yang memperhitungkan koreksi gamma non-linier pada perangkat tampilan. Hal ini memastikan informasi warna yang akurat dan dapat diandalkan.
Ya, Generator Palet Warna sepenuhnya gratis dan tidak perlu mendaftar. Tidak ada biaya tersembunyi, tidak ada fitur premium, dan tidak ada batasan berapa banyak palet yang dapat Anda hasilkan. Karena semuanya berjalan secara lokal di browser Anda, tidak ada biaya server atau batasan API.
Setelah pemuatan halaman awal, Generator Palet Warna bekerja sepenuhnya offline. Semua fungsi matematika warna, rendering contoh, dan ekspor berjalan di browser Anda tanpa permintaan server apa pun. Hal ini menjadikannya alat yang andal bagi desainer dan pengembang yang bekerja di lingkungan dengan konektivitas internet terbatas atau tanpa konektivitas internet.