Посібник з Slop Colors
Початок роботи з Slop Colors
Slop Colors — це піпетка, конструктор палітр і перевірка контрасту на одній сторінці. Зображення та палітри обробляються у вашому браузері й ніколи не передаються в мережу.
Сторінка
Угорі показано поточний колір із значеннями в HEX, RGB, HSL, OKLCH і CMYK та кнопкою «Копіювати» для кожного. Нижче чотири картки: «Вибрати з зображення», «Палітра», «Створено з цього кольору» і «Перевірка контрасту».
Панель праворуч містить поля кольору, те, що можна створити з нього, скільки кольорів знайти на зображенні, і експорт. На телефоні це аркуш унизу: натисніть «Налаштування», щоб його відкрити.
Вибір кольорів із зображення
- Перетягніть картинку на сторінку або натисніть «Відкрити зображення…».
- Наведіть курсор на зображення і клацніть, щоб вибрати колір; лупа показує пікселі під курсором.
- Стрілками пересувайте курсор на один піксель, а Enter додає колір до палітри.
- Натисніть «Додати всі до палітри», щоб зберегти основні кольори зображення.
Порада: У Chrome і Edge кнопка «Вибрати з екрана» бере колір із будь-якого місця на екрані.
Побудова палітри
- Натисніть «Додати цей колір», щоб додати поточний колір.
- Виберіть «Гармонію» і «Шкалу» на панелі, а потім натисніть «Використати як палітру» під потрібним рядком.
- Під кожним кольором палітри ‹ і › пересувають його, ✎ дає назву, а × видаляє.
Перевірка контрасту
Введіть колір тексту і фон або скористайтеся кнопками «Використати як колір тексту» та «Використати як фон» на панелі. Співвідношення і рівні WCAG показуються одразу, а «Виправити колір тексту» знаходить найближчий колір, який відповідає AA.
Експорт і збереження
- Назвіть палітру і виберіть формат у розділі «Експорт».
- Натисніть «Завантажити палітру», «Копіювати код» або «Зберегти в Slop Drive…»; «Відкрити в…» надсилає файл в інший застосунок.
- Щоб знову відкрити палітру, перетягніть на сторінку її файл .gpl, .ase, .json або .css.