Generator Palet Warna

Hasilkan palet warna harmoni dari warna dasar apa pun dengan generator palet warna gratis kami. Pilih dari 7 aturan harmoni warna - komplementer, triadik, analog, komplementer terpisah, tetradik, monokromatik, atau gradasi gaya Tailwind. Setiap contoh menyertakan nilai HEX, RGB, dan HSL serta skor kontras WCAG. Ekspor sebagai variabel CSS, konfigurasi Tailwind, atau contoh SVG - tanpa pendaftaran.

Color Palette Generator

Pick a base color, choose a harmony rule, and get a ready-to-use color palette with HEX, RGB, HSL values and WCAG contrast scores. Export as CSS variables, Tailwind config, or SVG swatches. All processing runs locally in your browser.

Base Color

Color Harmony

Quick presets:

Complementary Palette

Opposite hues - high contrast, vibrant · 5 colors · Click any swatch to copy HEX

Base

rgb(13, 162, 231)

hsl(199°, 89%, 48%)

⬜ Fail⬛ AAA

Base Light

rgb(101, 200, 246)

hsl(199°, 89%, 68%)

⬜ Fail⬛ AAA

Base Dark

rgb(8, 95, 135)

hsl(199°, 89%, 28%)

⬜ AAA⬛ Fail

Complement

rgb(231, 82, 13)

hsl(19°, 89%, 48%)

⬜ AA Large⬛ AA

Complement Light

rgb(246, 147, 101)

hsl(19°, 89%, 68%)

⬜ Fail⬛ AAA

Export Palette

CSS Variables

:root {
  --color-base: #0da2e7;
  --color-base-light: #65c8f6;
  --color-base-dark: #085f87;
  --color-complement: #e7520d;
  --color-complement-light: #f69365;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
          'base': '#0da2e7',
          'base-light': '#65c8f6',
          'base-dark': '#085f87',
          'complement': '#e7520d',
          'complement-light': '#f69365',
        },
      },
    },
  },
};

Mengapa Menggunakan Generator Palet Warna Kami?

Pembuatan Palet Warna Instan: hasilkan palet warna harmoni dari warna dasar apa pun secara instan. Generator palet warna kami menerapkan aturan teori warna secara real time - pilih warna, pilih harmoni, dan dapatkan palet lengkap dengan nilai HEX, RGB, dan HSL dalam milidetik.
Generator Palet Warna Online yang Aman: semua pembuatan palet terjadi lokal di browser Anda - tidak ada data yang dikirim ke server mana pun. Gunakan generator palet warna online kami dengan privasi penuh. Pilihan warna dan detail proyek Anda tidak pernah meninggalkan perangkat.
Generator Palet Warna - Tanpa Instalasi: hasilkan palet warna langsung di browser apa pun tanpa perangkat lunak desain, plugin, atau unduhan. Generator palet warna kami berfungsi di perangkat apa pun, di mana pun - cukup pilih warna dan salin hasilnya.
7 Aturan Harmoni + Skor Kontras WCAG: pilih dari 7 aturan harmoni warna - komplementer, triadik, analog, komplementer terpisah, tetradik, monokromatik, dan gradasi gaya Tailwind. Setiap contoh menyertakan skor kontras WCAG AA/AAA untuk teks putih dan hitam.

Kasus Penggunaan Umum Generator Palet Warna

Desain UI Aplikasi Web: pengembang front-end menggunakan generator palet warna kami untuk membuat sistem warna yang konsisten bagi aplikasi React, Vue, atau Angular. Pilih warna merek, hasilkan palet komplementer atau monokromatik, dan ekspor sebagai variabel CSS atau konfigurasi Tailwind dengan sekali klik.
Pengembangan Identitas Merek: desainer menggunakan generator palet warna kami untuk membangun sistem warna merek dari satu warna utama. Aturan harmoni triadik dan analog menghasilkan palet profesional yang berfungsi di logo, materi pemasaran, dan produk digital.
Penyiapan Tema Tailwind CSS: pengembang Tailwind menggunakan generator palet warna kami untuk membuat skala warna kustom (50-900) dari warna merek apa pun. Harmoni Gradasi menghasilkan skala gradasi kompatibel Tailwind yang dapat ditempel langsung ke tailwind.config.js.
Desain Mengutamakan Aksesibilitas: insinyur aksesibilitas menggunakan generator palet warna kami untuk memeriksa rasio kontras WCAG sebelum menyelesaikan sistem warna. Setiap contoh menunjukkan skor kepatuhan AA dan AAA untuk teks putih dan hitam, membantu memilih kombinasi warna yang aksesibel.
Desain Landing Page & Pemasaran: pemasar dan desainer no-code menggunakan generator palet warna kami untuk membuat skema warna yang menarik secara visual untuk landing page. Harmoni komplementer dan komplementer terpisah menghasilkan palet kontras tinggi yang menarik perhatian ke CTA.
Dokumentasi Design System: insinyur design system menggunakan generator palet warna kami untuk mengekspor lembar contoh SVG dan file variabel CSS untuk dokumentasi. SVG yang diekspor menampilkan nama warna, kode HEX, dan nilai dalam format siap presentasi.

Apa Itu Generator Palet Warna?

Generator palet warna adalah alat yang membuat kumpulan warna harmoni dari satu warna dasar menggunakan aturan teori warna. Teori warna mendefinisikan hubungan antarwarna pada roda warna - warna yang berlawanan, berdekatan, atau berjarak sama cenderung tampak seimbang secara visual bila digabungkan. Generator palet warna online kami menerapkan aturan ini secara otomatis: pilih warna dasar apa pun, pilih jenis harmoni, dan dapatkan palet lengkap dengan nilai HEX, RGB, dan HSL, serta skor kontras WCAG untuk aksesibilitas. Semua pembuatan terjadi instan di browser Anda - tanpa server dan tanpa pendaftaran.

