tigtools

Penjana Palet Warna

Mulakan dengan satu warna asas, pilih harmoni warna dan salin palet dalam format yang digunakan projek anda.

Berjalan dalam pelayar anda Tanpa pendaftaran

Palet

  • #3366cc
  • #8c6500

Warna terkunci kekal sama apabila anda menukar warna asas.

Eksport sebagai

Cara menggunakannya

  1. Masukkan warna asas atau pilih satu. “Asas rawak baharu” memilih satu untuk anda.
  2. Pilih satu harmoni. “Lorek dan tona” membina skala 11 langkah daripada sangat cerah kepada sangat gelap.
  3. Kunci mana-mana warna yang ingin anda kekalkan, kemudian teruskan meneroka warna asas yang lain.
  4. Pilih HEX, sifat tersuai CSS atau JSON, tetapkan nama dan salin kod.

Cara ia berfungsi

Harmoni ditemui dengan memutarkan rona di sekitar roda warna: komplementari menambah rona bertentangan (180°), analog menambah jiran berjarak 30° dan 60° pada setiap sisi, triadik menggunakan tiga rona berjarak 120°, tetradik empat rona berjarak 90°, dan split-komplementari dua rona bersebelahan dengan pelengkap (150° dan 210°).

Putaran dilakukan dalam OKLCH, bukan HSL. OKLCH mengekalkan kecerahan tertanggap secara stabil, jadi kuning dan biru dalam palet yang sama kelihatan sama terang, bukan kuning yang menyilaukan. Apabila warna yang diputar berada di luar apa yang boleh dipaparkan oleh skrin sRGB, nilai chroma dikurangkan sehingga muat, sambil mengekalkan kecerahan dan rona.

Skala lorek dan ton menggunakan langkah kecerahan OKLCH tetap yang dinamakan 50 hingga 950, serupa dengan penamaan yang digunakan oleh Tailwind CSS, dengan nilai chroma dikurangkan berhampiran putih dan hitam supaya ton paling cerah tidak kelihatan neon. Harmoni ialah titik permulaan: semak pasangan teks dan latar belakang dengan penyemak kontras sebelum menggunakannya untuk kandungan.

Contoh

Warna jenama dengan aksen

Asas #3366cc dengan 'Komplementari' menambah #8c6500, oker hangat dengan kecerahan OKLCH yang sama. Pasangan biru dan jingga-kuning ialah pilihan lazim untuk aksen di sebelah jenama biru.

Token reka bentuk untuk pustaka komponen

Pilih “Warna gelap dan cerah”, tetapkan nama kepada “primary” dan eksport pemboleh ubah CSS. Anda akan dapat --primary-50 hingga --primary-950, sedia untuk latar belakang (50–100), sempadan (200–300) dan teks (700–900).

Mengekalkan satu warna sambil meneroka

Kunci warna kedua palet triadik, kemudian cuba warna asas yang berbeza. Sampel warna yang dikunci mengekalkan nilai HEX-nya sementara yang lain berubah.

Soalan Lazim

Mengapa warna saya berbeza daripada alat roda warna HSL?

Alat ini memutar hue dalam OKLCH, ruang warna persepsi. Sudut hue-nya tidak sejajar sepenuhnya dengan HSL, jadi warna “bertentangan” untuk sesuatu warna mungkin sedikit berbeza daripada yang diberikan oleh alat HSL.

Bolehkah saya menggunakan JSON dalam Tailwind CSS?

JSON memetakan nama kepada nilai HEX, bentuk yang sama diterima Tailwind untuk warna dalam konfigurasi temanya. Dalam Tailwind 4, anda juga boleh menampal pemboleh ubah CSS ke dalam blok @theme selepas menamakannya semula kepada --color-…

Adakah palet yang dijana boleh diakses?

Tidak secara automatik. Keharmonian tidak menyatakan apa-apa tentang kontras antara teks dan latar belakang. Semak setiap pasangan yang anda rancang untuk digunakan dengan Pemeriksa Kontras.

Privasi

Palet dijana dalam pelayar anda. Warna anda tidak dihantar ke mana-mana atau disimpan.