Нажмите, чтобы найти цветовую схему с ColourCode

Получение правильно Цветовая схема может потребовать от дизайнеров больших ручных усилий (и субъективных мнений). Хорошая новость заключается в том, что есть инструменты, которые могут сделать вашу жизнь проще. Ранее мы рассмотрели Adobe Kuler для iOS, а также удобный инструмент под названием 0to255, который поможет вам легко получить HEX-коды для цветовых оттенков. На этот раз мы рассмотрим ColourCode.

ColourCode это веб-инструмент для быстрого поиска цветовых схем. ColourCode позволяет выбирать цвета на основе значений HSL (Hue, Saturation, Lightness). Он имеет несколько режимов, которые позволяют выбирать дополнительные цвета всего несколькими щелчками мыши, а также вы можете загрузить образцы цветов в нескольких форматах.

Рекомендуемое чтение: лучшие инструменты цвета для веб-дизайнеров

Использование ColourCode

Как только вы на страницаНаведите указатель мыши на любое место на странице, чтобы получить цвет, и его цветовой код. Цвета будут меняться всякий раз, когда вы перемещаете курсор. Если вам нравится цвет, который вы видите, нажмите на него, чтобы зафиксировать ваш выбор. Это так просто.

Чтобы добавить другой цвет, нажмите «Плюс» справа и повторите парение и щелчок, чтобы зафиксировать другой цвет. Чтобы удалить выбор цвета, просто нажмите значок корзины в середине.

Так вы выбираете образцы цветов в режиме свободной сборки. Есть несколько других режимов выбора цветовых образцов.

комплемент

Analogic

Монохромный

Помимо этих 4 режимов, есть еще 5, которые вы можете изучить на сайте.
Регулировка вручную
Внизу каждого цвета находится значок стрелки вниз. При нажатии на него отображаются подробные сведения о цвете и другие параметры, такие как возможность изменить цветовой режим вручную (нажав на него) среди таких форматов, как HEX, RGB, HSL, CMY, CMYK, XYZ или YXY. Кроме того, вы можете использовать цветные ползунки, чтобы внести изменения.

Получать цвет

Когда вы определили цвет, который хотите использовать, вы можете получить его в формате SCSS, LESS или PNG. К сожалению, ColourCode не предоставляет вам встроенный редактор кода для копирования и вставки исходного кода. Сначала вы должны загрузить его, а затем открыть его в редакторе рабочего стола.

Несмотря на это, источник – только однострочный определитель цвета. Ниже приведен исходный код в файле SCSS:

$ color: # a8e2ba;

И этот в МЕНЬШЕ:

@color: # a8e2ba;