Visualizer Palet

Letakkan palet 5 warna apa pun ke dalam tiga antarmuka nyata — dasbor, halaman arahan, aplikasi seluler — dan lihat sebagai produk nyata. Peran ditetapkan secara otomatis: primer, aksen, permukaan, dan teks semuanya menemukan tempatnya.

Palet

#E63946#F4A261#2A9D8F#264653#F1FAEE

PrimerSekunderAksenPermukaanTeks

Edit palet (klik sampel untuk mengganti)

Dasbor

Halaman Arahan

Seluler

Cara kerja visualizer palet — bawa, baca, alihkan.

Lima warna dimasukkan ke dalam tiga antarmuka nyata, dengan peran yang ditetapkan secara otomatis.

01
Bawa
Tekan "Visualize" pada palet komunitas mana pun atau papan palet untuk membawanya masuk, atau edit lima nilai HEX secara manual.
02
Baca
Mesin menetapkan warna primer, sekunder, aksen, permukaan, dan teks berdasarkan kecerahan dan chroma - lihat di mana masing-masing berada di setiap mockup.
03
Beralih
Beralih antara dasbor, halaman arahan, dan aplikasi seluler secara real time; klik setiap sampel untuk mengganti warna di tempat.

FAQ visualisator palet

Empat pertanyaan yang sebenarnya ditanyakan orang tentang pratinjau palet.

Bagaimana peran ditetapkan?: Berdasarkan HSL: yang paling terang menjadi permukaan, yang paling gelap menjadi teks; di antara sisanya, yang paling jenuh menjadi primer dan yang paling jauh dari hue menjadi aksen. Penetapan otomatis hanyalah titik awal - setiap sampel tetap dapat diedit.
Apakah mockup tersebut komponen nyata?: Ini adalah template yang dirender CSS dengan proporsi nyata - navigasi, kartu statistik, grafik, tombol, dan aliran kartu - bukan ilustrasi.
Bisakah saya membawa palet komunitas saya sendiri?: Ya. Halaman palet komunitas dan papan palet keduanya memiliki entri "Visualize" yang membawa palet melalui tautan.
Apakah kontras teks yang rendah akan ditandai?: Ya. Ketika kontras teks-di-permukaan turun di bawah WCAG 4.5:1, sebuah lencana muncul di baris peran sehingga Anda dapat memperbaikinya sebelum mengirimkan.

Setelah Anda mendapatkan hasilnya

Lanjutkan dari sini dan gunakan warna-warna tersebut.

Papan Palet

Spasi untuk acak, kunci, seret untuk mengatur ulang, bagikan melalui URL — semua yang seharusnya dilakukan papan palet.

Pembuat Skala

Ubah warna apa pun menjadi skala sistem desain 11-langkah, merata secara persepsi di OKLCH, kontras WCAG per langkah, ekspor ke Tailwind/CSS/SCSS/JSON.

Pemeriksa Kontras

Validasi kontras WCAG 2.1 antara warna latar depan dan latar belakang apa pun.

Studio Palet AI

Deskripsikan adegan atau suasana dalam satu kalimat — dapatkan palet lima peran dengan alasan.

Cara kerja visualizer palet — bawa, baca, alihkan.

Lima warna dimasukkan ke dalam tiga antarmuka nyata, dengan peran yang ditetapkan secara otomatis.

Bawa

Tekan "Visualize" pada palet komunitas mana pun atau papan palet untuk membawanya masuk, atau edit lima nilai HEX secara manual.

Baca

Mesin menetapkan warna primer, sekunder, aksen, permukaan, dan teks berdasarkan kecerahan dan chroma - lihat di mana masing-masing berada di setiap mockup.

Beralih

Beralih antara dasbor, halaman arahan, dan aplikasi seluler secara real time; klik setiap sampel untuk mengganti warna di tempat.

FAQ visualisator palet

Empat pertanyaan yang sebenarnya ditanyakan orang tentang pratinjau palet.

Bagaimana peran ditetapkan?

Berdasarkan HSL: yang paling terang menjadi permukaan, yang paling gelap menjadi teks; di antara sisanya, yang paling jenuh menjadi primer dan yang paling jauh dari hue menjadi aksen. Penetapan otomatis hanyalah titik awal - setiap sampel tetap dapat diedit.

Apakah mockup tersebut komponen nyata?

Ini adalah template yang dirender CSS dengan proporsi nyata - navigasi, kartu statistik, grafik, tombol, dan aliran kartu - bukan ilustrasi.

Bisakah saya membawa palet komunitas saya sendiri?

Ya. Halaman palet komunitas dan papan palet keduanya memiliki entri "Visualize" yang membawa palet melalui tautan.

Apakah kontras teks yang rendah akan ditandai?

Ya. Ketika kontras teks-di-permukaan turun di bawah WCAG 4.5:1, sebuah lencana muncul di baris peran sehingga Anda dapat memperbaikinya sebelum mengirimkan.