Color Palette сканирует каждый элемент на веб-странице и извлекает полный набор используемых цветов — от текста и фонов до рамок, теней и акцентов. Цвета отображаются в виде визуальных образцов, отсортированных по частоте использования (наиболее используемые — первыми), каждый со значением HEX и счётчиком использования. Нажмите на любой образец, чтобы скопировать, или экспортируйте всю палитру в виде списка кодов цветов.
Каждый хорошо спроектированный сайт имеет последовательную цветовую палитру — обычно 3–8 основных цветов плюс несколько нейтральных. Color Palette извлекает эту палитру автоматически, сканируя вычисленные значения color, background-color, border-color и box-shadow каждого элемента. В результате получается отсортированная по частоте коллекция всех цветов на странице, дающая полное представление о цветовой системе сайта. Доминирующие цвета (основной фирменный цвет, цвет фона, цвет текста) появляются первыми с высокими счётчиками использования. Акцентные цвета и единичные значения располагаются ниже. Это бесценно для исследования дизайна — зайдите на любой сайт и извлеките его точную цветовую палитру за секунды. Также полезно для аудита собственного сайта: есть ли посторонние цвета, не принадлежащие вашей дизайн-системе? Используете ли вы 5 слегка отличающихся оттенков серого, тогда как спецификация дизайна определяет только 3? Color Palette делает всё использование цветов видимым и поддающимся подсчёту.
Сканирует каждый видимый элемент на странице и извлекает цвета из вычисленных свойств: color, background-color, border-color, цвет box-shadow, outline-color и text-decoration-color. Каждый цвет, используемый на странице, захватывается.
Цвета отсортированы по количеству использований — наиболее используемый цвет появляется первым. Доминирующие фирменные цвета и фоны поднимаются в начало, а единичные акцентные цвета — в конец. Мгновенно видите основные, вторичные и акцентные цвета страницы.
Каждый цвет отображается в виде крупного визуального образца с его HEX-кодом и счётчиком использования ниже. Образцы достаточно большие, чтобы различать тонкие оттенки (например, #333 и #2a2a2a).
Нажмите на любой образец цвета, чтобы немедленно скопировать его значение HEX в буфер обмена. Не нужно открывать панель цветов или дополнительный диалог — один клик, и готово.
Нажмите «Экспортировать все», чтобы скопировать всю палитру в виде отформатированного списка HEX-кодов цветов. Вставьте в инструмент дизайна, файл CSS-переменных или документацию по цветам. Список сохраняет порядок сортировки по частоте.
Цвета нормализуются (представления одного и того же цвета в форматах rgb и hex объединяются) и дедублируются. Палитра отображает только уникальные цвета с суммарными счётчиками использования для дублирующихся представлений.
Посещайте сайты с красивыми цветовыми схемами и извлекайте их точную палитру. Используйте цвета как отправную точку для собственного дизайна — или просто фиксируйте, какие сочетания цветов хорошо работают вместе.
Запустите Color Palette на своём сайте, чтобы проверить согласованность фирменных цветов. Есть ли 4 слегка отличающихся оттенка синего там, где должен быть 1? Проникают ли нефирменные цвета? Сортировка по частоте делает несоответствия очевидными.
Экспортируйте палитру и преобразуйте её в CSS-переменные (--color-primary, --color-secondary и т.д.). Отсортированный по частоте результат подскажет, каким цветам отвести роль основного, вторичного и акцентного.
Извлекайте цветовые палитры с сайтов конкурентов, чтобы понять позиционирование их бренда. Тёплые цвета против холодных, высокий контраст против приглушённых — палитра раскрывает осознанные дизайнерские решения.
Просматривайте все цвета текста рядом с цветами фона. Есть ли сочетания текст–фон с недостаточным контрастом? Палитра даёт полный набор цветов для проверки на соответствие требованиям контрастности WCAG.
Откройте плавающую панель DevSuite Pro и нажмите на иконку Color Palette. Инструмент сканирует каждый элемент на странице и извлекает все значения цветов.
Появляется сетка цветовых образцов, отсортированных по частоте использования. Наиболее используемые цвета — вверху. Каждый образец показывает HEX-код и количество элементов, использующих этот цвет.
Нажмите на любой образец, чтобы скопировать его значение HEX в буфер обмена. На короткое время появится подтверждение.
Нажмите «Экспортировать все», чтобы скопировать все цвета в виде отформатированного списка. Вставьте в файл CSS-переменных, инструмент дизайна или документацию.
Переходите на разные страницы одного сайта и извлекайте палитры, чтобы проверить согласованность цветов на сайте.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
