Penjana Warna Cerah & Gelap

Semua alat

Jana julat penuh tint dan warna gelap daripada satu warna — pilih langkah cerah/gelap dan bilangan warna, kemudian salin sebarang nilai dengan segera.

Warna asas
Langkah
%
Seberapa cerah/gelap setiap warna bertambah, setiap langkah (1–25%).
Bilangan warna
Berapa banyak tint dan warna gelap untuk dijana pada setiap sisi warna asas.
Kecerunan
Warna yang dijana

Pilih warna asas, peratusan langkah dan bilangan — setiap tint dan warna gelap dikira dengan segera dalam pelayar anda.

Mengenai Penjana Warna Cerah & Gelap

Color Shades Generator mengembangkan satu warna menjadi julat lengkap tint dan shade. Berikan warna asas dan ia menghasilkan tint yang semakin cerah pada satu sisi dan shade yang semakin gelap pada sisi lain — anak tangga gaya klasik 50-hingga-900 yang digunakan dalam sistem reka bentuk moden.

Dua kawalan membentuk output: peratusan langkah menetapkan berapa cerah atau gelap setiap shade menjadi (1–25% setiap langkah), dan bilangan menetapkan berapa banyak tint dan shade muncul pada setiap sisi asas, sehingga sepuluh. Jalur kecerunan mempratonton keseluruhan anak tangga sekali pandang.

Penjanaan berlaku serta-merta dalam pelayar anda semasa anda menaip — tiada apa-apa dihantar ke pelayan. Salin mana-mana nilai tunggal, senarai penuh, atau keseluruhan anak tangga sebagai pemboleh ubah CSS, sedia dimasukkan ke dalam fail token reka bentuk atau skala warna gaya Tailwind.

Cara menggunakan Penjana Warna Cerah & Gelap

  1. Pilih warna asas dengan pemilih warna atau taip nilai; klik "Random color" untuk inspirasi.
  2. Tetapkan peratusan langkah untuk mengawal sejauh mana setiap shade menjadi cerah atau gelap.
  3. Pilih bilangan shade untuk menentukan berapa banyak tint dan shade muncul pada setiap sisi.
  4. Klik satu swatch untuk menyalinnya, atau guna "Copy all" dan "Copy CSS variables" untuk keseluruhan anak tangga.

Soalan lazim

Ya, sepenuhnya. Semua tint dan shade dikira secara langsung dalam pelayar anda, jadi tiada kos, tiada akaun dan tiada had berapa banyak anak tangga yang anda jana.

Tint ialah warna asas anda yang dicampur ke arah putih (lebih cerah), manakala shade ialah asas yang dicampur ke arah hitam (lebih gelap). Penjana ini menghasilkan kedua-dua arah sekali gus, dilabel "Tints (lighter)" dan "Shades (darker)" mengelilingi warna asas anda.

Tetapkan bilangan kepada 4 atau 5 setiap sisi supaya anda mendapat sembilan hingga sebelas swatch keseluruhan, dengan asas anda di tengah. Langkah kira-kira 8–10% biasanya memberikan jarak yang serupa dengan skala 50–900 yang digunakan oleh rangka kerja popular.

Langkah kecil (3–6%) memberikan variasi hover dan sempadan yang halus; langkah sederhana (8–12%) sesuai untuk anak tangga sistem reka bentuk yang lengkap; langkah besar (15–25%) mencipta set kontras tinggi seperti poster. Perhatikan pratonton kecerunan — anak tangga yang baik sepatutnya menggelap secara sekata tanpa jalur.

Ya. "Copy CSS variables" menghasilkan keseluruhan anak tangga sebagai sifat tersuai CSS bernama, dan "Copy all" memberikan senarai nilai biasa yang boleh anda tampal di mana-mana, daripada peta SCSS hingga objek tema JavaScript.
Kongsi ini
Alat Berkaitan
Penjana Palet Warna Bina palet warna yang harmoni daripada roda warna interaktif — gunakan peraturan harmoni seperti analogus, komplementari atau triad, kemudian salin sebarang nilai dengan segera. Percuma
Pencampur Warna Campurkan warna mula ke warna akhir merentasi sehingga 10 langkah — pratonton kecerunan, ambil setiap warna dan salin sebarang format dengan segera. Percuma
Pengeksport Palet Tampal atau import set warna dan eksportnya dengan segera ke pemboleh ubah CSS, SCSS, konfigurasi Tailwind, JSON atau swatch SVG — langkah terakhir untuk sebarang palet. Percuma
Pengekstrak Warna Imej Tarik palet warna yang halus dan sedia salin daripada sebarang imej. Percuma
Palet Warna Selamat Web Layari 216 warna selamat web klasik sebagai grid swatch yang boleh diklik — isih mengikut rona atau susunan kubus, tapis mengikut hex, dan salin sebarang nilai HEX atau rgb() dengan segera. Percuma
Direktori Pasangan Fon & Google Fonts Layari direktori terkurasi Google Fonts popular dengan pratonton langsung, tapis mengikut kategori dan cari mengikut nama, kemudian salin CSS sedia tampal dan terokai cadangan pasangan fon — semuanya dalam pelayar anda. Percuma
Carian popular
penjana ton warna ton terang dan gelap cerahkan dan gelapkan warna ton sesuatu warna penjana warna tint jana ton warna
Perlukan bantuan?
Menemui masalah dengan alat ini? Beritahu pasukan kami.
Laporkan masalah

Tambah alat percuma ini ke laman web anda sendiri — salin dan tampal kod di bawah.