color schemer

Цветовой комбинатор

Цветовые схемы стали проще с помощью Sass

Color Schemer — это мощный набор инструментов для работы с цветом для Sass. Он расширяет существующие функции цвета Sass и добавляет такие вещи, как манипулирование RYB, * set-hue, * set-lightness, оттенок, оттенок и многое другое. Он также использует эти инструменты, добавляя полнофункциональный инструмент цветовой схемы, который позволяет вам установить один основной цвет и создавать на его основе целые цветовые схемы.

Установить

gem install color-schemer в свой терминал.

require 'color-schemer' в файл конфигурации Compass.

@import 'color-schemer' в вашу таблицу стилей.

Использование схемы цвета

Новые функции цвета

• tint($color, $amount) — Смешивает цвет с белым. Большинству дизайнеров это гораздо удобнее, чем lighten() .
• shade($color, $amount) — То же, что и выше, но добавляет черный цвет. Дизайнеры могут предпочесть его darken() .
• equalize($color) — Возвращает полностью насыщенный цвет.
• set-red($color, $red) — Устанавливает количество красного цвета в цвете.
• set-green($color, $green) — Устанавливает количество зеленого цвета в цвете.
• set-blue($color, $blue) — Устанавливает количество синего цвета в цвете.
• set-hue($color, $hue) — Устанавливает оттенок цвета.
• set-saturation($color, $saturation) — Устанавливает насыщенность цвета.
• set-lightness($color, $lightness) — Устанавливает яркость цвета.
• set-alpha($color, $alpha) — Устанавливает альфу цвета.

Цветовые функции RYB

Color Schemer добавляет ряд функций для управления красно-желтым и синим цветовым кругом. Компьютерный цвет рассчитывается в красном, зеленом и синем цветах, что технически более правильно, но художники и дизайнеры уже давно используют RYB, чтобы добиться лучших цветовых соотношений.

• ryb-hue($color) — Находит оттенок цвета на цветовом круге RYB.
• set-ryb-hue($color, $hue) — Устанавливает оттенок цвета на основе цветового круга RYB.
• ryb-adjust-hue($color, $degrees) — Регулирует оттенок цвета вокруг цветового круга RYB.
• ryb-complement($color) — Находит дополнение цвета RYB.
• ryb-invert($color) — Инвертирует цвет вокруг цветового круга RYB.

Цветовая функция CMYK

• cmyk($cyan, $magenta, $yellow, $black) — Определите цвета, используя значения CMYK.

Цветовая схема

функции

Разместите эти функции там, где вы хотите использовать цвет из схемы. Вы можете манипулировать ими дальше, чтобы они работали с вашим дизайном. Их следует рассматривать как хорошую отправную точку, так как вы, возможно, захотите внести некоторые дополнительные изменения.

• cs-primary() — основной цвет.
• cs-secondary() — вторичный цвет.
• cs-tertiary() — третичный цвет.
• cs-quadrary() — квадратичный цвет.

Переменные

Вы можете изменить результат выполнения вышеперечисленных функций, установив эти глобальные переменные:

• $cs-primary — установить основной цвет в цветовой схеме.
• $cs-scheme — моно, дополнение, триада, тетрада, аналог, акцентно-аналог.
• $cs-hue-offset — Величина регулировки оттенка в схемах.
• $cs-brightness-offset — Уровень регулировки яркости в схемах.
• $cs-color-model — RGB, RYB

Режимы наложения

Color Schemer включает в себя режимы наложения SCSS, которые позволяют выполнять смешивание цветов в стиле Photoshop.

Из коробки

Хотя вы можете использовать эти функции «из коробки», возможно, вам захочется их немного усовершенствовать. Я предлагаю вам создавать с их помощью переменные на тот случай, если вы захотите внести изменения/переместить что-то, вместо того, чтобы полагаться на них как есть.

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

Тестирование вашей цветовой схемы

Также включен удобный миксин для проверки цветовых схем. Просто включите его в список своих цветов, и он добавит цветную полосу над вашей страницей.

 @include cs-test ( red green blue );

Вдохновение

• http://colorschemedesigner.com/

Лицензия

Авторские права (c) 2011 Скотт Келлум (@scottkellum) и Мейсон Венделл (@canarymason)

Настоящим разрешение бесплатно предоставляется любому лицу, получившему копию этого программного обеспечения и связанных с ним файлов документации («Программное обеспечение»), на использование Программного обеспечения без ограничений, включая, помимо прочего, права на использование, копирование, изменение, объединение. публиковать, распространять, сублицензировать и/или продавать копии Программного обеспечения, а также разрешать лицам, которым предоставлено Программное обеспечение, делать это при соблюдении следующих условий:

Вышеупомянутое уведомление об авторских правах и настоящее уведомление о разрешении должны быть включены во все копии или существенные части Программного обеспечения.

ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ, ГАРАНТИЯМИ ТОВАРНОЙ ЦЕННОСТИ, ПРИГОДНОСТИ ДЛЯ ОПРЕДЕЛЕННОЙ ЦЕЛИ И НЕНАРУШЕНИЯ ПРАВ. НИ ПРИ КАКИХ ОБСТОЯТЕЛЬСТВАХ АВТОРЫ ИЛИ ОБЛАДАТЕЛИ АВТОРСКИХ ПРАВ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ЗА ЛЮБЫЕ ПРЕТЕНЗИИ, УБЫТКИ ИЛИ ДРУГУЮ ОТВЕТСТВЕННОСТЬ, БУДЬ В ДЕЙСТВИЯХ ПО КОНТРАКТУ, ПРАВОНАРУШЕНИЮ ИЛИ ДРУГИМ ОБРАЗОМ, ВОЗНИКАЮЩИЕ ОТ, ИЗ ИЛИ В СВЯЗИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ИЛИ ДРУГИМИ СДЕЛКАМИ, ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ.