Рабочая панель разработчика
Небольшие браузерные инструменты для задач, которые постоянно встречаются в вёрстке: рассчитать пропорции, привести line-height к безразмерному значению или быстро перевести цвет между форматами.
Каталог инструментов
Карточка сразу показывает тип результата, назначение и состояние инструмента. Калькулятор пропорций и конвертеры высоты строки и прозрачных цветов уже работают.
Изображения / Размеры
Задайте исходную ширину и высоту, затем измените одну сторону. Калькулятор сохранит пропорции, вычислит второй размер и подготовит CSS-свойство aspect-ratio.
CSS / Типографика
Переводите высоту строки между пикселями, процентами, em и безразмерным значением. Сразу проверяйте ритм на реальном тексте и копируйте готовую CSS-декларацию.
CSS / Цвет
Добавляйте альфа-канал к HEX-цвету и получайте готовые значения HEX8, RGBA и HSLA. Сравнивайте результат на светлом и тёмном фоне до переноса в интерфейс.
Принципы каталога
Каждая утилита решает одну задачу, объясняет единицы измерения и показывает пригодный для вставки результат.
Сразу к задаче
На входе — только данные, без которых расчёт невозможен. Полезный пример уже подставлен и помогает быстро понять механику.
Понятный результат
Результат сопровождается единицами измерения, кратким пояснением и действием копирования там, где оно действительно нужно.
Приватность
Для базовых вычислений не нужна регистрация. Введённые размеры и цвета не сохраняются и не попадают в профиль пользователя.
Один рабочий сценарий
Например, ширину изображения и его исходные пропорции либо размер шрифта и высоту строки.
Инструмент показывает не только число, но и формулу, единицы измерения и ограничения выбранного способа.
Полученный размер, цвет или CSS-фрагмент можно перенести в проект без промежуточного пересчёта.
Собираем повторяющиеся задачи из реальной разработки. Опишите сценарий и ожидаемый результат — так утилита получится полезной, а не декоративной.