NETROOM
Excalidraw - виртуальная доска для схем и диаграмм в стиле «от руки»: наброски архитектуры, user flow, wireframes и всё, что проще нарисовать, чем описать словами. Работает прямо в браузере, без регистрации: открыл вкладку и рисуешь. Есть библиотеки готовых элементов, экспорт в PNG и SVG, совместное редактирование по ссылке и сквозное шифрование комнат. Файлы можно хранить локально или подключить своё хранилище. Открытый исходный код, есть self-hosted вариант для команд.
Squoosh - сжатие картинок прямо в браузере: перетащил файл, выбрал формат и качество, скачал результат. Ползунок показывает оригинал и сжатую версию рядом, так что видно, где начинают лезть артефакты, и можно остановиться на грани. Форматов много, у каждого свои настройки - от одной ручки качества до параметров самого кодека. Файлы никуда не отправляются: вся работа идёт на вашем устройстве, даже без интернета - приложение ставится как обычное. Сделано командой Google Chrome Labs, открытый код, регистрация не нужна.
«Швейцарский нож» для данных от британского GCHQ. Собираешь цепочку операций - «рецепт» - и прогоняешь через неё текст или файл: base64, XOR, AES, DES, Blowfish, хеши, hexdump, разбор X.509 и IPv6, распаковка архивов, перекодировка. Всё считается прямо в браузере, ничего не улетает на сервер, страницу можно скачать и открыть офлайн. Лицензия Apache 2.0 плюс Crown Copyright. Незаменим при разборе логов, дампов и подозрительных payload-ов.
Швейцарский нож для PDF в браузере, но на своём сервере: слить и разрезать, повернуть, сжать, конвертировать в офисные форматы и обратно, распознать текст через OCR, подписать, заредактировать чувствительные куски, собрать цепочку операций через REST API. Больше пятидесяти инструментов. Смысл в том, что файлы не уезжают в чужое облако. Поднимается одним docker run, есть десктопный клиент и чарты для Kubernetes. Модель open-core: ядро открыто, часть возможностей в платных Server и Enterprise планах.
Вводишь один цвет - получаешь десяток готовых сочетаний вокруг него плюс градиенты, включая трёхцветные, которые руками собирать муторно. Логика простая: у тебя уже есть фирменный цвет, нужен фон, акцент и что-то в пару, а не палитра с нуля. Бесплатно, без регистрации, hex копируется в клик, градиенты отдаются как CSS. Инструмент подчёркнуто одноразовый: подобрал, скопировал, ушёл - ни аккаунтов, ни коллекций, ни подписки.
Генератор цветовых шкал, а не палитр: задаёшь число ступеней и кривые по тону, насыщенности и яркости - на выходе ровный ряд оттенков, где соседние шаги отличаются предсказуемо. Ровно то, что нужно для токенов дизайн-системы, где 100 и 900 живут по одному закону. Экспорт в Tailwind, OKLCH и Swift, есть плагин к Figma, сам алгоритм описан. Бесплатно. Для быстрого «дайте красивую четвёрку» берите Color Hunt, тут другая задача.
Бросаешь файл шрифта на круг - и узнаёшь, что он вообще умеет: OpenType-фичи, лигатуры, альтернативные глифы, оси вариативности, поддерживаемые языки, цветные слои. Заодно отдаёт готовый CSS, чтобы включить нужную фичу в вебе, и показывает весь набор символов. Шрифт разбирается в браузере и никуда не загружается, так что лицензионные гарнитуры проверять безопасно. Бесплатно, автор - Roel Nieskens. Незаменимо перед покупкой шрифта.
Бросаешь файл шрифта в окно браузера - и видишь, что внутри: полный набор глифов, поддерживаемые языки, кернинг, OpenType-фичи, метрики и метаданные из таблиц. Понимает OTF, TTF, WOFF и WOFF2. Всё считается локально, в браузере, файл никуда не уходит - это важно, когда шрифт лицензионный и загружать его на чужие серверы нельзя. Бесплатно, без регистрации. Быстрый ответ на вопросы «а кириллица тут есть» и «какие начертания реально лежат в файле».
Инструмент против скачка вёрстки при загрузке веб-шрифта. Показывает фолбэк и целевой шрифт наложением, даёт крутить у фолбэка font-size, line-height, letter-spacing и word-spacing - и сразу видно, насколько текст прыгнет, когда основной шрифт доедет. Ниже готовый CSS для подмены. Шрифты берутся из Google Fonts или загружаются свои. Сделала Monica Dinculescu, бесплатно, исходник на GitHub. Проверенный способ сбить CLS, не выкидывая кастомную типографику.
Сайт про то, какими шрифтами реально набран современный веб. Каждый день - разбор одного сайта с точным списком гарнитур, плюс подборки: чем заменить Helvetica, что брать из Google Fonts, какие пары работают. Не генератор и не магазин: сюда идут за насмотренностью и чтобы опознать шрифт, который зацепил. Ведёт один человек, Jeremiah Shoaf, обновляется годами без пауз. Контент бесплатный, платный только курс-чеклист по типографике за 399 долларов.
Калькулятор модульной типографической шкалы: выбираешь базовый размер и коэффициент - минорную секунду, большую терцию, квинту - и видишь готовый ряд от подписи до h1 живым текстом и своим шрифтом. Есть предпросмотр под мобильный и десктоп, экспорт в CSS с переменными и сохранение досок. Хорош тем, что показывает шкалу на реальных строках, а не в табличке чисел. Основное бесплатно; часть режимов, включая золотое сечение, спрятана в Pro.
Шестнадцать шрифтовых стеков из того, что уже стоит в системе: Transitional, Old Style, Humanist, Neo-Grotesque, Didone, Monospace и другие. Смысл - не грузить веб-шрифты вообще: нулевой запрос, никакого FOIT и скачков вёрстки, текст рисуется сразу. Для контентных сайтов и админок это самый дешёвый способ разогнать LCP. Копируешь одну строку font-family - и всё. Лицензия CC0: можно куда угодно и без упоминания автора.
Открытые шрифты, упакованные в npm-пакеты, - около 2100 семейств, включая Inter, Roboto, Geist и JetBrains Mono. Смысл в самохостинге: ставишь пакет, импортируешь нужные начертания, шрифт едет с твоего домена. Никакого запроса к чужому CDN - это и приватность, и на один сетевой хоп меньше на критическом пути, и версионирование как у обычной зависимости. Кроме npm есть прямые скачивания, настраиваемый CDN и бесплатное API. Лицензии - у самих шрифтов, всё открытое.
Бесплатная библиотека шрифтов от Indian Type Foundry - около сотни семейств, и это не свалка, а работа настоящей словолитни: Satoshi, General Sans, Clash Display и другие узнаваемые вещи, многие с вариативными начертаниями. Лицензия ITF Free Font License разрешает и личное, и коммерческое использование - клиентские проекты, продукты на продажу, печать и веб, без платежей; нельзя только перепродавать сами файлы. Часть шрифтов идёт под SIL OFL. Есть подборки готовых пар.
Независимый архив типографики: больше 34 тысяч задокументированных примеров того, как шрифты живут в реальном мире - в книгах, упаковке, айдентике, постерах, на сайтах. Фильтры по теме, формату и конкретной гарнитуре: можно зайти со стороны «что вообще делали с этим шрифтом» и посмотреть пять сотен разобранных семейств. Бесплатно, без подписки, пополняется сообществом. Лучший способ понять характер шрифта до покупки лицензии - не по образцу, а по живой вёрстке.
Больше тысячи вручную отобранных шрифтовых пар из Google Fonts и Fontshare - то есть всё бесплатное и пригодное для коммерции по лицензиям самих шрифтов. Есть песочница, где пара примеряется на свой текст, избранное и коллекции, а ещё сборка брендбука с типографикой, цветами и иконками, с выгрузкой в PDF или DESIGN.md. Отличие от Fontjoy: тут курированный список, а не генератор - вариантов меньше, зато каждый проверен глазами. Pro стоит 4-8 $ в месяц.
Подбор шрифтовых пар нейросетью: жмёшь пробел - получаешь тройку для заголовка, подзаголовка и текста. Ползунок контраста управляет тем, насколько шрифты должны различаться, любой из трёх можно залочить и перебирать остальные вокруг него. Работает на Google Fonts, так что найденное подключается сразу и ничего не стоит. Бесплатно, без аккаунта, техническое описание модели лежит на GitHub. Хорош, когда нужен быстрый неочевидный вариант, а не десятый Inter с Roboto.
Инструмент, который из одного бренд-цвета собирает целый набор Tailwind-палитр: основную шкалу, нейтральные и статусные цвета. Дальше палитра примеряется на макетах - дашборд, лендинг, карточки, - и сразу видно, где серый уходит в грязь, а акцент теряется. В обвязке чекер контраста, генератор тем для shadcn/ui и плагин для Figma. Базовое бесплатно, Pro добавляет сохранение палитр и расширенные режимы. Проект живой, обновляется.
Страница генератора UI Colors, где из одного hex собирается полная шкала Tailwind от 50 до 950. Вбиваешь фирменный цвет - получаешь одиннадцать ступеней с выправленной светлотой и готовый кусок конфига, который остаётся вставить в проект. Рядом сразу видно, как шкала ложится на кнопки, карточки и текст, так что провалы в контрасте ловятся до вёрстки. Бесплатно и без регистрации; платный Pro добавляет сохранение палитр и расширенные настройки.
Палитру обычно смотрят кружочками, и это враньё: пять красивых цветов рядом ничего не говорят о том, как они лягут на страницу. Realtime Colors красит демо-лендинг целиком - шапку, кнопки, карточки, текст - и ты видишь настоящие пропорции, где акцента 5%, а фона 60%. Выбираешь текст, фон, primary, secondary, accent, тут же проверяешь контраст и подбираешь шрифты. Экспорт в CSS, SCSS, Tailwind, PNG. Полностью бесплатно, про-плана нет, есть плагин для Figma.
Тридцать цветовых шкал по двенадцать ступеней, где у каждой ступени зафиксирована роль: фон, ховер, бордер, текст. Это не «набор красивых оттенков», а система: контраст текста к фону уже посчитан под WCAG, а тёмная тема включается одним классом - парные шкалы подобраны так, чтобы роли не поехали. Отдельно идут alpha-шкалы для наложений. Лицензия MIT, бесплатно, ставится npm-пакетом или подключается обычным CSS-файлом.
Редактор цветовых рамп для тех, кому мало генератора оттенков: показывает кривые тона, насыщенности и светлоты, и по ним сразу видно, где шкала проседает или уходит в грязь. Двигаешь точки - палитра выравнивается по всей длине. Бесплатно, работает в браузере. Важное: домен palettte.app теперь редиректит на инструмент внутри сайта студии BairesDev. Редактор жив и работает, но живёт уже не у автора, и гарантии, что не переедет снова, никакой.
Инструмент Adobe для цветовых систем, где палитра строится не на глаз, а от нужного контраста: задаёшь ключевые цвета и целевые коэффициенты, а тон подбирается сам, чтобы текст проходил по WCAG. Тёмная тема получается сдвигом яркости и насыщенности, а не перекраской токенов руками. Есть шкалы для графиков и проверка на дальтонизм. Экспорт в SVG, CSS-переменные и дизайн-токены. Открытый код Adobe, бесплатно, аккаунт не нужен.
Генератор палитр на машинном обучении, и думает он ролями, а не квадратиками: где фон, где текст, где акцент. Выбираешь шаблон - лендинг, логотип, обложка - и модель красит именно его. Три режима: transformer по умолчанию, diffusion медленнее, но точнее и лучше для градиентов, random для безумных сочетаний. Цвет можно залочить и догенерировать остальные, есть матрица целевого контраста. Бесплатно, без аккаунта.
Палитра, показанная на живом макете. Обычные генераторы отдают пять квадратиков, а тут листаешь готовую страницу, и она целиком перекрашивается: фон, заголовок, кнопка, иллюстрация - у каждой роли подписан свой hex. Сразу видно, когда пять «красивых» цветов разваливаются на кнопке. Плюс короткий разбор психологии цвета. Бесплатно, автор - Mackenzie Child. Обновляется редко: копирайт в подвале так и застыл на 2021 году.
Самый ходовой генератор палитр: пробел - новая пятёрка, замок - фиксируешь удачный цвет и крутишь остальные. Кроме генератора внутри целый набор: извлечение цветов из фото, проверка контраста, симуляция дальтонизма, коллекции и палитры сообщества. Работает без аккаунта, но бесплатно хранит только 10 палитр, 1 проект и 5 избранных цветов. Pro примерно за 3 $ в месяц снимает лимиты и рекламу. Есть приложение для iOS и плагин к Figma.
Описываешь сайт словами - получаешь карту страниц, вайрфреймы и собранный лендинг. Собирается не из сгенерированного кода, а из библиотеки в тысячу с лишним живых компонентов, поэтому вёрстка предсказуемая: адаптив, доступность и SEO не разваливаются. Экспорт в Figma с автолейаутами и переменными, в Webflow с классами по client-first и в React на Tailwind; можно публиковать прямо у них. Домен переехал с relume.io на relume.ai. Есть бесплатный старт, дальше подписка.
Курируемые палитры по четыре цвета - и всё, никаких колёс, кривых и настроек. Листаешь популярное, новое или тег вроде «пастель», «ретро», «зима», кликаешь - и hex уже в буфере. Логиниться не нужно, платного тарифа нет, палитры можно присылать свои. Берите, когда надо быстро с чего-то начать и не хочется думать о гармонии; для системной генерации шкал под дизайн-систему нужен другой инструмент - ColorBox или Coolors.
Выбор редакции