Руководство по Slop Colors
Начало работы со Slop Colors
Slop Colors — это пипетка, создатель палитр и проверка контраста на одной странице. Изображения и палитры обрабатываются в вашем браузере и никогда не отправляются.
Страница
Вверху находится текущий цвет: его значение в HEX, RGB, HSL, OKLCH и CMYK, и у каждого есть кнопка «Копировать». Ниже четыре карточки: «Выбрать из изображения», «Палитра», «Создано из этого цвета» и «Проверка контраста».
Панель справа содержит поля цвета, варианты для создания из него, сколько цветов искать на изображении и экспорт. На телефоне она открывается листом внизу: нажмите «Настройки», чтобы её открыть.
Берите цвета из изображения
- Перетащите изображение на страницу или нажмите «Открыть изображение…».
- Наведите указатель на изображение и щёлкните, чтобы взять цвет; лупа показывает пиксели под точкой.
- Стрелками сдвигайте указатель на один пиксель, Enter добавляет цвет в палитру.
- Нажмите «Добавить все в палитру», чтобы сохранить основные цвета изображения.
Совет: В Chrome и Edge «Выбрать с экрана» берёт цвет из любого места на экране.
Создайте палитру
- Нажмите «Добавить этот цвет», чтобы добавить текущий цвет.
- Выберите «Гармония» и «Шкалу» на панели, затем нажмите «Использовать как палитру» под нужным рядом.
- Под каждым цветом палитры ‹ и › двигают его, ✎ задаёт имя, а × удаляет.
Проверьте контраст
Введите цвет текста и фон или нажмите «Использовать как цвет текста» и «Использовать как фон» на панели. Коэффициент и уровни WCAG показываются сразу, а «Исправить цвет текста» находит ближайший цвет, который проходит AA.
Экспортируйте и сохраните
- Назовите палитру и выберите «Формат» в разделе «Экспорт».
- Нажмите «Скачать палитру», «Копировать код» или «Сохранить в Slop Drive…»; «Открыть в…» отправляет файл в другое приложение.
- Чтобы снова открыть палитру, перетащите на страницу её файл .gpl, .ase, .json или .css.