WhatStyle
Chrome-расширение для дизайнеров и фронтендеров, которое заменяет сразу пять популярных: наводите курсор на любой элемент сайта и сразу видите его цвет, шрифт, CSS и размеры.
Экраны
Почему этот продукт
WhatStyle заменяет сразу пять популярных расширений: ColorZilla, WhatFont, CSS Peeper, Site Palette и Page Ruler. Идея появилась после анализа рынка: лидеры ниши с миллионами пользователей давно не обновляются, а живые аналоги раздражают рекламой, навязчивыми триалами и сбором данных. Нишу я нашёл по данным своего AppView.
WhatStyle бесплатный, без рекламы и без сетевых запросов: всё считается локально в браузере. Работает в том числе на localhost и file://, поэтому подходит для проверки своей вёрстки ещё до деплоя.
Что умеет
- Пипетка в двух режимах. Нативный EyeDropper API берёт цвет даже за пределами браузера, а свой сэмплер со скриншота даёт лупу до ×16 и усреднение по области.
- Форматы HEX, RGB, HSL и OKLCH и ближайший цвет Tailwind, автокопирование по клику, история на 50 цветов, мини-редактор и проверка контраста по WCAG AA/AAA.
- Шрифты: тултип при наведении и подробная карточка по клику. Показывает, какой шрифт из стека font-family реально отрисован (через document.fonts и сравнение метрик на canvas), и откуда он: Google Fonts, Adobe, self-hosted или системный. Есть список всех шрифтов страницы.
- CSS-инспектор: подсветка box model, карточка свойств по группам (layout, box, typography, colors, effects). Copy CSS копирует только то, что отличается от дефолтов тега. По DOM можно ходить стрелками, как в VisBug.
- Палитра страницы: собирает все цвета с весом по площади, раскладывает на фон, текст, границы и акценты, склеивает почти одинаковые оттенки. Подсвечивает элементы нужного цвета, показывает CSS-переменные сайта, выгружает список, CSS variables или JSON.
- Линейка: размеры элементов, расстояния между ними в стиле Figma, свободные замеры с прилипанием к краям и сетка 8 px.
- Интерфейс в side panel: горячие клавиши, светлая и тёмная темы, EN/RU.
- Бесплатно, без рекламы и сетевых запросов: всё считается локально, в том числе на localhost и file://.
Моя роль
Продукт, UX и разработка: от анализа рынка и отзывов конкурентов до релиза в Chrome Web Store и сайта.
Как устроено
Нужно что-то похожее?
Расскажите, что у вас есть и чем я могу вам помочь.