Alat berkuasa sass yang berguna untuk membuat palet warna seimbang

Bagi mereka yang mungkin tidak datang dari latar belakang reka bentuk, memilih palet warna sering berdasarkan keutamaan peribadi. Memilih warna mungkin dilakukan dengan alat warna dalam talian, pensampelan dari imej, "meminjam" dari jenama kegemaran, atau semacam memilih secara rawak dari roda warna sehingga palet "hanya terasa betul."

Matlamat kami adalah untuk lebih memahami apa yang menjadikan palet "merasa betul" dengan meneroka sifat -sifat warna utama dengan fungsi warna sass. Pada akhirnya, anda akan menjadi lebih akrab dengan:

• Nilai grafik pencahayaan, ringan, dan ketepuan palet untuk membantu membina palet seimbang
• Kepentingan membina kontras yang boleh diakses ke dalam alat anda
• Fungsi Sass Lanjutan untuk melanjutkan untuk penerokaan anda sendiri, termasuk codepen yang anda boleh memanipulasi dan garpu

Walau bagaimanapun, apa yang anda dapati, bagaimanapun, adalah warna di web adalah pertempuran perkakasan berbanding persepsi manusia.

Apa yang menjadikan warna grafik berguna

Anda mungkin biasa dengan cara mengisytiharkan warna dalam stylesheets, seperti nilai RGB dan RGBA, nilai HSL dan HSLA, dan kod HEX.

 RBG (102,51,153)
RBGA (102,51,153, 0.6)
HSL (270, 50%, 40%)
HSLA (270, 50%, 40%, 0.6)
#663399

Nilai -nilai tersebut memberikan arahan peranti tentang cara menjadikan warna. Atribut warna yang lebih mendalam boleh didedahkan secara programatik dan dimanfaatkan untuk memahami bagaimana warna berkaitan dengan palet yang lebih luas.

Nilai atribut warna grafik ialah kita mendapat gambaran yang lebih lengkap tentang hubungan antara warna. Ini mendedahkan mengapa koleksi warna mungkin atau mungkin tidak terasa bersama. Grafik pelbagai atribut warna membantu membayangkan apa pelarasan boleh dibuat untuk membuat palet yang lebih harmoni. Kami akan melihat contoh bagaimana untuk menentukan apa yang harus diubah dalam bahagian kemudian.

Dua pengukuran berguna yang dapat kami dapati dengan mudah menggunakan fungsi warna sass terbina dalam adalah ringan dan ketepuan.

• Cahaya merujuk kepada campuran putih atau hitam dengan warna.
• Ketepuan merujuk kepada intensiti warna, dengan ketepuan 100% mengakibatkan warna yang paling murni (tiada kelabu hadir).

 $ warna: Rebeccapurple;

@Debug Lightness ($ warna);
// 40%

@debug ketepuan ($ warna);
// 50%;

Walau bagaimanapun, pencahayaan boleh dikatakan menjadi atribut warna yang paling berguna. Luminance, seperti yang diwakili dalam alat kami, dikira menggunakan formula WCAG yang menganggap ruang warna SRGB. Luminance digunakan dalam pengiraan kontras, dan sebagai konsep yang lebih besar, juga bertujuan untuk lebih dekat untuk mengukur persepsi manusia tentang kecerahan relatif untuk menilai hubungan warna. Ini bermakna bahawa pelbagai nilai luminance yang lebih ketat di kalangan palet mungkin dianggap lebih seimbang dengan mata manusia. Tetapi mesin tidak dapat dimakan, dan terdapat pengecualian kepada peraturan ini yang mungkin anda hadapi semasa anda memanipulasi nilai palet. Untuk maklumat yang lebih luas mengenai luminance, dan ruang warna yang unik yang dipanggil Cielab yang bertujuan untuk lebih tepatnya mewakili persepsi manusia tentang keseragaman warna, lihat pautan pada akhir artikel ini.

Di samping itu, kontras warna adalah sangat penting untuk kebolehcapaian, terutamanya dari segi keterbacaan dan membezakan unsur -unsur UI, yang boleh dikira secara programatik. Itu penting kerana ia bermakna perkakas boleh menguji nilai lulus. Ia juga bermakna algoritma boleh, sebagai contoh, mengembalikan warna teks yang sesuai apabila diluluskan dalam warna latar belakang. Jadi alat kami akan menggabungkan pemeriksaan kontras sebagai cara tambahan untuk mengukur cara menyesuaikan palet anda.

