color schemer

Perencana Warna

Skema warna menjadi mudah dengan Sass

Perencana warna adalah perangkat warna yang kuat untuk Sass. Ini memperluas fungsi warna Sass yang ada dan menambahkan hal-hal seperti manipulasi RYB, * set-hue, * set-lightness, tint, shade dan banyak lagi. Ini juga memanfaatkan alat-alat ini dengan menambahkan alat skema warna berfitur lengkap yang memungkinkan Anda mengatur satu warna primer dan membuat skema warna keseluruhan di sekitarnya.

Memasang

gem install color-schemer di terminal Anda.

require 'color-schemer' ke file konfigurasi Kompas Anda.

@import 'color-schemer' ke stylesheet Anda.

Menggunakan Perencana Warna

Fungsi warna baru

• tint($color, $amount) — Mencampur warna dengan putih. Kebanyakan desainer lebih nyaman dengan ini daripada lighten() .
• shade($color, $amount) — Sama seperti di atas tetapi menambahkan warna hitam. Desainer mungkin lebih menyukainya daripada darken() .
• equalize($color) — Mengembalikan warna saturasi penuh.
• set-red($color, $red) — Mengatur jumlah warna merah dalam suatu warna.
• set-green($color, $green) — Mengatur jumlah warna hijau dalam suatu warna.
• set-blue($color, $blue) — Mengatur jumlah warna biru dalam suatu warna.
• set-hue($color, $hue) — Mengatur corak warna.
• set-saturation($color, $saturation) — Mengatur saturasi warna.
• set-lightness($color, $lightness) — Mengatur kecerahan warna.
• set-alpha($color, $alpha) — Mengatur alfa suatu warna.

Fungsi warna RYB

Perencana warna menambahkan sejumlah fungsi untuk memanipulasi roda warna merah kuning dan biru. Warna komputer dihitung dalam warna merah hijau dan biru yang secara teknis lebih tepat, namun seniman dan desainer telah menggunakan RYB selama bertahun-tahun untuk menghasilkan hubungan warna yang lebih baik.

• ryb-hue($color) — Akan menemukan corak warna pada roda warna RYB.
• set-ryb-hue($color, $hue) — Mengatur rona warna berdasarkan roda warna RYB.
• ryb-adjust-hue($color, $degrees) — Akan menyesuaikan corak warna di sekitar roda warna RYB.
• ryb-complement($color) — Menemukan komplemen RYB suatu warna.
• ryb-invert($color) — Membalikkan warna di sekitar roda warna RYB.

Fungsi warna CMYK

• cmyk($cyan, $magenta, $yellow, $black) — Tentukan warna menggunakan nilai CMYK.

Skema warna

fungsi

Letakkan fungsi-fungsi ini di mana pun Anda ingin menggunakan warna dari skema. Anda dapat memanipulasinya lebih jauh agar sesuai dengan desain Anda. Ini harus dianggap sebagai titik awal yang baik karena Anda mungkin ingin mengubahnya sedikit lebih jauh.

• cs-primary() — warna primer.
• cs-secondary() — warna sekunder.
• cs-tertiary() — warna tersier.
• cs-quadrary() — warna kuadrat.

Variabel

Anda dapat mengubah hasil fungsi di atas dengan mengatur variabel global berikut:

• $cs-primary — mengatur warna primer dalam skema warna.
• $cs-scheme — mono, komplemen, triad, tetrad, analogik, analogi beraksen
• $cs-hue-offset — Jumlah penyesuaian rona dalam skema.
• $cs-brightness-offset — Jumlah penyesuaian kecerahan dalam skema.
• $cs-color-model — rgb, ryb

Mode campuran

Perencana warna menyertakan Mode Campuran SCSS yang memungkinkan Anda melakukan pencampuran warna gaya photoshop.

Di luar kotak

Meskipun Anda dapat menggunakan fungsi-fungsi ini secara langsung, Anda mungkin ingin menyempurnakannya sedikit lagi. Saya sarankan Anda membuat variabel dengan variabel tersebut untuk berjaga-jaga jika Anda ingin melakukan penyesuaian/memindahkan sesuatu daripada mengandalkan variabel apa adanya.

 $primary : cs-primary ();
$secondary : darken ( cs-secondary (), 10 % ); // too light, darkening this up a bit.
$tertiary : cs-tertiary ();
$quadrary : cs-quadrary ();

Menguji skema warna Anda

Juga disertakan mixin yang berguna untuk menguji skema warna. Cukup sertakan dengan daftar warna Anda dan itu akan menambahkan bilah warna di atas halaman Anda.

 @include cs-test ( red green blue );

Inspirasi

• http://colorschemedesigner.com/

Lisensi

Hak Cipta (c) 2011 Scott Kellum (@scottkellum) dan Mason Wendell (@canarymason)

Izin dengan ini diberikan, secara gratis, kepada siapa pun yang memperoleh salinan perangkat lunak ini dan file dokumentasi terkait ("Perangkat Lunak"), untuk menggunakan Perangkat Lunak tanpa batasan, termasuk tanpa batasan hak untuk menggunakan, menyalin, memodifikasi, menggabungkan , mempublikasikan, mendistribusikan, mensublisensikan, dan/atau menjual salinan Perangkat Lunak, dan mengizinkan orang yang menerima Perangkat Lunak untuk melakukan hal tersebut, dengan tunduk pada ketentuan berikut:

Pemberitahuan hak cipta di atas dan pemberitahuan izin ini akan disertakan dalam semua salinan atau sebagian besar Perangkat Lunak.

PERANGKAT LUNAK INI DISEDIAKAN "APA ADANYA", TANPA JAMINAN APA PUN, TERSURAT MAUPUN TERSIRAT, TERMASUK NAMUN TIDAK TERBATAS PADA JAMINAN KELAYAKAN UNTUK DIPERDAGANGKAN, KESESUAIAN UNTUK TUJUAN TERTENTU, DAN TIDAK TERBATAS PADA PELANGGARAN. DALAM KEADAAN APA PUN PENULIS ATAU PEMEGANG HAK CIPTA TIDAK BERTANGGUNG JAWAB ATAS KLAIM, KERUSAKAN ATAU TANGGUNG JAWAB LAINNYA, BAIK DALAM TINDAKAN KONTRAK, HUKUM ATAU LAINNYA, YANG TIMBUL DARI, DARI ATAU SEHUBUNGAN DENGAN PERANGKAT LUNAK ATAU PENGGUNAAN ATAU HAL-HAL LAIN DALAM PERANGKAT LUNAK.