ColorDojo: пипетка и выбор цвета

Расширение-пипетка и выбор цвета: берите цвет приватно, копируйте OKLCH, ищите токены Tailwind v4, проверяйте контраст.

ColorDojo — приватное расширение-пипетка и инструмент выбора цвета для разработчиков, которым нужны OKLCH, соответствия Tailwind и проверка контраста без постоянного доступа ко всем сайтам. Выберите пиксель, скопируйте значение и работайте дальше. ОДИН ВЫБОР — НУЖНЫЙ ФОРМАТ Выберите любой пиксель экрана нативной пипеткой Chromium. ColorDojo показывает hex, RGB, HSL, HSV, OKLCH и Display P3, а также ближайший именованный цвет CSS, и автоматически копирует формат по умолчанию при включённом автокопировании. Как rgba-пипетка сохраняет альфа-канал вставленных и импортированных цветов: 8-значный hex или rgb() с альфой, в современном синтаксисе со слешем или классическом с запятыми. Команда Alt+P вешает выбор цвета на клавиатуру, а значок на панели превращается в точку последнего выбранного цвета. ПОДСТРОЙТЕ КАНАЛЫ ПЕРЕД ПРИМЕНЕНИЕМ Цвет почти подошёл? Вкладка Edit — это HSL-пипетка со слайдерами: настройте каналы RGB, HSL или HSV, следите за сравнением «Selected vs new» и примените. Форматы, токен Tailwind и проверки контраста следуют за применённым цветом. ПИПЕТКА ДЛЯ MAC, WINDOWS И LINUX Нативная пипетка Chrome берёт цвет с экрана там, где Chromium её поддерживает. Где нет — включается лупа на странице: 16-кратное увеличение с выбором одного пикселя, усреднением блоков 3x3, 5x5, 11x11 или 25x25 либо любой выделенной области. Лупа работает только на активной странице и только после вашего клика. ОСТАВАЙТЕСЬ В ДИЗАЙН-СИСТЕМЕ Каждый выбранный цвет локально сравнивается со встроенной палитрой Tailwind CSS v4. ColorDojo показывает ближайший токен, перцептивную дельту, парные образцы и кнопки копирования для форм `blue-600` и `var(--color-blue-600)`. Это половина «пипетка Tailwind»; извлечение темы добавляет генератор цветов Tailwind, который пишет готовый блок @theme прямо со страницы. ПРОВЕРЬТЕ КОНТРАСТ ДО АУДИТА Встроенная проверка контраста WCAG сразу показывает соотношения с белым и чёрным. Соедините активный цвет с цветом из истории: проверки WCAG 2.2 AA, крупный текст и AAA, справочный APCA Lc и подсказка ближайшей светлоты, если обычный текст не проходит AA. ИЗВЛЕКИТЕ ЦВЕТА, КОТОРЫЕ СТРАНИЦА ДЕЙСТВИТЕЛЬНО ИСПОЛЬЗУЕТ Извлечение темы запускается только на активной странице. ColorDojo объединяет доступные CSS custom properties с выборкой вычисленных стилей, группирует почти одинаковые цвета в палитру OKLCH и экспортирует переменные CSS, блок @theme Tailwind v4, JSON W3C Design Tokens с компонентами OKLCH или простой список в нужном формате. КОНВЕРТИРУЙТЕ HEX В OKLCH БЕЗ ЛИШНЕЙ ВКЛАДКИ Вставьте #ef4444, hsl(0 84% 60%), cmyk(0 72 72 6) или oklch(60% 0.2 30) в импорт палитры и скопируйте каждую запись в нужном формате: hex в OKLCH, OKLCH в hex или HSL в OKLCH — офлайн, прямо в попапе. НИКАКОГО КОНВЕЙЕРА ДАННЫХ О ПРОСМОТРАХ У ColorDojo нет доступа ко всем сайтам и постоянных content-скриптов. Инспекция и извлечение используют временное разрешение activeTab только после вашего клика. Расширение не делает сетевых запросов во время работы; история и палитры остаются в хранилище Chrome. Когда следующий пиксель зацепит взгляд — нажмите Alt+P и заберите его цвет прямо в код.