Fungsi-fungsi yang ditunjukkan dalam projek ini boleh diekstrak untuk membantu merancang palet sistem reka bentuk yang selamat, atau dibakar ke dalam rangka kerja SASS yang membolehkan menentukan tema tersuai.

Sass sebagai alat bangunan palet

SASS menyediakan beberapa ciri pengaturcaraan tradisional yang menjadikannya sempurna untuk keperluan kita, seperti membuat dan meleleh melalui tatasusunan dan memanipulasi nilai dengan fungsi tersuai. Apabila ditambah dengan IDE dalam talian, seperti Codepen, yang mempunyai pemprosesan masa nyata, kita pada dasarnya boleh membuat aplikasi web untuk menyelesaikan masalah tertentu seperti membina palet warna.

Berikut adalah pratonton alat yang akan kami gunakan:

Ciri -ciri pembina palet sass

• Ia mengeluarkan graf responsif terkawal nisbah aspek untuk penempatan titik plot yang tepat dan perbandingan nilai.
• Ia memanfaatkan hasil fungsi warna SASS dan pengiraan matematik untuk plot dengan betul pada skala 0-100%.
• Ia menghasilkan kecerunan untuk memberikan pandangan yang lebih tradisional "swatch".
• Ia menggunakan fungsi SASS terbina dalam untuk mengekstrak nilai ketepuan dan ringan.
• Ia mewujudkan fungsi luminance dan kontras (bercabang dari komponen web bahan selain menghubungkan dalam nilai saluran warna linear yang diperlukan).
• Ia mengembalikan warna teks yang sesuai untuk latar belakang yang diberikan, dengan pemboleh ubah tetapan untuk menukar nisbah yang digunakan.
• Ia menyediakan fungsi untuk ketepuan dan cahaya berskala seragam di seluruh palet tertentu.

Menggunakan pembina palet

Untuk memulakan, anda mungkin ingin bertukar dari antara palet contoh yang disediakan untuk merasakan bagaimana nilai graf berubah untuk pelbagai jenis julat warna. Cukup salin nama pembolehubah palet dan swapnya untuk $ lalai sebagai nilai pembolehubah palet $ yang boleh didapati di bawah komen swap pembolehubah palet.

Seterusnya, cuba beralih nilai pemboleh ubah kontrase $ kontras antara nisbah yang telah ditetapkan, terutamanya jika anda kurang akrab dengan memastikan kontras pas Garis panduan WCAG.

Kemudian cuba menyesuaikan $ palet-skala-cahaya atau $ palet-skala-tepu nilai. Mereka memakan fungsi palet dan berskala seragam pengukuran di seluruh palet (sehingga batas warna individu).

Akhirnya, pergi menambah palet anda sendiri, atau menukar beberapa warna dalam contoh. Alat ini adalah cara yang baik untuk meneroka fungsi warna sass untuk menyesuaikan sifat -sifat tertentu warna, yang sebahagiannya ditunjukkan dalam palet lalai $.

Mentafsirkan graf dan mewujudkan palet yang seimbang dan boleh diakses

Alat grafik lalai untuk memaparkan luminance kerana ia menjadi penunjuk yang paling dipercayai dari palet seimbang, seperti yang dibincangkan sebelumnya. Bergantung pada keperluan anda, ketepuan dan ringan boleh menjadi metrik yang berguna dengan sendirinya, tetapi kebanyakannya adalah isyarat yang dapat membantu menunjuk kepada apa yang perlu menyesuaikan diri untuk membawa luminance palet lebih sesuai. Pengecualian mungkin mewujudkan skala ringan berdasarkan setiap nilai dalam palet anda yang ditubuhkan. Anda boleh bertukar kepada contoh $ StripeBlue untuk itu.

Palet lalai $ sebenarnya memerlukan pelarasan untuk mendekati luminance yang seimbang:

Palet yang menunjukkan pencahayaan yang seimbang adalah sampel dari jalur ($ jalur):

Di sinilah alat itu menjemput peralihan minda. Daripada memanipulasi roda warna, ia memanfaatkan fungsi SASS untuk menyesuaikan atribut warna secara programatik.

