HedgieTools

Pembuat palet

Mulai dari warna utama Anda dan dapatkan palet antarmuka lengkap: sekunder, tersier, sukses, peringatan, bahaya, dan netral, beserta gradasi dan pengecekan kontrasnya.

Warna utama Anda

Ketik nilai atau pilih warna: seluruh palet lainnya disusun berdasarkan warna ini.

Sekunder dan tersier
Format nilai

Ketik nilai HEX, misalnya #2563EB, atau klik kotaknya untuk memilih warna.

Palet Anda

Klik nilai atau gradasi (50 hingga 950) untuk menyalinnya. Ikon pensil mengganti warna yang disarankan dengan warna Anda sendiri: warna itu tetap saat Anda mengganti warna utama.

  • —

    Primer

    warna Anda
  • —

    Sekunder

    komplementer
  • —

    Tersier

    hampir komplementer
  • —

    Info

    biru
  • —

    Sukses

    hijau
  • —

    Peringatan

    oranye
  • —

    Bahaya

    merah
  • —

    Netral

    abu-abu berona

Token terang dan gelap

Warna fungsional antarmuka Anda, siap untuk tema terang dan tema gelap. Masing-masing merujuk ke satu gradasi palet. Klik untuk menyalin.

  • --backgroundLatar belakang halaman
  • --surfaceKartu dan panel
  • --surface-mutedArea sekunder
  • --borderGaris tepi dan pemisah
  • --textTeks utama
  • --text-mutedTeks sekunder
  • --primaryTombol dan link
  • --primary-hoverStatus hover
  • --on-primaryTeks di atas warna primer
  • --focus-ringGaris fokus
  • --secondaryAksen sekunder
  • --tertiaryAksen tersier
  • --infoInformasi
  • --info-softLatar belakang informasi
  • --successSukses
  • --success-softLatar belakang sukses
  • --warningPeringatan
  • --warning-softLatar belakang peringatan
  • --dangerBahaya, kesalahan
  • --danger-softLatar belakang kesalahan

Warna yang serasi

Harmoni klasik di sekitar warna utama Anda, untuk ilustrasi, grafik, atau aksen.

  • Komplementer

    warna yang berlawanan

  • Komplementer terpisah

    lebih lembut daripada warna berlawanan

  • Analog

    warna-warna yang berdekatan

  • Triadik

    tiga warna yang seimbang

  • Tetradik

    empat warna dalam bentuk persegi

  • Monokromatik

    satu rona, beberapa intensitas

Pratinjau dan kontras

Palet yang diterapkan pada beberapa elemen antarmuka, dan tingkat keterbacaan setiap pasangan warna menurut aturan WCAG.

Tema pratinjau
Judul halamanTeks sekunder, kurang penting, di bawah judul.
Kartu dengan link dan tombol.
PrimerSekunderTersier
Info · Pembaruan tersedia.
Sukses · Perubahan Anda telah disimpan.
Peringatan · Langganan Anda akan segera berakhir.
Gagal · Pembayaran gagal.
  • Teks di atas latar belakang
    Rasio—Teks normal—Teks besar—AAA—
  • Teks sekunder di atas latar belakang
    Rasio—Teks normal—Teks besar—AAA—
  • Link di atas latar belakang
    Rasio—Teks normal—Teks besar—AAA—
  • Tombol primer
    Rasio—Teks normal—Teks besar—AAA—
  • Tombol sekunder
    Rasio—Teks normal—Teks besar—AAA—
  • Teks tersier di atas latar belakang
    Rasio—Teks normal—Teks besar—AAA—
  • Pemberitahuan info
    Rasio—Teks normal—Teks besar—AAA—
  • Pemberitahuan sukses
    Rasio—Teks normal—Teks besar—AAA—
  • Pemberitahuan peringatan
    Rasio—Teks normal—Teks besar—AAA—
  • Pemberitahuan bahaya
    Rasio—Teks normal—Teks besar—AAA—

Ekspor

Dapatkan palet dalam format yang dipilih di atas (HEX).

Masukkan warna utama untuk membuat kode.

Variabel CSS untuk palet (--color-primary-500…). Token merujuk ke variabel ini; aktifkan tema gelap dengan data-theme="dark" pada elemen html.

Tentang generator palet

Pilih warna utama merek Anda dan dapatkan semua yang dibutuhkan antarmuka di sekitarnya: warna pendamping, warna status, warna netral, gradasi, token terang dan gelap, pengecekan kontras, dan kode siap tempel, semuanya tanpa meninggalkan browser Anda.

Palet lengkap dari satu warna

Alat ini menurunkan warna sekunder dan tersier dari warna utama Anda, warna status (info, sukses, peringatan, bahaya) yang selaras dengan gayanya, serta abu-abu dengan sedikit rona warna untuk latar belakang dan teks.

Gradasi siap pakai

Setiap warna hadir dalam sebelas gradasi, dari yang paling terang (50) hingga paling gelap (950), untuk latar belakang, garis tepi, status hover, dan teks. Jika warna yang disarankan tidak cocok, ganti dengan warna Anda sendiri: gradasinya ikut menyesuaikan.

Token terang dan gelap

Latar belakang, permukaan, garis tepi, teks, hover, fokus, dan latar belakang pemberitahuan: setiap warna fungsional merujuk ke satu gradasi palet, dengan satu nilai untuk tema terang dan satu untuk tema gelap.

Kontras teruji

Setiap pasangan teks dan latar belakang dinilai menurut aturan WCAG: 4,5:1 untuk teks normal, 3:1 untuk teks besar, dan 7:1 untuk level AAA.

Ekspor ke CSS, Tailwind, JSON

Salin setiap nilai dalam HEX, RGB, HSL, atau OKLCH, atau unduh file variabel CSS, tema Tailwind v4, konfigurasi Tailwind v3, JSON, atau daftar sederhana. Semuanya berlangsung di browser Anda: tidak ada yang dikirim atau disimpan.

Alat terkait