Lewati ke konten
Toolars
Jelajahi
Laporkan bug

Desain · utilitas Lokal

Generator Harmoni Warna

Color Harmony Builder

Bangun palet lima warna dari satu benih HEX dengan aturan analog, komplementer, triadik, dan lainnya, lengkap dengan rasio kontras serta ekspor CSS dan JSON.

Jalur tugas / dari masukan ke hasil

Atur warna benih

Berjalan lokal · Tidak ada yang diunggah

Cara kerja Generator Harmoni Warna, privasi, dan alat terkait

Jalur tugas / dari masukan ke hasil

Cara membangun harmoni lima warna

  1. 01

    Atur warna benih

    Ketik nilai heksadesimal enam digit ke HEX benih — awalan # bersifat opsional — atau pilih warna secara visual dengan Pemilih benih. Kedua kolom tetap sinkron, dan ruang kerja terbuka dengan benih #5D4DF1.

  2. 02

    Pilih aturan harmoni

    Pilih Analog, Komplementer, Komplementer terbagi, Triadik, Tetradik, atau Monokrom. Mesin menerapkan offset hue tetap lalu mempertahankan sampel tengah sebagai warna benih persis; sampel lain tidak selalu jatuh pada sudut teori yang tepat. Monokrom mempertahankan hue benih tetapi mengubah saturasi dan lightness.

  3. 03

    Atur target kontras

    Pilih Target kontras teks: 3:1 untuk teks besar, 4.5:1 untuk teks isi AA, atau 7:1 untuk teks isi AAA — defaultnya 4.5:1. Setiap sampel diukur terhadap hitam atau putih — mana pun yang lebih mudah dibaca di atasnya.

  4. 04

    Buat paletnya

    Tekan Buat palet. Lima sampel muncul, dan yang di tengah selalu warna benih Anda yang persis — empat lainnya menggeser hue, saturasi, dan lightness di sekitarnya dalam rentang yang dibatasi, sehingga ramp-nya tetap bisa dipakai alih-alih melayang ke warna neon atau lumpur.

  5. 05

    Baca lencana kontrasnya

    Setiap sampel menampilkan nilai heksa, rasio kontras, dan lencana Lolos atau Di bawah target, dengan teks sampel dirender dalam hitam atau putih — warna yang memenangkan perbandingan kontras. Lencana Di bawah target berarti pilihlah tetangga yang lebih gelap atau lebih terang untuk teks, bukan berarti warnanya rusak.

  6. 06

    Salin CSS atau unduh JSON

    Salin CSS menyalin blok :root berkomentar dengan properti kustom --palette-1 hingga --palette-5. Unduh JSON menyimpan toolars-palette.json, yang mencatat benih, harmoni, target kontras, dan data kontras setiap warna bersama kolom aiModel dan api yang eksplisit bernilai null.

Fakta alat

Pemrosesan
Di browser Anda
Input meninggalkan perangkat
Tidak pernah
Retensi
Tidak ada yang disimpan
Harga
Gratis

Masukan Anda tetap di peramban.

Generator Harmoni Warna menggunakan jalur eksekusi lokal terverifikasinya dan tidak membuat riwayat masukan atau keluaran tersembunyi.

Eksekusi lokal

Berjalan di dalam tab peramban saat ini.

Tanpa pemrosesan tersembunyi

Data alat aktif tidak pernah menjadi catatan dokumen Toolars.

Tanpa perlu akun

Gunakan alur kerja inti tanpa membuat profil. Favorit disinkronkan ke akun Anda setelah masuk.

Atur ulang seketika

Bersihkan tab dan data kerja aktif pun hilang.

Apa yang sebenarnya dilakukan Generator Harmoni Warna