Semak graf ketepuan untuk melihat sama ada anda mempunyai ruang untuk bermain dengan intensiti warna. Pelarasan yang disyorkan saya adalah untuk membungkus nilai warna anda dengan fungsi warna skala dan lulus nilai ketepuan $ yang diselaraskan, contohnya: Skala-warna (#41B880, $ tepu: 60%). Kelebihan warna skala adalah bahawa ia dengan lancar menyesuaikan nilai berdasarkan peratus yang diberikan.

Cahaya dapat membantu menjelaskan mengapa dua warna merasa berbeza dengan memberikan nilai kepada kecerahan mereka yang diukur terhadap pencampurannya dengan putih atau hitam. Dalam palet lalai $, fungsi warna perubahan digunakan untuk ungu untuk menyelaraskan nilai Lightness relatifnya dengan cahaya yang dikira () nilai yang digunakan untuk merah.

Fungsi warna skala juga membolehkan penggabungan kedua-dua ketepuan $ ketepuan dan nilai ringan, yang sering menjadi yang paling berguna. Perhatikan yang disediakan oleh pelindung boleh menjadi negatif.

Dengan menggunakan fungsi SASS dan memeriksa graf ketepuan dan ringan, $ defaultBalancedLuminance mencapai pencahayaan yang seimbang. Palet ini juga menggunakan fungsi Map-Get untuk menyalin nilai dari palet lalai $ dan memohon pelarasan selanjutnya dan bukannya menimpa mereka, yang berguna untuk menguji pelbagai variasi seperti mungkin peralihan warna merentasi palet.

Ambil satu minit untuk meneroka fungsi warna lain yang tersedia.

Sebaliknya berlaku apabila mempertimbangkan bagaimana warna palet sebenarnya akan digunakan dalam UI. Alat ini mungkir kepada kontras AA yang paling sesuai untuk semua teks: 4.5. Sekiranya anda membina UI cahaya, maka pertimbangkan bahawa apa -apa warna yang digunakan pada teks harus mencapai kontras yang sesuai dengan putih ketika menyesuaikan diri dengan luminance, yang ditunjukkan oleh warna pusat titik plot.

Petua: Grafik disediakan dengan latar belakang yang telus, jadi anda boleh menambah peraturan latar belakang pada badan jika anda sedang membangun untuk UI yang lebih gelap.

Bacaan lanjut

Warna adalah topik yang luas dan artikel ini hanya mencecah aspek yang berkaitan dengan fungsi SASS. Tetapi untuk benar -benar memahami bagaimana untuk mencipta sistem warna yang harmoni, saya mencadangkan sumber -sumber berikut:

• Ruang Warna-adalah menyelam yang sangat mengagumkan dengan model interaktif pelbagai ruang warna dan bagaimana ia dikira.
• Memahami Warna dan Luminance-Gambaran keseluruhan mesra pemula dari MDN pada warna dan pencahayaan dan hubungan mereka dengan aksesibiliti.
• Ruang warna seragam yang seragam-lebih banyak maklumat mengenai sistem warna seragam persepsi, dengan intro alat HSLUV yang menukarkan nilai dari ruang warna HSL yang lebih biasa ke ruang warna CIELUV yang disesuaikan.
• Sistem warna yang boleh diakses - Kajian kes dari Stripe mengenai pengalaman mereka membina sistem warna yang boleh diakses dengan membuat alat tersuai (yang mengilhami penerokaan dan artikel ini).
• Panduan nerd untuk warna di web-ini adalah penjelajahan hebat mekanik warna di web, yang tersedia di sini di Trik CSS.
• Pencari kontras Tanaguru - alat yang luar biasa untuk membantu jika anda berjuang untuk menyesuaikan warna untuk mencapai kontras yang boleh diakses.
• ColorBox - Aplikasi web dari Lyft yang selanjutnya meneroka skala warna melalui grafik.
• Merancang Warna Sistematik-Menggambarkan usaha luar biasa UI Mineral untuk mewujudkan tanjakan warna untuk menyokong penangkapan yang konsisten melalui palet yang dihormati.
• Bagaimana kami merancang palet warna baru di Tableau 10 - Tableau yang terdedah ciri -ciri alat tersuai mereka yang membantu mereka membuat palet yang disegarkan berdasarkan cielab, termasuk gambaran yang boleh didekati ruang warna itu.

Atas ialah kandungan terperinci Alat berkuasa sass yang berguna untuk membuat palet warna seimbang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!