СмыслоКод

Color Engine

aimsise · сообщество

Агент проверяет контраст текста по WCAG, подбирает читаемый цвет под фон и раскладывает фирменный цвет на шкалу оттенков для переменных CSS или Tailwind

На твоём компьютере·Без ключа·Бесплатно·6 инструментов·проверено 16.10.2026 на версии 1.0.1

Другие способы ↓Что можно сделать ↓

Что сможет агент

  • Агент проверяет, читается ли текст на фоне. Серый #777777 на белом набрал 4.48, и сервер отметил AA по WCAG только для крупного текста, обычному этого мало.
  • Если фирменный цвет не проходит по контрасту, сервер ищет читаемый вариант, а оттенок сохраняет, когда агент передаёт его в hue и chroma. Красный #db4d53 на белом дал 4.04, подобранный так #d1444c набрал 4.52.
  • Из одного цвета сервер собирает набор оттенков и отдаёт его готовым кодом: переменные CSS в блоке :root или JSON для Tailwind. Ключи от 50 до 950 будут, если попросить ровно 11 шагов, иначе оттенки нумеруются с нуля.
  • У каждого шага шкалы сервер пишет контраст с белым и чёрным, по этим числам видно, какой оттенок годится для текста на светлом фоне.
  • Цвет из макета агент переведёт в другой формат: #2f6fdb пришёл как oklch(0.56081 0.17815 260.27) и hsl(217.67, 70.49%, 52.16%).
Кто сделал
aimsise, сообщество
Версия
1.0.1
Проверено
16.10.2026, Claude Code
Лицензия
MIT
Код
github.com/aimsise/color-engine-mcp
Документация
github.com/aimsise/color-engine-mcp/tree/main

Подключить

Промпт собран из паспорта: команды в нём те же, что во вкладках Claude Code и Codex.

Промпт для агента
Подключи MCP-сервер «Color Engine» версии 1.0.1. Работай по шагам и после каждого коротко говори, что сделал.

Данные сервера (каталог smyslokod.ru, проверено 16.10.2026):
- имя в конфиге: color-engine
- официальный источник: https://github.com/aimsise/color-engine-mcp
- запуск: npx -y color-engine-mcp@1.0.1

Правила:
1. Не ставь Node.js, uv или Docker без моего «да». Не хватает - остановись и скажи, что поставить и откуда.
2. Ставь только пакет или адрес из этого промпта. Никаких установочных скриптов из README без моего подтверждения.
3. Перед правкой конфига сделай его резервную копию.

Шаги:
0. Определи, кто ты (Claude Code, Codex или другой агент) и какая у меня система.
1. Проверь окружение: node --version и npx --version (нужен Node.js 20 или новее). Скажи, что нашёл.
2. Проверь, нет ли уже сервера с таким именем: `claude mcp get color-engine` (в Codex: `codex mcp list`).
3. Подключи сервер:
   Claude Code: claude mcp add --scope user --transport stdio color-engine -- npx -y color-engine-mcp@1.0.1
   Codex: codex mcp add color-engine -- npx -y color-engine-mcp@1.0.1
   Если ты не Claude Code и не Codex, подключи способом, принятым у тебя, с той же командой запуска.
4. Проверка: `claude mcp list` (в Codex: `codex mcp list`), статус должен быть «Connected». Попроси меня перезапустить сессию. У сервера 6 инструментов, перечисли их. Сделай пробный запрос: «Через color-engine посчитай контраст серого #777777 на белом и скажи, годится ли он для основного текста». Покажи результат.
5. Итог одним сообщением: что добавлено и куда, статус, число инструментов, команда отката и откуда восстановить копию конфига. Откат: `claude mcp remove color-engine --scope user` (в Codex: `codex mcp remove color-engine`).

Если на любом шаге ошибка, не чини наугад. Покажи текст ошибки и скажи, что, по-твоему, случилось. Частые проблемы: https://smyslokod.ru/mcp/color-engine#problemy
  • Выполнят Claude Code, Codex, Hermes и любой агент с доступом к терминалу.

Что нужно на компьютере: Node.js 20 или новее.

Ключ: не нужен.