Bagaimana Generator Palet Warna Kami Bekerja

1. Pilih Warna Dasar Anda: gunakan pemilih warna atau ketik kode HEX langsung. Mulai secara instan dengan 6 warna prasetel (Biru Laut, Hijau Hutan, Oranye Senja, Ungu Royal, Merah Muda, Kuning Emas).
2. Pilih Aturan Harmoni: pilih dari 7 jenis harmoni warna - komplementer, triadik, analog, komplementer terpisah, tetradik, monokromatik, atau gradasi gaya Tailwind. Generator menerapkan aturan tersebut pada nilai HSL warna dasar Anda untuk menghasilkan palet yang seimbang secara matematis.
3. Ekspor Palet Anda: klik contoh mana pun untuk menyalin kode HEX-nya. Ekspor palet lengkap sebagai properti kustom CSS, cuplikan konfigurasi Tailwind, lembar contoh SVG, atau daftar HEX sederhana.

7 Aturan Harmoni Warna

Komplementer: menggunakan warna dasar dan warna berlawanan pada roda warna (terpisah 180°). Menciptakan kombinasi kontras tinggi dan cerah - ideal untuk CTA dan desain yang menarik perhatian.
Triadik: menggunakan tiga warna yang berjarak sama 120° pada roda warna. Menghasilkan palet seimbang dan berwarna yang terasa energik tanpa berlebihan.
Analog: menggunakan warna yang berdekatan dengan warna dasar (±15° dan ±30°). Menciptakan palet harmoni dan alami yang terasa kohesif - umum dalam desain terinspirasi alam dan menenangkan.
Komplementer Terpisah: menggunakan warna dasar plus dua warna yang berdekatan dengan komplementernya (150° dan 210°). Kontras lebih lembut daripada komplementer - pilihan lebih aman bagi pemula.
Tetradik: menggunakan empat warna dalam bentuk persegi panjang pada roda warna (terpisah 90°). Kaya dan kompleks - paling baik bila satu warna mendominasi dan lainnya digunakan sebagai aksen.
Monokromatik: menggunakan warna yang sama pada tingkat kecerahan berbeda. Elegan dan kohesif - ideal untuk desain minimalis dan canggih.
Gradasi (50-900): menghasilkan skala gradasi gaya Tailwind CSS dari warna dasar. Sempurna untuk membuat sistem token warna lengkap bagi design system dan pustaka komponen.

Memahami Skor Kontras WCAG

Setiap contoh di generator palet warna kami menampilkan skor kontras WCAG untuk teks putih (⬜) dan hitam (⬛). Pedoman Aksesibilitas Konten Web (WCAG) mensyaratkan rasio kontras minimal 4,5:1 untuk teks normal (AA) dan 7:1 untuk aksesibilitas yang ditingkatkan (AAA). Rasio 3:1 dapat diterima untuk teks besar (AA Large). Gunakan skor ini untuk memilih warna teks yang aksesibel bagi setiap latar di palet Anda - lencana hijau berarti skor lulus, merah berarti gagal.

Pertanyaan yang Sering Diajukan

Generator palet warna adalah alat yang membuat kumpulan warna harmoni dari satu warna dasar menggunakan aturan teori warna. Generator palet warna online kami menerapkan 7 aturan harmoni - komplementer, triadik, analog, komplementer terpisah, tetradik, monokromatik, dan gradasi gaya Tailwind - untuk menghasilkan palet seimbang dengan nilai HEX, RGB, dan HSL.

Palet komplementer menggunakan warna yang berlawanan pada roda warna (terpisah 180°), menciptakan kontras tinggi - ideal untuk CTA. Palet analog menggunakan warna yang berdekatan (±15° dan ±30°), menciptakan kombinasi harmoni dan alami - umum dalam desain tenang yang terinspirasi alam.

Harmoni Gradasi menghasilkan skala gradasi gaya Tailwind CSS dari warna dasar Anda - 10 gradasi dari sangat terang (50) hingga sangat gelap (900). Gunakan untuk membuat sistem token warna lengkap bagi design system dan pustaka komponen.

Skor kontras WCAG menunjukkan apakah teks putih atau hitam dapat dibaca pada setiap latar warna. Rasio 4,5:1 memenuhi AA (teks normal), 7:1 memenuhi AAA (ditingkatkan), dan 3:1 memenuhi AA Large (teks besar). Lencana hijau berarti lulus, merah berarti gagal.

Klik «Unduh Tailwind» atau «Salin» di samping ekspor konfigurasi Tailwind untuk mendapatkan cuplikan tailwind.config.js. Tempelkan objek colors ke bagian theme.extend.colors Anda. Harmoni Gradasi menghasilkan skala 50-900 yang terintegrasi mulus dengan sistem warna Tailwind yang ada.

Ya. Klik «Unduh SVG» untuk mendapatkan file SVG vektor yang menampilkan semua contoh palet beserta kode HEX dan namanya. SVG dapat diimpor ke Figma, Sketch, Illustrator, atau alat desain vektor apa pun untuk dokumentasi design system.

Tentu saja. Semua pembuatan palet warna terjadi sepenuhnya di browser Anda menggunakan JavaScript. Pilihan warna dan detail proyek Anda tidak pernah dikirim ke server mana pun. Semuanya berjalan lokal di perangkat Anda, memastikan privasi sepenuhnya.

Ya! Generator palet warna kami 100 % gratis tanpa pendaftaran, tanpa iklan, dan tanpa batas penggunaan. Hasilkan palet warna untuk proyek apa pun sebanyak yang Anda butuhkan - sepenuhnya gratis, selamanya.