Кейсы

PickShade — сервис и расширение браузера для работы с цветом

Инструмент для дизайнеров и разработчиков: выбрать, вставить или снять с экрана любой цвет и скопировать его в нужном формате. Плюс оттенки, контраст, палитры и экспорт.

Открыть сайт pickshade.com

Что это: Веб-сервис и расширение браузера
Что сделано: Сайт, расширение, цветовая библиотека
Платформы: Веб, Chrome, Edge, Firefox
Роль: Продукт, дизайн, разработка

pickshade.com

PickShade — сервис и расширение браузера для работы с цветом

Задача

Дизайнеры и разработчики постоянно переводят цвета из одного формата в другой, проверяют контраст и собирают палитры — в пяти разных сервисах. Нужен был один быстрый инструмент, который работает и на сайте, и прямо в браузере.

Что я построил

Пипетку, конвертер и подбор цвета с копированием в один клик
Оттенки, проверку контраста, гармонии и палитры
Экспорт дизайн-системы в Tailwind, CSS, shadcn и токены
Расширение для Chrome, Edge и Firefox с собственной лупой
Названия цветов на разных языках

Инженерные решения

Вся цветовая математика — в одной библиотеке, которую используют и сайт, и расширение
Расширению нужны только четыре разрешения, у него нет доступа ко всем сайтам, удалённого кода и аналитики
Проверка расширения в настоящем браузере автоматическими тестами

Что это значит для вашего проекта

Я умею строить продукты, где один код работает на нескольких платформах, и аккуратно обращаюсь с данными пользователей. Это экономит бюджет, когда продукту нужен и сайт, и приложение, и расширение.

Стек

TypeScript
Next.js
React
WXT
Tailwind CSS

Услуги по теме

Обсудим вашу задачу?

Через рабочий день пришлю план, сроки и фиксированную цену. Бесплатно и ни к чему не обязывает.