Экстрактор переменных цвета CSS
Найдите все цвета в вашем CSS и превратите их в переиспользуемые пользовательские свойства.
Экстрактор переменных цвета CSS
Вставьте таблицу стилей, и этот инструмент просканирует каждое объявление на предмет значений цветов, записанных как hex, rgb()/rgba() или hsl()/hsla(), а затем перепишет правила, чтобы они ссылались на пользовательские свойства вместо повторения одного и того же значения везде. Он создан для очистки таблицы стилей, которая разрасталась органически — переделка, слияние библиотеки компонентов или CSS, извлеченный из инструмента дизайна — когда один и тот же синий оказывается написанным дюжину слегка отличающихся способов.
Опция наименования контролирует, как называется каждая переменная: по порядку первого появления (--color-1, --color-2…), по приблизительному оттенку и светлоте (--color-dark-blue, --color-light-gray) или по свойству, на котором она впервые появилась (--color-background, --color-border). Включите функцию «объединить одинаковые цвета, написанные по-разному», чтобы сложить #ff0000, rgb(255, 0, 0) и hsl(0, 100%, 50%) в одну переменную, даже если исходный текст отличается; одинаковые значения всегда объединяются независимо. Ползунок сходства идет дальше и объединяет оттенки, которые близки, но не идентичны — полезно, когда палитра накопила похожие серые или синие цвета, которые никто не собирался создавать. Выберите, находится ли созданный блок под :root или пользовательским селектором, выберите обозначение, в котором печатаются переменные, или переключитесь на простой список цветов и счетчиков появлений, когда вам просто нужен аудит, а не переписывание.
Сканер ищет только внутри фактических значений объявлений, поэтому он никогда не ошибочно принимает селектор ID типа #abcabc за цвет и оставляет комментарии, цитируемые строки и содержимое url() полностью нетронутыми. Оба окончания строк Windows и Unix работают, и инструмент не обманывается вложенными функциями, такими как цвет внутри списка градиентов.
Всё работает локально в вашем браузере — ваша таблица стилей никогда не загружается никуда, поэтому можно безопасно вставлять код из приватного проекта. Скопируйте результат, загрузите его как файл .txt или отправьте вывод обратно на вход, чтобы уточнить его другим проходом.