Elysia Tools
Навигация
Design
· Последнее обновление：2025-01-11
Сократить 6-значные HEX коды до 3-значных (например, #FFFFFF в #FFF)
Запуск
Заполните форму, запустите инструмент и посмотрите результат на этой же странице.
Примеры
Связано
Руководство по использованию инструмента
Укорачиватель Цветов — это простой и эффективный инструмент для оптимизации вашего CSS-кода, позволяющий автоматически преобразовывать 6-значные HEX-коды в их компактные 3-значные аналоги, где это возможно.
Контекст
Разработчик завершил верстку сайта и хочет уменьшить размер CSS-файла для улучшения показателей производительности.
Проблема
В коде много избыточных 6-значных HEX-кодов, которые можно сократить.
Как использовать
Скопировать все цвета из CSS, вставить в инструмент и выбрать формат 'CSS format'.
format: cssРезультат
Получен список сокращенных кодов, готовых к вставке в стили, что уменьшило общий вес файла.
Контекст
Дизайнер передает спецификацию цветов разработчикам и хочет, чтобы все значения были записаны в кратком виде.
Проблема
Цвета в документации записаны в разных форматах, что создает путаницу.
Как использовать
Вставить все HEX-коды в инструмент и выбрать формат 'uppercase' для единообразия.
format: uppercaseНет, сокращение возможно только для цветов, где каждая пара символов идентична (например, #AABBCC превращается в #ABC).
Если включена опция отображения несокращаемых цветов, инструмент выведет их исходное значение и укажет причину, почему сжатие невозможно.
Да, вы можете выбрать формат вывода без решетки в настройках, если это требуется для вашего проекта.
Да, инструмент поддерживает пакетную обработку: просто вставьте список цветов, разделяя их переносом строки.
Нет, браузеры интерпретируют 3-значные HEX-коды идентично 6-значным, поэтому визуальный результат останется прежним.
Результат
Все цвета приведены к единому стандарту #FFF, что упростило чтение документации.