Proyek sampingan butuh palet yang terlihat disengaja, bukan acak: satu warna primer, nada-nada pendukungnya, dan bukti bahwa teks tetap terbaca di atas masing-masing. Memilih harmoni dengan mata saja bergeser di setiap revisi, jadi Generator Harmoni Warna menerapkan aturan tetap pada benih Anda dan menampilkan hitungan kontras di samping setiap sampel. Mesinnya deterministik — benih dan aturan yang sama selalu mengembalikan lima warna yang sama — sehingga rekan tim dapat mereproduksi paletnya dengan persis. Seluruh proses berjalan tanpa jaringan, dan hasil ekspornya langsung masuk ke stylesheet atau berkas token desain.

Pertanyaan umum

Apakah paletnya dihasilkan oleh AI?
Tidak, dan ruang kerja menyatakannya di atas kontrol: ini adalah mesin harmoni lokal yang deterministik tanpa model atau API AI. Benih dan aturan yang sama selalu menghasilkan lima warna yang sama, sehingga hasilnya dapat direproduksi dalam tinjauan desain.
Nilai benih apa yang diterima?
Warna heksadesimal enam digit seperti #5D4DF1, dengan atau tanpa # di depan. Singkatan tiga digit dan notasi lain ditolak dengan pesan yang menyebutkan format yang diharapkan, dan pemilih warna selalu menghasilkan benih yang valid.
Mengapa sampel tengah persis sama dengan benih saya?
Memang dirancang begitu: posisi ketiga dalam ramp dipatok ke nilai benih agar palet tetap berjangkar pada warna yang Anda pilih. Dua sampel di setiap sisi diturunkan di sekitarnya — aturan harmoni menggeser hue, sementara lightness melangkah ke luar dan saturasi mengecil ke arah tepi.
Bagaimana lencana kontras dihitung?
Rasio kontras setiap sampel dihitung dari luminansi relatif terhadap hitam dan terhadap putih, dan yang lebih baik dari keduanya ditampilkan di samping nilai heksa. Sampel lolos ketika rasio tersebut memenuhi target yang Anda pilih: 3:1, 4.5:1, atau 7:1.
Apa persisnya isi kedua ekspor itu?
Salin CSS menghasilkan blok :root dengan --palette-1 hingga --palette-5 di bawah komentar yang menyebut harmoni dan benih. Unduhan JSON mencatat nama mesin, kolom aiModel dan api yang bernilai null, benih, harmoni, dan target kontras Anda, serta setiap warna dengan heksa, warna teks pemenang, rasio kontras, dan tanda lolosnya. CSS juga mengekspor --palette-N-text untuk tiap warna; JSON menyimpan rasio kontras tanpa pembulatan.
Apakah ada yang keluar dari peramban saya?
Tidak. Panelnya secara eksplisit bertanda Tanpa jaringan: benih, warna yang dihasilkan, dan ekspor tetap berada di tab ini, dan tidak diperlukan akun.

Baca juga

Lanjutkan di Desain

Tugas terkait, bukan jalan buntu.

Pindah ke ruang kerja terfokus lainnya tanpa kembali ke indeks lengkap.

Generator Loader CSS

CSS Loader Generator

Rancang loader CSS cincin orbit atau tiga titik dengan ukuran, durasi, dan warna yang dapat disetel, lalu salin kode lengkap dengan blok prefers-reduced-motion.

Buat

Generator Checkbox CSS

CSS Checkbox Generator

Beri gaya kotak centang HTML asli dengan ukuran, border, dan warna pilihan, lalu salin CSS yang mempertahankan fokus keyboard dan status disabled.

Buat

Generator Switch CSS

CSS Switch Generator

Rancang sakelar alih murni CSS dengan geometri lintasan dan kenop yang dapat diukur, lalu salin kodenya dengan dukungan reduced-motion — tanpa JavaScript.

Buat

Generator Clip Path CSS

CSS Clip Path Generator

Edit titik poligon dengan menyeret, papan ketik, atau koordinat. Mulai dari empat prasetel dan salin deklarasi clip-path atau CSS lengkap secara lokal.

Buat