Мне всегда нелегко давалась работа с цветами. Так нелегко, что в конце концов решил сделать собственный редактор цветовых схем, построенный на принципах, которые мне кажутся разумными. И выложил его во всеобщее пользование, вдруг он окажется удобным не только для меня.
TL;DR
Редактор разбивает цвета в схеме на три группы: основные цвета, которые задают главные цветовые отношения, производные — вариации основных цветов по светлоте и насыщенности, и роли — именованные псведонимы цветов, предназначенные для удобства использования в коде.
Цветовая схема затем может быть экспортирована в CSS, SASS, LESS, Java Script и использоваться как в стилевых таблицах, так и непосредственно в коде.
Откуда ноги растут
Палитра любого проекта начинается с основных цветов. Затем, в процессе детализации дизайна, начальный набор обрастает кучей вариантов. Нужен «свой» черный для текста, потом вариант цвета текста для тонких линеек, более темная вариация цвета ссылок, чтобы они реагировали на мышку, и так далее и до бесконечности.
Так что первая идея — распределить цвета на две кучки: в одной пусть будут наши основные, продуманные всей командой цвета, а в другой — стопятьсот вариантов посветлее, побледнее, потемнее...
А вторая идея — разделить собственно цвета и их роли. Например, в начале проекта мы можем использовать один и тот же цвет для текста и, скажем, для отрисовки осей на графиках. Цвет один, роли две. И для одной из них мы потом, возможно, выберем другой цвет.
Итого получается три сущности с понятными взаимоотношениями между ними: основные цвета, связанные с ними производные и роли, которые могут быть связаны с любым цветом в палитре.
Такую схему работы легко реализовать с помощью SASS или другого препроцессора, но только для цветов определяемых в CSS. А нам может понадобиться использовать ту же палитру в коде.
А если и не понадобится, то обсуждать цвета с коллегой-иллюстратором, имея перед глазами простыню кода, не очень-то вежливо. Да мы вообще все тут визуалы.
Так родилась идея Палетуса. Тут есть графический интерфейс, похожий на цветовые палитры графических программ, цвета разделены на основные и производные, есть возможность задавать роли. И он умеет экспортировать все это в разные форматы.
Одно мааленькое но: пока что это альфа-версия, так что глюки возможны. Буду благодарен за багрепорты.
Как это работает
При первом открытии вы попадаете на экран Collection, где собраны все ваши схемы. По умолчанию там будет демонстрационная палитра, из двух основных цветов.
Все палитры сохраняются только в вашем браузере и никуда не передаются. Есть возможность сохранить палитру в файл, и потом загрузить в другом браузере, или переслать по почте.
Для знакомства с функционалом можно сразу кликнуть по тестовой палитре, она откроется в редакторе.
Верхняя строчка, с заголовком main — основные, базовые цвета. При клике на любой цвет откроется окошко редактирования цвета. Клик по закрашенному полю сверху откроет инструмент выбора цвета, в текущей версии это будет браузерный пикер, потом, может быть, приделаю там пикер своей мечты. Имя цвета тоже можно изменить.
Удаление цвета удалит также все цвета, связанные с ним. Если вы хотите вернуть палитру по умолчанию, удалите все имеющиеся палитры и она будет создана заново.
Для производного цвета инструментов чуть больше. Нижняя полоска выбирает один из базовых цветов, на основе которого будет создан производный, два ползунка задают изменения светлоты и насыщенности.
В самом нижнем ряду — роли. Для роли можно выбрать только цвет (ожидаемо).
Для добавления цветов в палитру используйте серую кнопку с плюсиком рядом с заголовком группы.
Для переименования палитры просто отредактируйте заголовок. Все изменения сохраняются автоматически.
Экспорт и импорт
Чтобы экспортировать палитру, нажмите кнопку Export. В появившемся окне кликайте по нужным пунктам и сохраняйте файлы.
Пробелы в названиях цветов в экспортированном файле будут заменены на подчеркивания, экспортируются все имеющиеся цвета и роли.
Импорт в разработке. На данный момент можно импортировать цвета из любого текстового файла, в котором встречаются определения цветов CSS (поддерживаются шестнадцатеричные числа типа #FFCCFF и цвета в формате rgb). Имена цветов (если файл их содержал) утратятся, все цвета будут импортированы как основные.
В принципе, уже этого достаточно для импорта из почти любого известного редактора цветовых схем — экспортируйте оттуда CSS и скормите его Палетусу.
И еще раз ссылку, по которой живет Палетус.
Best practices
Создавайте роли для всех элементов проекта. Нет ничего нуднее, чем менять цвет линий по всему коду только потому, что на старте казалось, что для них сгодится цвет текста, а в результате нашлось более тонкое решение.
Минимум основных цветов. Для цветовой гармонии достаточно двух-трех оттенков, все остальное можно сделать производными.
Если вдруг вам понравилось
Если Палетус (ну вдруг) окажется полезен вам, вы очень поможете развитию проекта своим лайком и репостом (кнопки шеринга внизу страницы). А если еще и напишете о багах или посоветуете что-то — так и вообще.
Что в планах
- Больше форматов импорта
- Экспорт в SVG и/или PNG
- Русская версия, переключение языка интерфейса
- Импорт/экспорт из/в Figma (не знаю, возможно ли)
- Улучшения интерфейса и багфиксы
