Перейти к содержимому
Color Palette Extractor

Цвета по URL

Извлечение цветов сайта

Инструмент «Извлечение цветов сайта» читает HTML и CSS сайта по его URL и возвращает цветовую палитру сайта: фирменный цвет, акценты, фоны, текст и границы, с CSS-переменной и долей использования для каждого цвета.

  • Бесплатно, без регистрации
  • Читает реальный CSS и переменные
  • Ничего не сохраняется
Извлечь из

Сайт блокирует запросы? Вставьте его HTML или CSS

Как работает извлечение цветов сайта?

Извлечение цветов сайта работает так: инструмент скачивает страницу и её таблицы стилей, считывает каждое значение цвета в коде и ранжирует цвета по тому, где и как часто страница их использует.

  1. Введите адрес

    Введите домен, например example.com, или вставьте полный URL любой публичной страницы. Инструмент загружает страницу и до 25 её таблиц стилей.

  2. Таблицы стилей разбираются

    Инструмент читает все синтаксисы цвета: hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color() и 148 именованных цветов. CSS-переменные заменяются своими значениями.

  3. Цвета получают роли

    Роль каждого цвета задаёт CSS-свойство: фон, текст, граница, заливка или тень. Правила, которые соответствуют элементам страницы, учитываются трижды.

  4. Скопируйте палитру

    Первым идёт фирменный цвет, за ним акценты, фоны и цвета текста. Экспортируйте палитру в CSS, Tailwind или дизайн-токены.

Как инструмент находит фирменный цвет сайта?

Фирменным цветом считается самый часто используемый насыщенный цвет, который встречается на кнопках, в ссылках или в CSS-переменных, названных по бренду.

  • Насыщенность. Фирменными или акцентными могут быть только цвета с хроматичностью OKLCH 0.05 и выше. Серые и почти серые цвета считаются нейтральными.
  • Расположение. Цвета в таких селекторах, как .btn, button, a и .cta, получают больший вес.
  • Названия. Такие переменные, как --primary, --brand и --accent, получают больший вес.
  • theme-color. Значение <meta name="theme-color">, совпадающее с цветом из CSS, даёт сильный сигнал фирменного цвета.
Как CSS-свойства соответствуют ролям цветов
РольCSS-свойства
Фонbackground, background-color, градиенты
Текстcolor, text-decoration-color, caret-color
Границаborder, outline, column-rule
Заливкаfill, stroke, stop-color, accent-color
Теньbox-shadow, text-shadow (в списке, но не в основной палитре)

Как инструмент отделяет используемые цвета от неиспользуемого CSS?

Инструмент придаёт тройной вес CSS-правилам, селекторы которых соответствуют элементам в HTML страницы. CSS-фреймворки содержат много цветов, которые страница никогда не использует, и сопоставление селекторов не даёт этим цветам обойти реальный дизайн.

  • Цвета :hover и :focus учитываются с половинным весом, потому что появляются только при взаимодействии.
  • Правила @media print игнорируются.
  • Цвета с непрозрачностью ниже 35% пропускаются как наложения и тонировки.
  • Цвета, расстояние между которыми меньше ΔE_OK 0.02, объединяются в один образец со списком вариантов.

Находит ли инструмент цвета тёмной темы?

Да. Правила внутри @media (prefers-color-scheme: dark) и правила под такими селекторами, как .dark или [data-theme="dark"], образуют отдельную палитру тёмной темы.

Когда инструмент разрешает правило тёмной темы, тёмные значения CSS-переменных заменяют светлые, поэтому палитра тёмной темы показывает цвета, которые посетитель видит в тёмной теме.

Какие цвета инструмент для сайтов не может прочитать?

Инструмент для сайтов читает код, который отправляет сервер, поэтому три типа цветов остаются недоступными.

  • Стили во время выполнения. Библиотеки CSS-in-JS добавляют стили после загрузки страницы в браузере.
  • Цвета изображений. Цвета внутри фотографий, растровых логотипов и видео являются пикселями, а не CSS. Цвета логотипа и иконки сайта инструмент считывает отдельно.
  • Защищённые сайты. Сайты с защитой от ботов отклоняют автоматические запросы.

В этих случаях вставьте HTML или CSS страницы в поле для кода или сделайте скриншот и перетащите его в Извлечение цветовой палитры. Руководство Как узнать, какие цвета использует сайт также описывает способы с DevTools браузера.

Кто использует извлечение цветов сайта?

  • Дизайнеры

    Проверяют текущие фирменные цвета клиента перед редизайном или изучают палитру сайта-референса.

  • Разработчики

    Восстанавливают цветовые токены и имена переменных сайта, чтобы пересобрать тему.

  • Маркетологи

    Подгоняют лендинги, рекламу и письма под цвета основного сайта.

  • Специалисты по доступности

    Проверяют пары текста и фона сайта на соответствие порогам контраста WCAG на вкладке «Контраст».

Частые вопросы об извлечении цветов сайта

Почему некоторых цветов сайта нет в палитре?

Цвета, которые JavaScript применяет во время выполнения, цвета внутри изображений и цвета на страницах за авторизацией отсутствуют в HTML и CSS, которые отправляет сервер.

Можно ли извлечь цвета с сайта, который блокирует ботов?

Да, запасным способом. Откройте сайт в браузере и вставьте его HTML или таблицу стилей в поле для кода либо загрузите скриншот в инструмент для изображений.

Хранит ли инструмент сайты, которые я проверяю?

Нет. Сервер загружает страницу и её таблицы стилей по вашему запросу и не сохраняет копию. Анализ цветов выполняется в вашем браузере.

Что означает процент рядом с цветом?

Процент показывает долю цвета во взвешенном использовании CSS на странице. Он измеряет, как часто код использует цвет, а не какую площадь экрана занимает цвет.

Можно ли проверить не главную страницу?

Да. Введите полный URL любой публичной страницы, например example.com/pricing.