tints and shades

Generator Tint & Shade

Pengembangan Lokal

Proyek ini menggunakan Eleventy Static Site Generator dan menyebarkan ke halaman GitHub menggunakan aksi GitHub dari Shohei Ueda.

Prasyarat: Node.js 14+

1. Klon proyek ini.
2. Arahkan ke proyek di terminal Anda.
3. Instal Ketergantungan: npm install .
4. Mulailah server: npm run start .
5. Arahkan ke localhost:8080 di browser Anda.

Apa itu generator warna & naungan?

Tujuan dari alat ini adalah untuk secara akurat menghasilkan warna (putih murni ditambahkan) dan nuansa (hitam murni ditambahkan) dari warna hex yang diberikan dalam peningkatan 10%.

Mengapa alat ini unik?

Itu menganggap matematika dengan serius. Dalam pengalaman saya, alat serupa, dapatkan perhitungan yang salah karena kesalahan pembulatan, preferensi pencipta, atau ketidakkonsistenan lainnya.

Pengujian menunjukkan bahwa output cocok dengan metode perhitungan Chrome DevTools serta beberapa metode yang mapan dan populer untuk memperoleh warna dan nuansa melalui SASS.

Kapan saya akan menggunakan ini?

Paling baik digunakan ketika Anda sudah memiliki beberapa warna dasar tetapi ingin warna gratis untuk gradien, perbatasan, latar belakang, bayangan atau elemen lainnya.

Ini berguna bagi desainer yang mungkin mengomunikasikan niat warna kepada pengembang yang menggunakan SASS atau PostCS di build mereka. Ini juga merupakan cara yang solid untuk dengan cepat mempratinjau seperti apa warna dan warna untuk warna dasar yang mungkin Anda pertimbangkan untuk desain Anda.

Saya juga pernah mendengar itu berguna bagi guru, profesional data, dan orang -orang yang membuat presentasi.

Metode perhitungan

Warna hex yang diberikan pertama kali dikonversi menjadi RGB. Kemudian setiap komponen warna RGB masing -masing memiliki perhitungan berikut yang dilakukan di atasnya.

• Tints: New value = current value + ((255 - current value) x tint factor)
• Nuansa: New value = current value x shade factor

Nilai baru dibulatkan jika perlu, dan kemudian dikonversi kembali ke hex untuk tampilan.

Contoh Perhitungan

Katakanlah kita ingin warna dan nuansa Rebecca Purple, #663399.

Tint 10%

1. #663399 dikonversi ke setara RGB 102, 51, 153
2. R: 102 + ((255 - 102) x .1) = 117.3 , dibulatkan menjadi 117
3. G: 51 + ((255 - 51) x .1) = 71.4 , dibulatkan ke 71
4. B: 153 + ((255 - 153) x .1) = 163.2 , dibulatkan ke 163
5. RGB 117, 71, 163 dikonversi menjadi setara dengan hex #7547A3

10% naungan

1. #663399 dikonversi ke setara RGB 102, 51, 153
2. R: 102 x .9 = 91.8 , dibulatkan ke 92
3. G: 51 x .9 = 45.9 , dibulatkan ke 46
4. B: 153 x .9 = 137.7 , dibulatkan ke 138
5. RGB 92, 46, 138 dikonversi ke hex setara dengan #5C2E8A

Umpan balik dan berkontribusi

Proyek ini adalah open source dan saya ingin bantuan Anda!

Jika Anda melihat bug atau ingin fitur ditambahkan, silakan ajukan masalah di github. Jika Anda tidak memiliki akun di sana, cukup kirimi saya detailnya.

Jika Anda seorang pengembang dan ingin membantu proyek, silakan komentari masalah terbuka atau buat yang baru dan komunikasikan niat Anda. Setelah kami menyetujui jalur ke depan, Anda hanya dapat membuat permintaan tarik dan membawanya ke garis finish.

Dukung proyek ini

Generator Tint & Shade akan selalu gratis tetapi dukungan Anda sangat dihargai.

• Beli saya kopi
• Venmo
• Aplikasi tunai
• Paypal

Kredit

Michael Edelstone merancang dan menyelenggarakan proyek dengan bantuan besar dari Nick Wing pada perhitungan warna.

Kami menggunakan perpustakaan open-source yang luar biasa ini di seluruh proyek:

• Anchorjs
• clipboard.js
• Menggelapkan
• Sebelas

Terima kasih banyak kepada Joel Carr, Sebastian Gutierrez, Tim Scalzo, Aman Agarwal, Aleksandr Hovhannisyan, Shubhendu Sen, dan Luis Escarrilla atas kontribusi mereka yang berharga.

Detail lainnya

• Tipografi: Work Sans oleh Wei Huang
• Warna: #000000, #FFFFFFF, #E96443, dan #CA228E
• Suka Desain Materi Google? Coba hal lain yang saya buat ini.