Команда подключения: claude mcp add --scope user color-engine -- npx -y color-engine-mcp@1.0.1. Ключ и регистрация не нужны, нужен Node.js 20 или новее. При первом запуске npx скачивает пакет из реестра npm, после этого сервер считает цвета у тебя на компьютере и в сеть не ходит. Схемы инструментов записаны по стандарту JSON Schema draft-07. В открытом отчёте в репозитории Claude Code сказано, что Claude Desktop отклоняет инструменты с такой схемой ответа. В Claude Desktop мы этот сервер не запускали, в Claude Code он подключился.

Проверь, что работает

Пробный запрос

Через color-engine посчитай контраст серого #777777 на белом и скажи, годится ли он для основного текста

Что должно получиться: Промпт рассчитан на один вызов contrast. Когда мы вызывали его напрямую через mcp-probe, пришло 4.48: AA для обычного текста не пройден, для крупного пройден. Что ответит сам агент, мы не проверяли. Если вызова color-engine в ответе нет, посмотри командой /mcp, подключён ли сервер.

Что можно сделать

4 сценария

Проверить, читается ли текст на сайте

Промпт просит агента собрать пары цветов из стилей и прогнать их через сервер. Мы вызывали contrast напрямую: #777777 на белом получил 4.48 и пометку, что AA проходит только крупный текст, белый на синем #2f6fdb набрал 4.75 и прошёл AA. Поиск пар в файлах проекта на прогоне не делался.

  1. contrast берёт два цвета и возвращает число и четыре отметки: AA и AAA для обычного и для крупного текста.
  2. Пороги в ответах те же, что в WCAG 2.1: для AA нужно 4.5 у обычного текста и 3 у крупного.
Промпт
Найди в стилях моего сайта пары «цвет текста и фон»: основной текст, ссылки, текст на кнопках, подписи. Для каждой пары вызови color-engine (инструмент contrast) и собери таблицу: где пара, оба цвета, контраст, проходит ли AA для обычного и для крупного текста. Для пар, которые не проходят, подбери замену через solve_for_contrast с целью 4.5 и тем же оттенком. Файлы не меняй, сначала покажи таблицу.

Бесплатно: почта или сразу Телеграм-канал клуба

  • Совет. С флагом apca сервер добавляет число APCA. У белого на #2f6fdb оно вышло -77.95, минус значит светлый текст на тёмном фоне.

Фирменный цвет для текста на белом

На прогоне #db4d53 набрал на белом 4.04, этого хватает только для крупного текста. solve_for_contrast с тем же оттенком и насыщенностью подобрал #d1444c с контрастом 4.52. Как агент найдёт место в стилях, мы не смотрели.

  1. Оттенок и насыщенность исходного цвета агент берёт из parse_color и передаёт в solve_for_contrast как hue и chroma.
  2. В описании инструмента сказано, что без chroma сервер берёт насыщенность фона, у белого она нулевая, и ответ получится серым.
Промпт
Мой фирменный цвет [цвет, например #db4d53]. Через color-engine проверь его контраст с белым. Если для обычного текста не хватает, подбери через solve_for_contrast цвет того же оттенка с контрастом не ниже 4.5, темнее исходного. Покажи оба цвета с числами и предложи, где в стилях заменить.

Бесплатно: почта или сразу Телеграм-канал клуба

Шкала оттенков фирменного цвета для темы сайта

Сервер на прогоне вернул для #2f6fdb шкалу brand от #e1e1e1 до #181818, сам цвет стоял на 500. У каждого шага было число контраста с белым: 500 дал 4.75, 600 дал 6.42. Вставку в файлы темы мы не проверяли.

  1. generate_ramp отдаёт список оттенков с контрастом к белому и чёрному, а с tokenFormat ещё и готовый код.
  2. С deltaL шкала строится вокруг светлоты твоего цвета, без него от почти белого до чёрного.
Промпт
Через color-engine построй шкалу из 11 оттенков от цвета [цвет] с deltaL 0.7 и именем brand: tokenFormat css-variables, если в проекте обычный CSS, или tailwind, если Tailwind. Добавь шкалу туда, где лежат цвета темы, и для текста на белом используй оттенок, у которого контраст с белым не ниже 4.5. Перед правкой файлов покажи изменения.

Бесплатно: почта или сразу Телеграм-канал клуба

  • Совет. Ключи 50-950 появляются только при 11 шагах, при другом числе шаги называются номерами с нуля.

Цвет из макета перевести в нужную запись

В наших вызовах #2f6fdb пришёл как oklch(0.56081 0.17815 260.27). Красный из Display P3 сервер разобрал в #ff0000 с пометкой, что в sRGB он не помещается. Цвет oklch(0.7 0.4 30) gamut_map свёл к #ff5843. Таблицу по этому промпту агент не собирал.

  1. Сначала parse_color сообщает, помещается ли цвет в sRGB. Запись в нужном формате даёт convert_color, а для цвета за пределами sRGB замену подбирает gamut_map.
Промпт
Вот цвета из макета: [список, например color(display-p3 1 0 0), #2f6fdb]. Через color-engine переведи каждый в oklch и hex. Если цвет не помещается в sRGB, скажи об этом и дай ближайший цвет через gamut_map. Ответь таблицей.

Бесплатно: почта или сразу Телеграм-канал клуба

Пример работы

редакция, прогон при проверке 16.10.2026
Задача
Проверить контраст и подобрать читаемые цвета для сайта
Промпт
Через color-engine проверь контраст #777777 на белом, подбери светлый текст для синей кнопки #2f6fdb и построй шкалу brand из 11 оттенков
Что сделал агент
  1. contrast за 3 мс вернул 4.48 для #777777 на белом, AA прошёл только крупный текст.
  2. solve_for_contrast для фона #2f6fdb и цели 4.5 нашёл #f6f9ff с контрастом 4.51.
  3. generate_ramp построил 11 оттенков brand в JSON для Tailwind, исходный цвет встал на 400.
  4. На полупрозрачный #00000080 contrast ответил ошибкой ALPHA_UNSUPPORTED.
Результат
В 24 вызовах через npx пришли обычные ответы и ожидаемые ошибки за 1-30 мс, соединения при запуске шли только к реестру npm и к DNS песочницы. Ещё 16 вызовов из установленного пакета прошли без единого соединения, ключ не понадобился. Инструменты вызывал mcp-probe, агент Claude Code этот промпт не выполнял.

Инструменты

6 · описания около 3,8 тыс. токенов

Жёлтым то, что агент делает от твоего имени, красным запуск команд на компьютере. Нажми на имя: покажем, что делает инструмент, и описание, которое читает агент. В Claude Code инструменты грузятся по запросу и почти не занимают память агента; в других клиентах и при своём адресе подключения (ANTHROPIC_BASE_URL) описания грузятся целиком на каждом сообщении.

Когда не нужен

Сервер не пригодится, если цвета сайта уже выбраны и проверены дизайнером, или если сайт собран в конструкторе, где стили не правятся кодом. Картинки и макеты он не смотрит, работает только с записями цветов, которые ему передали.

Частые проблемы

9

В шкале из 11 оттенков самый светлый получился серым #f5f5f5, самый тёмный чистым чёрным, а твой цвет встал на 400

По умолчанию сервер растягивает шкалу по светлоте от 0.97 до 0.05 и на краях убирает цвет совсем. Исходный цвет он ставит на тот шаг, который ближе всего по светлоте: у #2f6fdb это оказался 400. Попроси агента передать deltaL, тогда шкала строится вокруг светлоты твоего цвета. Для #2f6fdb при 11 шагах и deltaL 0.7 цвет на прогоне встал ровно на 500, для других цветов мы это не проверяли. Чтобы тёмный край не уходил в чёрный, можно задать lightnessMin 0.25: у того же синего 950 вышел #222222.

Переменные пришли с номерами от 0 до 4, например --accent-0 и --accent-4, и без имён 50-950

Имена от 50 до 950 сервер даёт, только когда в шкале ровно 11 шагов. Если число шагов не указано, сервер строит пять оттенков и называет их по номерам с нуля. В промпте проси шкалу из 11 шагов (steps 11), тогда переменные получат имена от 50 до 950, как у Tailwind.

Ответ ALPHA_UNSUPPORTED на цвет вроде #00000080 или rgba()

Контраст полупрозрачного цвета зависит от того, что под ним, поэтому contrast и solve_for_contrast принимают только непрозрачные цвета. Пусть агент сначала посчитает итоговый цвет поверх фона и передаст его без прозрачности.

solve_for_contrast вернул цвет, но met false

Нужный контраст на этом фоне недостижим. На сером #808080 мы просили 21, сервер ответил чёрным и лучшим возможным числом 5.32. Проверяй поле met в ответе. Если там false, меняй фон или снижай цель, например до 4.5 для обычного текста.

Агент не видит инструментов сервера

Клиент не перезапущен после подключения: Claude Code читает подключения при старте сессии. Закрой и открой сессию, потом проверь: claude mcp list.

«spawn npx ENOENT» при запуске

Клиент не видит npx: приложения с иконкой не читают PATH из настроек терминала. Пропиши полный путь к npx. Узнать его: which npx на Mac, where npx на Windows.

«Unsupported engine» или падение при старте

Старая версия Node.js. Нужна 20 или новее, проверить: node --version.

Codex: сервер не успевает запуститься

Codex ждёт запуска 10 секунд, а первый запуск npx скачивает пакет дольше. Во вкладке Codex уже стоит startup_timeout_sec = 30, возьми фрагмент оттуда.

Агент путается в инструментах и медленно отвечает

В настройках Claude Code задан свой адрес подключения (ANTHROPIC_BASE_URL): поиск инструментов выключается, и описания всех подключений грузятся целиком. Оставь включёнными только нужные подключения.

Безопасность и данные

Кто сделал
aimsise (сообщество). Исходный код: github.com/aimsise/color-engine-mcp, лицензия MIT.
Что видит агент
Только то, что агент передаёт в вызов: записи цветов, цель контраста, число шагов и имя для переменных. Файлы проекта и разговор сервер не читает, наружу ничего не отправляет.
Куда уходят данные
Данные остаются на компьютере.
Что может изменить
Ничего не меняет: все шесть инструментов считают в памяти и возвращают текст, на диск сервер не пишет. Код с цветами в файлы проекта вставляет агент.
Наша проверка
Пакет color-engine-mcp выложил в npm его единственный сопровождающий aimsise, тот же человек ведёт репозиторий aimsise/color-engine-mcp на GitHub, лицензия MIT, в официальном реестре MCP сервер записан как io.github.aimsise/color-engine-mcp. Это частный автор, компании и сайта у проекта нет. Мы прочитали код версии 1.0.1: работы с сетью, файлами и запуска программ в нём нет. Скриптов preinstall, install и postinstall в package.json нет, версии трёх зависимостей закреплены точно. Инструкцию сервера и описания всех шести инструментов прочитали целиком. Агенту там советуют только, какой инструмент брать, например solve_for_contrast для подбора цвета под цель. Просьб что-то скрыть, отправить или прочитать файлы и ключи нет. Автор пометил все инструменты как только чтение, это совпало с кодом. В одноразовой песочнице Ubuntu 24.04.5 на Node.js 22 через npx было 24 вызова всех шести инструментов, ответы пришли за 1-30 мс, и ещё 16 тех же вызовов мы сделали из установленного пакета без npx. Через npx соединения шли только к реестру npm и к DNS самой песочницы, а сервер, запущенный из уже скачанного пакета, не открыл ни одного. OSV нашла одну запись в дереве из 94 пакетов: GHSA-6qxp-vccf-f47h в @modelcontextprotocol/sdk 1.29.0. Она про OAuth-клиент по HTTP, а в тексте записи сказано «Not affected: MCP servers built with the SDK, stdio clients». Color Engine как раз сервер на этом SDK и работает через stdio, так что запись его не задевает. По самому пакету записей нет. Версия в команде закреплена.
Версия
В командах закреплена версия 1.0.1: ставится ровно то, что мы проверили.
Проверить самому
агент прочитает код подключения как недоверенный

Полезные материалы

Журнал проверок

  • 16.10.2026·1.0.1·Claude Code, Linux·работаетa00a8caf6b7587d1

Отпечаток - контрольная сумма того, что сервер отдаёт агенту. Поменялся при той же версии - поменялось поведение.

Подключения делают их авторы. Мы проверяем установку и описываем, что они умеют, но код и сервис остаются чужими. Перед установкой посмотри, какие данные получит агент.